Vraag Hoe kan ik nummers als dollarvalutatekenreeks in JavaScript opmaken?


Ik zou graag een prijs in JavaScript formatteren.
Ik wil graag een functie die een float als een argument en retourneert een string opgemaakt als volgt:

"$ 2,500.00"

Wat is de beste manier om dit te doen?


1389


oorsprong


antwoorden:


Je kunt gebruiken:

  var profits=2489.8237
  profits.toFixed(3) //returns 2489.824 (round up)
  profits.toFixed(2) //returns 2489.82
  profits.toFixed(7) //returns 2489.8237000 (padding)

Vervolgens kunt u het teken '$' toevoegen.

Als je ',' voor duizend nodig hebt, kun je gebruiken:

Number.prototype.formatMoney = function(c, d, t){
    var n = this, 
    c = isNaN(c = Math.abs(c)) ? 2 : c, 
    d = d == undefined ? "." : d, 
    t = t == undefined ? "," : t, 
    s = n < 0 ? "-" : "", 
    i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))), 
    j = (j = i.length) > 3 ? j % 3 : 0;
   return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };

En gebruik het met:

(123456789.12345).formatMoney(2, '.', ',');

Als je altijd '.' en ',', je kunt ze van je methodeaanroep weglaten, en de methode zal ze voor jou standaard instellen.

(123456789.12345).formatMoney(2);

Als je cultuur de twee symbolen omgedraaid heeft (dat wil zeggen Europeanen), plak je gewoon over de volgende twee regels in de formatMoney methode:

    d = d == undefined ? "," : d, 
    t = t == undefined ? "." : t, 

1515



Korte en snelle oplossing (werkt overal!)

(12345.67).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');  // 12,345.67

Het idee achter deze oplossing is het vervangen van overeenkomende secties door eerste overeenkomst en komma, d.w.z. '$&,'. De matching gebeurt met behulp van lookahead benadering. Je mag de uitdrukking als lezen "match een nummer als het wordt gevolgd door een reeks van drie nummerreeksen (een of meer) en een punt".

TESTEN:

1        --> "1.00"
12       --> "12.00"
123      --> "123.00"
1234     --> "1,234.00"
12345    --> "12,345.00"
123456   --> "123,456.00"
1234567  --> "1,234,567.00"
12345.67 --> "12,345.67"

DEMO:  http://jsfiddle.net/hAfMM/9571/


Uitgebreide korte oplossing

Je kunt ook het prototype van uitbreiden Number object om extra ondersteuning van een willekeurig aantal decimalen toe te voegen [0 .. n] en de grootte van getalsgroepen [0 .. x]:

/**
 * Number.prototype.format(n, x)
 * 
 * @param integer n: length of decimal
 * @param integer x: length of sections
 */
Number.prototype.format = function(n, x) {
    var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\.' : '$') + ')';
    return this.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$&,');
};

1234..format();           // "1,234"
12345..format(2);         // "12,345.00"
123456.7.format(3, 2);    // "12,34,56.700"
123456.789.format(2, 4);  // "12,3456.79"

DEMO / TESTS:  http://jsfiddle.net/hAfMM/435/


Super uitgebreide korte oplossing

In deze super uitgebreide versie u kunt verschillende scheidingstypes instellen:

/**
 * Number.prototype.format(n, x, s, c)
 * 
 * @param integer n: length of decimal
 * @param integer x: length of whole part
 * @param mixed   s: sections delimiter
 * @param mixed   c: decimal delimiter
 */
Number.prototype.format = function(n, x, s, c) {
    var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
        num = this.toFixed(Math.max(0, ~~n));

    return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
};

12345678.9.format(2, 3, '.', ',');  // "12.345.678,90"
123456.789.format(4, 4, ' ', ':');  // "12 3456:7890"
12345678.9.format(0, 3, '-');       // "12-345-679"

DEMO / TESTS:  http://jsfiddle.net/hAfMM/612/


1014



Intl.numberformat

Javascript heeft een nummer-opmaakprogramma en maakt deel uit van de Internationalization API.

// Create our number formatter.
var formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  // the default value for minimumFractionDigits depends on the currency
  // and is usually already 2
});

formatter.format(2500); /* $2,500.00 */

JS fiddle

Enkele opmerkingen over browserondersteuning

  • Alle belangrijke browsers steun het tegenwoordig
  • De grootste overtreders op het gebied van ondersteuning zijn UC Mobile (blijf daar vanaf) en Opera Mini (verlamd door ontwerp)
  • Er is een shim om het te ondersteunen in oudere browsers
  • Kijk even naar Kan ik gebruiken voor meer informatie

Intl.NumberFormat versus Number.prototype.toLocaleString

Een laatste opmerking die dit met de oudere vergelijkt.toLocaleString. Beide bieden in essentie dezelfde functionaliteit. Echter toLocaleString in zijn oudere incarnaties (pre-Intl) ondersteunt eigenlijk geen locales: het gebruikt de systeemlocale. Daarom, om er zeker van te zijn dat u de juiste versie gebruikt, MDN stelt voor om te controleren op het bestaan ​​van Intl. Dus als u toch op Intl moet controleren, waarom niet gebruiken? het in plaats daarvan? Als u echter kiest voor de shim, worden er ook patches aangebracht toLocaleString, dus in dat geval kunt u het probleemloos gebruiken:

