Frage Wie kann ich Zahlen als Dollar-Währungszeichenfolge in JavaScript formatieren?


Ich möchte einen Preis in JavaScript formatieren.
Ich hätte gerne eine Funktion, die ein float als Argument und gibt a zurück string so formatiert:

"$ 2,500.00"

Was ist der beste Weg, dies zu tun?


1389


Ursprung


Antworten:


Sie können verwenden:

  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)

Dann können Sie das Zeichen '$' hinzufügen.

Wenn Sie "," für tausend benötigen, können Sie Folgendes verwenden:

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) : "");
 };

Und benutze es mit:

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

Wenn du immer '.' und ',' können Sie sie von Ihrem Methodenaufruf absetzen, und die Methode wird sie für Sie voreinstellen.

(123456789.12345).formatMoney(2);

Wenn in Ihrer Kultur die beiden Symbole umgedreht sind (z. B. Europäer), fügen Sie einfach die folgenden beiden Zeilen in das Feld ein formatMoney Methode:

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

1515



Kurze und schnelle Lösung (funktioniert überall!)

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

Die Idee hinter dieser Lösung besteht darin, übereinstimmende Abschnitte durch erste Übereinstimmung und Komma zu ersetzen, d.h. '$&,'. Das Matching erfolgt mit Lookahead-Ansatz. Sie können den Ausdruck als lesen "passe eine Zahl an, wenn ihr eine Folge von drei Zahlenmengen (einer oder mehrere) und ein Punkt folgt".

TESTS:

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/


Erweiterte kurze Lösung

Sie können auch den Prototyp von erweitern Number Objekt, um zusätzliche Unterstützung für beliebig viele Dezimalstellen hinzuzufügen [0 .. n] und die Größe von Nummerngruppen [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 erweiterte kurze Lösung

In diesem Super erweiterte Version Sie können verschiedene Trennertypen festlegen:

/**
 * 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



Int.Nummerformat

Javascript hat einen Zahlenformatierer und ist Teil der Internationalisierungs-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 Geige

Einige Hinweise zur Browserunterstützung

  • Alle gängigen Browser Unterstütze es heutzutage
  • Die größten Täter in Bezug auf die Unterstützung sind UC Mobile (halte dich fern davon) und Opera Mini (verkrüppelt von Design)
  • Da ist ein Unterlegscheibe um es auf älteren Browsern zu unterstützen
  • Schau es dir an Kann ich benutzen Für mehr Information

Intl.NumberFormat vs Number.prototype.toLocaleString

Eine letzte Notiz, die das mit dem älteren vergleicht.toLocaleString. Beide bieten im Wesentlichen die gleiche Funktionalität. ToLocaleString in seinen älteren Versionen (vor Intl) unterstützt keine Gebietsschemas: Es verwendet das Systemgebietsschema. Um sicher zu sein, dass Sie die richtige Version verwenden, MDN schlägt vor, nach der Existenz von Intl. Wenn Sie also trotzdem nach Intl suchen müssen, warum nicht verwenden es stattdessen? Wenn Sie sich jedoch dafür entscheiden, das Shim zu verwenden, werden auch Patches hinzugefügt toLocaleStringIn diesem Fall können Sie es problemlos verwenden:

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

758



Sehen Sie sich das JavaScript an Nummer Objekt und sehen, ob es Ihnen helfen kann.

  • toLocaleString() formatiert eine Nummer mit dem ortsspezifischen Tausendertrennzeichen.
  • toFixed() wird die Zahl auf eine bestimmte Anzahl von Dezimalstellen runden.

Um diese Werte gleichzeitig verwenden zu können, muss der Wert wieder in eine Zahl geändert werden, da beide eine Zeichenfolge ausgeben.

Beispiel:

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

160



Unten ist das Patrick Desjardins (alias Daok) Code mit ein paar Kommentaren und einigen kleinen Änderungen:

/* 
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) : ''); 
}

und hier einige 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));

Die kleinen Änderungen sind:

  1. etwas bewegt Math.abs(decimals) nur dann gemacht werden, wenn es nicht ist NaN.

  2. decimal_sep kann kein leerer String mehr sein (eine Art Dezimaltrennzeichen ist ein MUSS)

  3. wir gebrauchen typeof thousands_sep === 'undefined' wie in. vorgeschlagen Wie ermittelt man am besten, ob ein Argument nicht an die JavaScript-Funktion gesendet wird?

  4. (+n || 0) wird nicht benötigt, weil this ist ein Number Objekt


157



accounting.js ist eine kleine JavaScript-Bibliothek für die Formatierung von Zahlen, Geld und Währungen.


120



Hier ist der beste js Geldformatierer, den ich gesehen habe:

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) : "");
};

Es wurde von hier neu formatiert und ausgeliehen: https://stackoverflow.com/a/149099/751484

Sie müssen Ihren eigenen Währungsbezeichner angeben (Sie haben $ oben verwendet).

Nennen Sie es so (beachten Sie jedoch, dass die Argumente standardmäßig auf 2, Komma und Punkt gesetzt sind, so dass Sie keine Argumente angeben müssen, wenn Sie dies bevorzugen):

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

95



Wenn der Betrag eine Zahl ist, sagen Sie -123, dann

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

wird die Zeichenfolge erzeugen "-$123.00".

Hier ist eine komplette Arbeit Beispiel.


95



Hier gibt es schon einige gute Antworten. Hier ist ein weiterer Versuch, nur zum Spaß:

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];
}

Und einige 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"

Bearbeitet: Jetzt wird es auch mit negativen Zahlen umgehen


70



Ich denke was du willst ist f.nettotal.value = "$" + showValue.toFixed(2);


67



Warum hat niemand das Folgende vorgeschlagen?

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

Funktioniert für die meisten / einige Browser:

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


55