Ich möchte einen Preis in JavaScript formatieren. Ich möchte eine Funktion, die a float
als Argument verwendet und eine folgende string
Formatierung zurückgibt :
"$ 2,500.00"
Was ist der beste Weg, dies zu tun?
javascript
formatting
currency
Daniel Magliola
quelle
quelle
formatNumber
in JavascriptAntworten:
Number.prototype.toFixed
Diese Lösung ist mit jedem einzelnen großen Browser kompatibel:
Alles was Sie brauchen, ist das Währungssymbol (zB
"$" + profits.toFixed(2)
) hinzuzufügen und Sie haben Ihren Betrag in Dollar.Benutzerdefinierte Funktion
Wenn Sie die Verwendung
,
zwischen den einzelnen Ziffern benötigen , können Sie diese Funktion verwenden:Verwenden Sie es so:
Wenn Sie immer '.' und ',' können Sie sie aus Ihrem Methodenaufruf auslassen, und die Methode wird sie standardmäßig für Sie festlegen.
Wenn in Ihrer Kultur die beiden Symbole umgedreht sind (z. B. Europäer) und Sie die Standardeinstellungen verwenden möchten, fügen Sie einfach die folgenden zwei Zeilen in die
formatMoney
Methode ein:Benutzerdefinierte Funktion (ES6)
Wenn Sie die moderne ECMAScript-Syntax (dh über Babel) verwenden können, können Sie stattdessen diese einfachere Funktion verwenden:
quelle
d
undt
zu sein.
und,
jeweils so , dass Sie sie nicht haben jedes Mal zu spezifizieren. Außerdem empfehle ich, den Anfang derreturn
Anweisung so zu ändernreturn s + '$' + [rest]
, dass er lautet: Andernfalls erhalten Sie kein Dollarzeichen.Intl.numberformat
Javascript hat einen Zahlenformatierer (Teil der Internationalisierungs-API).
JS Geige
Verwenden Sie
undefined
anstelle des ersten Arguments ('en-US'
im Beispiel) das Systemgebietsschema (das Benutzergebietsschema, falls der Code in einem Browser ausgeführt wird). Weitere Erläuterung des Gebietsschemacodes .Hier ist eine Liste der Währungscodes .
Intl.NumberFormat vs Number.prototype.toLocaleString
Ein letzter Hinweis zum Vergleich mit dem älteren.
toLocaleString
. Beide bieten im Wesentlichen die gleiche Funktionalität. ToLocaleString in seinen älteren Inkarnationen (vor Intl) unterstützt jedoch keine Gebietsschemas : Es verwendet das Systemgebietsschema. Stellen Sie daher sicher, dass Sie die richtige Version verwenden ( MDN empfiehlt, die Existenz von zu überprüfenIntl
). Außerdem ist die Leistung beider für ein einzelnes Element gleich. Wenn Sie jedoch viele Zahlen formatieren müssen, ist die VerwendungIntl.NumberFormat
~ 70-mal schneller. So verwenden SietoLocaleString
:Einige Hinweise zur Browserunterstützung
quelle
Kurze und schnelle Lösung (funktioniert überall!)
Die Idee hinter dieser Lösung besteht darin, übereinstimmende Abschnitte durch erste Übereinstimmung und Komma zu ersetzen, d
'$&,'
. H. Der Abgleich erfolgt nach dem Lookahead-Ansatz . Sie können den Ausdruck als "Übereinstimmung mit einer Zahl, wenn darauf eine Folge von drei Zahlensätzen (einer oder mehrere) und einem Punkt folgt" lesen .TESTS:
DEMO: http://jsfiddle.net/hAfMM/9571/
Erweiterte Kurzlösung
Sie können den
Number
Objektprototyp auch erweitern , um zusätzliche Unterstützung für eine beliebige Anzahl von Dezimalstellen[0 .. n]
und die Größe von Zahlengruppen hinzuzufügen[0 .. x]
:DEMO / TESTS: http://jsfiddle.net/hAfMM/435/
Super erweiterte kurze Lösung
In dieser super erweiterten Version können Sie verschiedene Trennzeichentypen festlegen:
DEMO / TESTS: http://jsfiddle.net/hAfMM/612/
quelle
.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
.Number.prototype.toMoney = (decimal=2) -> @toFixed(decimal).replace /(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,"
\.
mit$
(Ende der Zeile), dhthis.toFixed(0).replace(/(\d)(?=(\d{3})+$)/g, "$1,")
.$1,
. Der Abgleich erfolgt nach dem Lookahead-Ansatz . Sie können den Ausdruck als "Übereinstimmung mit einer Zahl, wenn darauf eine Folge von drei Zahlensätzen (einer oder mehrere) und einem Punkt folgt" lesen .Schauen Sie sich das JavaScript Number- Objekt an und prüfen Sie, ob es Ihnen helfen kann.
toLocaleString()
formatiert eine Zahl mit einem standortspezifischen Tausendertrennzeichen.toFixed()
rundet die Zahl auf eine bestimmte Anzahl von Dezimalstellen.Um diese gleichzeitig zu verwenden, muss der Typ des Werts wieder in eine Zahl geändert werden, da beide eine Zeichenfolge ausgeben.
Beispiel:
quelle
toLocaleString
, die das Systemgebietsschema verwendet, und eine neue (inkompatible) Version , die von der ECMAScript Intl API stammt. Hier erklärt . Diese Antwort scheint für die alte Version gedacht zu sein.Unten finden Sie den Code von Patrick Desjardins (alias Daok) mit einigen Kommentaren und einigen geringfügigen Änderungen:
und hier einige Tests:
Die geringfügigen Änderungen sind:
etwas bewegt das
Math.abs(decimals)
nur zu tun ist wenn nichtNaN
.decimal_sep
kann keine leere Zeichenfolge mehr sein (eine Art Dezimaltrennzeichen ist ein MUSS)Wir verwenden
typeof thousands_sep === 'undefined'
wie in Wie am besten vorgeschlagen, um festzustellen, ob ein Argument nicht an die JavaScript-Funktion gesendet wird(+n || 0)
wird nicht benötigt, dathis
es sich um einNumber
Objekt handeltJS Fiddle
quelle
parseInt
wird auf den absoluten Wert des INTEGER-Teils der Zahl aufgerufen. Der INTEGER-Teil kann nicht mit NULL beginnen, es sei denn, es ist nur NULL! UndparseInt(0) === 0
entweder oktal oder dezimal.0
als oktal betrachtet wirdparseInt
. In diesem Code ist es jedoch UNMÖGLICHparseInt
,016
als Eingabe (oder einen anderen oktalformatierten Wert) zu empfangen , da das übergebene Argument zuerstparseInt
von derMath.abs
Funktion verarbeitet wird . Es gibt also keine MöglichkeitparseInt
, eine Zahl zu erhalten, die mit Null beginnt, es sei denn, es ist nur eine Null oder0.nn
(wonn
sind Dezimalstellen). Aber beide0
und0.nn
Zeichenfolgen würden wie angenommenparseInt
in eine einfache NULL umgewandelt.Accounting.js ist eine winzige JavaScript-Bibliothek für die Formatierung von Zahlen, Geld und Währungen.
quelle
Wenn der Betrag beispielsweise eine Zahl ist
-123
, dannwird die Zeichenfolge erzeugen
"-$123.00"
.Hier ist ein komplettes Arbeits Beispiel .
quelle
minimumFractionDigits: 0
Hier ist der beste Geldformatierer, den ich je gesehen habe:
Es wurde neu formatiert und von hier 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 2, Komma und Punkt sind, sodass Sie keine Argumente angeben müssen, wenn Sie dies bevorzugen):
quelle
var
Aussage.Hier gibt es bereits einige gute Antworten. Hier ist ein weiterer Versuch, nur zum Spaß:
Und einige Tests:
Bearbeitet: Jetzt werden auch negative Zahlen verarbeitet
quelle
i = orig.length - i - 1
im Rückruf tun . Trotzdem eine Durchquerung des Arrays weniger.reduce
Methode wurde in Ecmascript 1.8 eingeführt und wird in Internet Explorer 8 und niedriger nicht unterstützt.Funktioniert für alle aktuellen Browser
Verwenden Sie
toLocaleString
eine andere Währung zu formatieren in seinem sprachsensitiven Darstellung (mit ISO 4217 - Währungscodes).Beispiel südafrikanischer Rand-Code-Schnipsel für @avenmore
quelle
Ich denke was du willst ist
f.nettotal.value = "$" + showValue.toFixed(2);
quelle
Numeral.js - eine js-Bibliothek zur einfachen Formatierung von Zahlen durch @adamwdraper
quelle
Ok, basierend auf dem, was du gesagt hast, benutze ich Folgendes:
Ich bin offen für Verbesserungsvorschläge (ich würde es vorziehen, YUI nicht einzuschließen, nur um dies zu tun :-)) Ich weiß bereits, dass ich das "erkennen" sollte. anstatt es nur als Dezimaltrennzeichen zu verwenden ...
quelle
Ich benutze die Bibliothek Globalize (von Microsoft):
Es ist ein großartiges Projekt, Zahlen, Währungen und Daten zu lokalisieren und sie automatisch entsprechend dem Gebietsschema des Benutzers richtig formatieren zu lassen! ... und obwohl es sich um eine jQuery-Erweiterung handeln sollte, handelt es sich derzeit um eine 100% unabhängige Bibliothek. Ich schlage Ihnen allen vor, es auszuprobieren! :) :)
quelle
Javascript-Nummer-Formatierer (früher bei Google Code )
Nur 75 Zeilen einschließlich MIT-Lizenzinformationen, Leerzeilen und Kommentaren.#,##0.00
oder mit Negation-000.####
.# ##0,00
,#,###.##
,#'###.##
oder jede Art von nicht-Nummerierung Symbol.#,##,#0.000
oder#,###0.##
sind alle gültig.##,###,##.#
oder0#,#00#.###0#
sind alle in Ordnung.format( "0.0000", 3.141592)
.(Auszug aus der README-Datei)
quelle
+1 an Jonathan M für die Bereitstellung der ursprünglichen Methode. Da dies explizit ein Währungsformatierer ist, habe ich das Währungssymbol (standardmäßig '$') zur Ausgabe hinzugefügt und ein Standardkomma als Tausendertrennzeichen hinzugefügt. Wenn Sie eigentlich kein Währungssymbol (oder Tausendertrennzeichen) möchten, verwenden Sie einfach "" (leere Zeichenfolge) als Argument dafür.
quelle
+n || 0
ist das einzige, was ein bisschen seltsam erscheint (für mich jedenfalls).this
ist ein sehr nützlicher Variablenname. Die Konvertierung in,n
damit Sie zur Definitionszeit 3 Zeichen speichern können, war möglicherweise in einer Zeit erforderlich, in der RAM und Bandbreite in KB gezählt wurden, ist jedoch in einer Zeit, in der sich der Minifier um alles kümmert, bevor er jemals die Produktion erreicht, nur verschleiert. Die anderen cleveren Mikrooptimierungen sind zumindest umstritten.Es gibt einen Javascript-Port der PHP-Funktion "number_format".
Ich finde es sehr nützlich, da es für PHP-Entwickler einfach zu bedienen und erkennbar ist.
(Kommentarblock vom Original , unten für Beispiele und Gutschrift, wo fällig)
quelle
Eine kürzere Methode (zum Einfügen von Leerzeichen, Komma oder Punkt) mit regulärem Ausdruck?
quelle
Ich habe so etwas noch nicht gesehen. Es ist ziemlich prägnant und leicht zu verstehen.
Hier ist eine Version mit mehr Optionen in der endgültigen Ausgabe, um die Formatierung verschiedener Währungen in verschiedenen Lokalitätsformaten zu ermöglichen.
quelle
Die Antwort von Patrick Desjardins sieht gut aus, aber ich bevorzuge mein einfaches Javascript. Hier ist eine Funktion, die ich gerade geschrieben habe, um eine Zahl aufzunehmen und im Währungsformat zurückzugeben (abzüglich des Dollarzeichens).
quelle
Der Hauptteil besteht darin, die Tausendertrennzeichen einzufügen, was folgendermaßen geschehen könnte:
quelle
Es gibt ein eingebautes
function
toFixed injavascript
quelle
toFixed()
toFixed()
ist eine Funktion desNumber
Objekts und funktioniert nicht,var num
wenn es eine warString
, daher hat mir der zusätzliche Kontext geholfen.Von WillMaster .
quelle
Ich schlage die NumberFormat-Klasse aus der Google Visualization API vor .
Sie können so etwas tun:
Ich hoffe, es hilft.
quelle
Dies mag etwas spät sein, aber hier ist eine Methode, die ich gerade für einen Kollegen ausgearbeitet habe, um ein Gebietsschema hinzuzufügen
.toCurrencyString()
allen Zahlen Funktion berücksichtigt. Die Internalisierung dient nur der Nummerngruppierung, NICHT dem Währungszeichen. Wenn Sie Dollar ausgeben, verwenden Sie diese"$"
wie angegeben, da$123 4567
in Japan oder China dieselbe USD-Zahl wie$1,234,567
hier in den USA vorhanden ist. Wenn Sie Euro / etc. Ausgeben, ändern Sie das Währungszeichen von"$"
.Deklarieren Sie dies irgendwo in Ihrem KOPF oder wo immer nötig, kurz bevor Sie es verwenden müssen:
Dann bist du fertig! Verwenden
(number).toCurrencyString()
Sie diese Option überall dort, wo Sie die Nummer als Währung ausgeben müssen.quelle
Wie gewöhnlich gibt es mehrere Möglichkeiten, dasselbe zu tun, aber ich würde es vermeiden, es zu verwenden
Number.prototype.toLocaleString
es zu verwenden da es je nach Benutzereinstellungen unterschiedliche Werte zurückgeben kann.Ich empfehle auch nicht, die
Number.prototype
Prototypen von nativen Objekten zu erweitern. Dies ist eine schlechte Praxis, da dies zu Konflikten mit dem Code anderer Personen (z. B. Bibliotheken / Frameworks / Plugins) führen kann und möglicherweise nicht mit zukünftigen JavaScript-Implementierungen / -Versionen kompatibel ist.Ich glaube, dass reguläre Ausdrücke der beste Ansatz für das Problem sind. Hier ist meine Implementierung:
bearbeitet am 30.08.2010: Option zum Festlegen der Anzahl der Dezimalstellen hinzugefügt. bearbeitet am 23.08.2011: Option hinzugefügt, um die Anzahl der Dezimalstellen auf Null zu setzen.
quelle
Hier sind einige Lösungen, die alle die Testsuite, die Testsuite und den Benchmark bestehen. Wenn Sie zum Testen kopieren und einfügen möchten, probieren Sie This Gist aus .
Methode 0 (RegExp)
Basieren Sie auf https://stackoverflow.com/a/14428340/1877620 , aber korrigieren Sie, wenn kein Dezimalpunkt vorhanden ist.
Methode 1
Methode 2 (Auf Array teilen)
Methode 3 (Schleife)
Anwendungsbeispiel
Separator
Wenn wir ein benutzerdefiniertes Tausender- oder Dezimaltrennzeichen möchten, verwenden Sie
replace()
:Testsuite
Benchmark
quelle
quelle
Eine einfache Option für die korrekte Platzierung von Kommas, indem Sie zuerst die Zeichenfolge und den regulären regulären Ausdruck umkehren.
quelle
Ich fand dies von: accounting.js . Es ist sehr einfach und passt perfekt zu meinen Bedürfnissen.
quelle
$('#price').val( accounting.formatMoney(OOA, { symbol: "€", precision: 2,thousand: ".", decimal :",",format: "%v%s" } ) );
- zeigen 1.000,00 E