(2500).toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD',
}); /* $2,500.00 */

758



Bekijk het JavaScript Aantal object en kijk of het je kan helpen.

  • toLocaleString() zal een getal opmaken met behulp van locatie-specifieke duizenden-scheidingstekens.
  • toFixed() rondt het getal af naar een bepaald aantal decimalen.

Om deze tegelijkertijd te gebruiken, moet de waarde van het type terug worden gewijzigd in een getal, omdat beide een tekenreeks uitvoeren.

Voorbeeld:

Number(someNumber.toFixed(1)).toLocaleString()

160



Hieronder staat de Patrick Desjardins (ook bekend als Daok) code met een beetje commentaar toegevoegd en enkele kleine wijzigingen:

/* 
decimal_sep: character used as deciaml separtor, it defaults to '.' when omitted
thousands_sep: char used as thousands separator, it defaults to ',' when omitted
*/
Number.prototype.toMoney = function(decimals, decimal_sep, thousands_sep)
{ 
   var n = this,
   c = isNaN(decimals) ? 2 : Math.abs(decimals), //if decimal is zero we must take it, it means user does not want to show any decimal
   d = decimal_sep || '.', //if no decimal separator is passed we use the dot as default decimal separator (we MUST use a decimal separator)

   /*
   according to [https://stackoverflow.com/questions/411352/how-best-to-determine-if-an-argument-is-not-sent-to-the-javascript-function]
   the fastest way to check for not defined parameter is to use typeof value === 'undefined' 
   rather than doing value === undefined.
   */   
   t = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, //if you don't want to use a thousands separator you can pass empty string as thousands_sep value

   sign = (n < 0) ? '-' : '',

   //extracting the absolute value of the integer part of the number and converting to string
   i = parseInt(n = Math.abs(n).toFixed(c)) + '', 

   j = ((j = i.length) > 3) ? j % 3 : 0; 
   return sign + (j ? i.substr(0, j) + t : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : ''); 
}

en hier enkele tests:

//some tests (do not forget parenthesis when using negative numbers and number with no decimals)
alert(123456789.67392.toMoney() + '\n' + 123456789.67392.toMoney(3) + '\n' + 123456789.67392.toMoney(0) + '\n' + (123456).toMoney() + '\n' + (123456).toMoney(0) + '\n' + 89.67392.toMoney() + '\n' + (89).toMoney());

//some tests (do not forget parenthesis when using negative numbers and number with no decimals)
alert((-123456789.67392).toMoney() + '\n' + (-123456789.67392).toMoney(-3));

De kleine wijzigingen zijn:

  1. verplaatst een beetje de Math.abs(decimals) alleen gedaan worden als dat niet het geval is NaN.

  2. decimal_sep kan geen lege string meer zijn (een soort decimaal scheidingsteken is een MUST)

  3. we gebruiken typeof thousands_sep === 'undefined' zoals voorgesteld in Hoe het beste te bepalen of een argument niet naar de JavaScript-functie is verzonden

  4. (+n || 0) is niet nodig omdat this is een Number voorwerp


157



accounting.js is een kleine JavaScript-bibliotheek voor het opmaken van getallen, geld en valuta.


120



Hier is de beste js money formatter die ik heb gezien:

Number.prototype.formatMoney = function(decPlaces, thouSeparator, decSeparator) {
    var n = this,
        decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
        decSeparator = decSeparator == undefined ? "." : decSeparator,
        thouSeparator = thouSeparator == undefined ? "," : thouSeparator,
        sign = n < 0 ? "-" : "",
        i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + "",
        j = (j = i.length) > 3 ? j % 3 : 0;
    return sign + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : "");
};

Het werd opnieuw geformatteerd en van hieruit geleend: https://stackoverflow.com/a/149099/751484

U moet uw eigen valuta-aanduiding opgeven (u hebt $ hierboven gebruikt).

Noem het zo (hoewel merk op dat de args standaard op 2, comma, & period staan, dus je hoeft geen args te leveren als dat je voorkeur heeft):

var myMoney=3543.75873;
var formattedMoney = '$' + myMoney.formatMoney(2,',','.'); // "$3,543.76"

95



Als het bedrag bijvoorbeeld een getal is -123, dan

amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' });

zal de string produceren "-$123.00".

Hier is een volledige werking voorbeeld.


95



Er zijn hier al enkele geweldige antwoorden. Hier is nog een poging, gewoon voor de lol:

function formatDollar(num) {
    var p = num.toFixed(2).split(".");
    return "$" + p[0].split("").reverse().reduce(function(acc, num, i, orig) {
        return  num=="-" ? acc : num + (i && !(i % 3) ? "," : "") + acc;
    }, "") + "." + p[1];
}

En sommige tests:

formatDollar(45664544.23423) // "$45,664,544.23"
formatDollar(45) // "$45.00"
formatDollar(123) // "$123.00"
formatDollar(7824) // "$7,824.00"
formatDollar(1) // "$1.00"

Bewerkt: nu zal het ook negatieve getallen verwerken


70



Ik denk dat wat je wilt is f.nettotal.value = "$" + showValue.toFixed(2);


67



Dus waarom heeft niemand het volgende voorgesteld?

(2500).toLocaleString("en-GB", {style: "currency", currency: "GBP", minimumFractionDigits: 2}) 

Werkt voor de meeste / enkele browsers:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#Browser_Compatibility


55