Ich versuche, eine Ganzzahl in JavaScript zu drucken mit Kommas als Tausendertrennzeichen . Zum Beispiel möchte ich die Nummer 1234567 als "1.234.567" anzeigen. Wie würde ich das machen?
So mache ich das:
function numberWithCommas(x) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
}
Gibt es eine einfachere oder elegantere Möglichkeit? Es wäre schön, wenn es auch mit Schwimmern funktioniert, aber das ist nicht nötig. Es muss nicht länderspezifisch sein, um zwischen Punkten und Kommas zu entscheiden.
javascript
formatting
numbers
Elias Zamaria
quelle
quelle
Number.prototype.toLocaleString
immer noch nicht funktioniert . Anstatt die Nummer tatsächlich zu formatieren, wird sie nur zurückgegeben, ohne dass ein Fehler ausgelöst wird. Das größte Gesichtspalme heute als Ergebnis davon haben ... #goodworkAppleAntworten:
Ich habe die Idee aus Kerrys Antwort verwendet, sie aber vereinfacht, da ich nur nach etwas Einfachem für meinen speziellen Zweck gesucht habe. Folgendes habe ich getan:
Code-Snippet anzeigen
Der Regex verwendet zwei Lookahead-Behauptungen:
Wenn Sie es beispielsweise bestehen, stimmt
123456789.01
die positive Behauptung mit jedem Punkt links von der 7 überein (da789
es sich um ein Vielfaches von 3 Ziffern,678
ein Vielfaches von 3 Ziffern567
usw. handelt). Die negative Behauptung überprüft, ob das Vielfache von 3 Ziffern keine Ziffern hinter sich hat.789
hat einen Punkt danach, also ist es genau ein Vielfaches von 3 Ziffern, also geht dort ein Komma.678
ist ein Vielfaches von 3 Ziffern, aber es hat ein9
Nachher, so dass diese 3 Ziffern Teil einer Gruppe von 4 sind und ein Komma nicht dorthin geht. Ähnliches gilt für567
.456789
ist 6 Stellen, was ein Vielfaches von 3 ist, also steht davor ein Komma.345678
ist ein Vielfaches von 3, aber es hat ein9
Nachher, so dass dort kein Komma steht. Und so weiter. Das\B
verhindert, dass der reguläre Ausdruck am Anfang der Zeichenfolge ein Komma setzt.@ neu-rah erwähnte, dass diese Funktion Kommas an unerwünschten Stellen hinzufügt, wenn mehr als 3 Stellen nach dem Dezimalpunkt stehen. Wenn dies ein Problem ist, können Sie diese Funktion verwenden:
Code-Snippet anzeigen
@ tjcrowder wies darauf hin, dass JavaScript nun, da es Lookbehind ( Support-Informationen ) hat, im regulären Ausdruck selbst gelöst werden kann:
Code-Snippet anzeigen
(?<!\.\d*)
ist ein negativer Lookbehind, der besagt, dass der Übereinstimmung keine vorangestellten.
null oder mehr Ziffern vorangestellt werden können . Das negative Lookbehind ist zumindest in V8 schneller als diesplit
undjoin
-Lösung ( Vergleich ).quelle
Ich bin überrascht, dass niemand Number.prototype.toLocaleString erwähnt hat . Es ist in JavaScript 1.5 (das 1999 eingeführt wurde) implementiert und wird daher grundsätzlich von allen gängigen Browsern unterstützt.
Es funktioniert auch in Node.js ab Version 0.12 durch Einbeziehung von Intl
Achten Sie nur darauf, dass diese Funktion eine Zeichenfolge und keine Zahl zurückgibt.
Wenn Sie etwas anderes wollen, könnte Numeral.js interessant sein.
quelle
var number = 123456.000; number.toLocaleString('en-US', {minimumFractionDigits: 2}); "123,456.00"
Diese Optionen funktionieren jedoch nicht in FF oder Safari.X XXX XXX,YYY
).toLocaleString
in Node.js ab Version 0.12 über die Aufnahme von Intl .parseInt("1234567", 10).toLocaleString('en-US', {minimumFractionDigits: 2})
odernew Number("1234567").toLocaleString('en-US', {minimumFractionDigits: 2})
stattdessen. Es funktioniert nicht, weil Sie es für eine Zeichenfolge verwenden, nicht für eine Zahl.⚠ Beachten Sie, dass Javascript einen maximalen ganzzahligen Wert von 9007199254740991 hat
toLocaleString :
NumberFormat ( Safari wird nicht unterstützt):
Nach dem, was ich überprüft habe (zumindest Firefox), sind beide in Bezug auf die Leistung mehr oder weniger gleich.
quelle
toLocaleString
Arbeiten auf Safari, Optionen nichttoLocaleString
Lösung sollte wahrscheinlich auch das gewünschte Gebietsschema enthaltentoLocaleString("en")
, da das englische Muster Kommas verwendet. WenntoLocaleString()
jedoch in Frankreich ein Indikator ohne Gebietsschema ausgeführt wird, werden anstelle von Kommas Punkte angezeigt, da auf diese Weise Tausende lokal getrennt werden.Ich schlage vor, das number_format () von phpjs.org zu verwenden.
UPDATE 13.02.14
Die Leute haben berichtet, dass dies nicht wie erwartet funktioniert, also habe ich eine JS-Geige gemacht , die automatisierte Tests enthält.
Update 26/11/2017
Hier ist diese Geige als Stack-Snippet mit leicht modifizierter Ausgabe:
quelle
Dies ist eine Variation der Antwort von @ mikez302, wurde jedoch geändert, um Zahlen mit Dezimalstellen zu unterstützen (gemäß @ neu-rahs Feedback, dass numberWithCommas (12345.6789) -> "12.345,6,789" anstelle von "12.345.6789"
quelle
quelle
Regulären Ausdruck verwenden
Verwenden von toLocaleString ()
ref MDN: Number.prototype.toLocaleString ()
Verwenden von Intl.NumberFormat ()
ref Intl.NumberFormat
DEMO HIER
Performance
http://jsben.ch/sifRd
quelle
Intl.NumberFormat
Native JS-Funktion. Unterstützt von IE11, Edge, den neuesten Versionen von Safari, Chrome, Firefox, Opera, Safari für iOS und Chrome für Android.
quelle
Vielen Dank an alle für ihre Antworten. Ich habe einige der Antworten zusammengestellt, um eine "Einheitslösung" zu schaffen.
Der erste Schnipsel fügt eine Funktion hinzu , dass ahmt PHP ‚s
number_format()
an die Nummer Prototyp. Wenn ich eine Zahl formatiere, möchte ich normalerweise Dezimalstellen, damit die Funktion die Anzahl der anzuzeigenden Dezimalstellen berücksichtigt. Einige Länder verwenden Kommas als Dezimalzahl und Dezimalstellen als Tausendertrennzeichen, sodass diese Funktion die Funktion ermöglicht, diese Trennzeichen festzulegen.Sie würden dies wie folgt verwenden:
Ich stellte fest, dass ich die Zahl für mathematische Operationen oft zurückbekommen musste, aber parseFloat konvertiert 5.000 in 5 und nimmt einfach die erste Folge von ganzzahligen Werten. Also habe ich meine eigene Float-Konvertierungsfunktion erstellt und sie dem String-Prototyp hinzugefügt.
Jetzt können Sie beide Funktionen wie folgt verwenden:
quelle
var parts = this.toFixed(decimals).toString().split('.');
var dec_point
. Vielen Dank für den Hinweis.Ich bin ziemlich beeindruckt von der Anzahl der Antworten, die diese Frage hat. Ich mag die Antwort von uKolka :
Leider funktioniert es in einigen Regionen wie Spanisch nicht wie erwartet (IMHO) für Zahlen unter 10.000:
Gibt
1000
und nicht1.000
.Siehe toLocaleString funktioniert nicht in allen Browsern mit Zahlen unter 10000 mit , erfahren Sie, warum.
Also musste ich die Antwort von Elias Zamaria verwenden , um das richtige Tausendertrennzeichen auszuwählen :
Dieser funktioniert gut als Einzeiler für beide Gebietsschemas, die
,
oder.
als Tausendertrennzeichen verwenden, und beginnt in allen Fällen mit der Arbeit ab 1.000.Gibt
1.000
mit einem spanischen Gebietsschema Kontext.Wenn Sie die Art und Weise, wie eine Zahl formatiert wird, absolut kontrollieren möchten, können Sie auch Folgendes versuchen:
Gibt
1,234.57
.Dieser benötigt keinen regulären Ausdruck. Dazu wird zuerst die Zahl auf die gewünschte Anzahl von Dezimalstellen eingestellt
toFixed
und dann,.
falls vorhanden, um den Dezimalpunkt geteilt . Die linke Seite wird dann in eine Anordnung von Ziffern umgewandelt, die umgekehrt wird. Dann wird von Anfang an alle drei Ziffern ein Tausendertrennzeichen hinzugefügt und das Ergebnis erneut umgekehrt. Das Endergebnis ist die Vereinigung der beiden Teile. Das Vorzeichen der eingegebenen Nummer wird mit entferntMath.abs
zuerst und dann bei Bedarf zurückgesetzt.Es ist kein Einzeiler, aber nicht viel länger und lässt sich leicht in eine Funktion verwandeln. Zur Verdeutlichung wurden Variablen hinzugefügt, die jedoch durch ihre gewünschten Werte ersetzt werden können, wenn dies im Voraus bekannt ist. Sie können die Ausdrücke verwenden
toLocaleString
, mit denen Sie die richtigen Zeichen für den Dezimalpunkt und das Tausendertrennzeichen für das aktuelle Gebietsschema ermitteln können (denken Sie daran, dass für diese ein moderneres Javascript erforderlich ist.)quelle
Ich denke, dies ist der kürzeste reguläre Ausdruck, der dies tut:
Ich habe ein paar Nummern überprüft und es hat funktioniert.
quelle
Number.prototype.toLocaleString()
wäre fantastisch gewesen, wenn es von allen Browsern (Safari) nativ bereitgestellt worden wäre .Ich überprüfte alle anderen Antworten, aber niemand schien sie zu füllen. Hier ist ein Punkt dazu, der eigentlich eine Kombination der ersten beiden Antworten ist; Wenn es
toLocaleString
funktioniert, wird es verwendet, wenn es nicht funktioniert, wird eine benutzerdefinierte Funktion verwendet.quelle
0.12345
wird ausgegeben0.12,345
. Eine gute Implementierung dafür finden Sie in der underscore.stringvalue > 1000
wenn Sie eine if-Bedingung festlegen, die diesen Fall behebt. Dies war jedoch ein Problem, und natürlich können besser getestete Versionen an anderer Stelle gefunden werden, danke für den Hinweis.value > 1000
, da es für jede Zahl und mehr als 3 Dezimalstellen gleich wäre. zB1000.12345
kehrt zurück1,000.12,345
. Ihre Antwort ist großartig und auf dem richtigen Weg, aber einfach nicht vollständig. Ich habe nur versucht, auf andere Personen hinzuweisen, die möglicherweise über Ihre Antwort stolpern, und sie einfach zu kopieren / pasta, ohne sie mit anderen Eingabedaten zu testen.Das Tausendertrennzeichen kann international über das Browserobjekt eingefügt
Intl
werden:Weitere Informationen finden Sie im MDN-Artikel zu NumberFormat . Sie können das Verhalten des Gebietsschemas oder die Standardeinstellung des Benutzers festlegen. Dies ist etwas narrensicherer, da lokale Unterschiede berücksichtigt werden. Viele Länder verwenden Punkte, um Ziffern zu trennen, während ein Komma die Dezimalstellen kennzeichnet.
Intl.NumberFormat ist noch nicht in allen Browsern verfügbar, funktioniert jedoch in den neuesten Versionen von Chrome, Opera und IE. Die nächste Version von Firefox sollte dies unterstützen. Webkit scheint keinen Zeitplan für die Implementierung zu haben.
quelle
Sie können entweder dieses Verfahren verwenden, um Ihre benötigte Währung zu formatieren.
Für weitere Informationen können Sie auf diesen Link zugreifen.
https://www.justinmccandless.com/post/formatting-currency-in-javascript/
quelle
Wenn Sie sich mit Währungswerten beschäftigen und viel formatieren, kann es sinnvoll sein, eine winzige Buchhaltung.js hinzuzufügen, die viele Randfälle und Lokalisierungen behandelt:
quelle
Der folgende Code verwendet den Char-Scan, daher gibt es keinen regulären Ausdruck.
Es zeigt vielversprechende Leistung: http://jsperf.com/number-formatting-with-commas/5
2015.4.26: Kleinere Korrektur zur Behebung des Problems, wenn num <0 ist. Siehe https://jsfiddle.net/runsun/p5tqqvs3/
quelle
commafy(-123456)
damit gibt-,123,456
Hier ist eine einfache Funktion, die Kommas für tausend Trennzeichen einfügt. Es verwendet Array-Funktionen anstelle eines RegEx.
CodeSandbox-Link mit Beispielen: https://codesandbox.io/s/p38k63w0vq
quelle
Verwenden Sie diesen Code, um das Währungsformat für Indien zu verarbeiten. Der Ländercode kann geändert werden, um andere Landeswährungen zu verarbeiten.
Ausgabe:
quelle
Sie können auch den Intl.NumberFormat- Konstruktor verwenden. Hier erfahren Sie, wie Sie dies tun können.
quelle
Ich habe diesen geschrieben, bevor ich über diesen Beitrag gestolpert bin. Kein regulärer Ausdruck und Sie können den Code tatsächlich verstehen.
quelle
BEARBEITEN: Die Funktion funktioniert nur mit positiver Zahl. Zum Beispiel:
Ausgabe: "123,123,231,232"
Aber um die obige Frage zu beantworten,
toLocaleString()
löst die Methode nur das Problem.Ausgabe: "123,123,231,232"
Jubeln!
quelle
Meine Antwort ist die einzige Antwort, die jQuery vollständig durch eine viel sinnvollere Alternative ersetzt:
Diese Lösung fügt nicht nur Kommas hinzu, sondern rundet auch auf den nächsten Cent, falls Sie einen Betrag
$(1000.9999)
eingeben, als würden Sie 1.001,00 USD erhalten. Darüber hinaus kann der von Ihnen eingegebene Wert sicher eine Zahl oder eine Zeichenfolge sein. es spielt keine Rolle.Wenn Sie mit Geld zu tun haben, aber kein führendes Dollarzeichen auf dem Betrag angezeigt werden möchten, können Sie auch diese Funktion hinzufügen, die die vorherige Funktion verwendet, jedoch Folgendes entfernt
$
:Wenn Sie nicht mit Geld zu tun haben und unterschiedliche Anforderungen an die Dezimalformatierung haben, finden Sie hier eine vielseitigere Funktion:
Übrigens ist die Tatsache, dass dieser Code in einer alten Version von Internet Explorer nicht funktioniert, völlig beabsichtigt. Ich versuche, den IE jederzeit zu unterbrechen, wenn ich feststellen kann, dass er keine modernen Standards unterstützt.
Bitte denken Sie daran, dass übermäßiges Lob im Kommentarbereich nicht zum Thema gehört. Duschen Sie mich stattdessen einfach mit Up-Votes.
quelle
Für mich ist die beste Antwort die Verwendung von toLocaleString, wie einige Mitglieder sagten. Wenn Sie das Symbol '$' einfügen möchten, fügen Sie einfach Sprach- und Typoptionen hinzu. Hier ist ein Beispiel, um eine Zahl in mexikanische Pesos zu formatieren
Abkürzung
quelle
Lassen Sie mich versuchen zu verbessern uKolka ‚s Antwort und vielleicht anderen helfen speichern einige Zeit.
Verwenden Sie Numeral.js .
Sie sollten Number.prototype.toLocaleString () nur verwenden, wenn die Browserkompatibilität kein Problem darstellt.
quelle
Ein alternativer Weg, der Dezimalstellen, verschiedene Trennzeichen und Negative unterstützt.
Einige Korrekturen von @Jignesh Sanghani, vergessen Sie nicht, seinen Kommentar zu verbessern.
quelle
fn.substr(0, i)
ersetzen durchn.substr(0, i)
und auchnumber.toFixed(dp).split('.')[1]
ersetzen durchparseFloat(number).toFixed(dp).split('.')[1]
. denn wenn ich direkt benutze, gibt es mir einen Fehler. Bitte aktualisieren Sie Ihren CodeIch denke, diese Funktion wird sich um alle Probleme kümmern, die mit diesem Problem zusammenhängen.
quelle
Nur für zukünftige Googler (oder nicht unbedingt "Googler"):
Alle oben genannten Lösungen sind wunderbar, RegExp ist jedoch in einer solchen Situation möglicherweise eine schrecklich schlechte Sache.
Also, ja, Sie könnten einige der vorgeschlagenen Optionen verwenden oder sogar etwas Primitives und Nützliches schreiben, wie:
Der hier verwendete reguläre Ausdruck ist ziemlich einfach und die Schleife wird genau so oft ausgeführt, bis die Aufgabe erledigt ist.
Und Sie könnten es viel besser optimieren, "DRYify" -Code und so weiter.
Noch,
(in den meisten Situationen) wäre eine weitaus bessere Wahl.
Der Punkt liegt nicht in der Ausführungsgeschwindigkeit oder in der Cross-Browser-Kompatibilität.
In Situationen, in denen Sie dem Benutzer die resultierende Nummer anzeigen möchten, können Sie mit der Methode .toLocaleString () mit dem Benutzer Ihrer Website oder App (unabhängig von seiner Sprache) dieselbe Sprache sprechen.
Diese Methode gemäß der ECMAScript-Dokumentation wurde 1999 eingeführt, und ich glaube, der Grund dafür war die Hoffnung, dass das Internet irgendwann Menschen auf der ganzen Welt verbinden wird. Daher wurden einige "Internalisierungs" -Tools benötigt.
Heutzutage verbindet das Internet uns alle. Daher ist es wichtig, sich daran zu erinnern, dass die Welt viel komplexer ist, als wir es uns vorstellen können, und dass (/ fast) wir alle hier im Internet sind.
Angesichts der Vielfalt der Menschen ist es offensichtlich unmöglich, eine perfekte UX für alle zu garantieren, da wir verschiedene Sprachen sprechen, verschiedene Dinge schätzen usw. Und genau aus diesem Grund ist es noch wichtiger, zu versuchen, die Dinge so weit wie möglich zu lokalisieren .
Wenn man bedenkt, dass es einige spezielle Standards für die Darstellung von Datum, Uhrzeit, Zahlen usw. gibt und dass wir ein Tool haben, um diese Dinge in dem vom Endbenutzer bevorzugten Format anzuzeigen, ist dies nicht so selten und fast unverantwortlich, dies nicht zu tun Verwenden Sie dieses Tool (insbesondere in Situationen, in denen wir diese Daten dem Benutzer anzeigen möchten)?
Für mich klingt die Verwendung von RegExp anstelle von .toLocaleString () in einer solchen Situation ein bisschen so, als würde man eine Uhr-App mit JavaScript erstellen und so hart codieren, dass nur die Prager Zeit angezeigt wird (was für ziemlich nutzlos wäre Menschen, die nicht in Prag leben), obwohl das Standardverhalten von
ist es, die Daten gemäß der Uhr des Endbenutzers zurückzugeben.
quelle
Meine " wahre " Lösung nur für reguläre Ausdrücke für diejenigen, die Einzeiler lieben
Siehst du diese begeisterten Spieler oben? Vielleicht können Sie daraus Golf spielen. Hier ist mein Schlaganfall.
Verwendet einen
DÜNNEN RAUM (U + 2009) für ein Tausendertrennzeichen, wie es das Internationale Einheitensystem in der achten Ausgabe (2006) seiner Veröffentlichung „ SI-Broschüre: Das Internationale Einheitensystem (SI) “ (siehe §5.3 ) getan hat .4.). Die neunte Ausgabe (2019) schlägt vor, ein Leerzeichen dafür zu verwenden (siehe §5.4.4.). Sie können alles verwenden, was Sie möchten, einschließlich eines Kommas.
Sehen.
Wie funktioniert es?
Für einen ganzzahligen Teil
.replace(……, " I ")
Setze "Ich"/……/g
bei jedem von\B
das dazwischenliegende von zwei benachbarten Ziffern(?=……)
POSITIVE LOOKAHEAD, deren rechter Teil ist(\d{3})+
ein oder mehrere dreistellige Blöcke\b
gefolgt von einer nichtstelligen Zahl, z. B. einem Punkt, dem Ende der Zeichenfolge usw.(?<!……)
NEGATIVER BLICK HINTER denen, deren linker Teil\.\d+
ist ein Punkt, gefolgt von Ziffern ("hat ein Dezimaltrennzeichen").Für einen Dezimalteil
.replace(……, " F ")
Setzen Sie "F"/……/g
bei jedem von\B
das dazwischenliegende von zwei benachbarten Ziffern(?<=……)
POSITIVER BLICK HINTER dessen linkem Teil ist\.
ein Dezimaltrennzeichen(\d{3})+
gefolgt von einem oder mehreren dreistelligen Stücken.Zeichenklassen und Grenzen
Browser-Kompatibilität
quelle
Ich habe der Lösung von Aki143S tofixed hinzugefügt . Diese Lösung verwendet Punkte für Tausende Trennzeichen und Komma für die Genauigkeit.
Beispiele;
quelle
Viele gute Antworten schon. Hier ist noch eine, nur zum Spaß:
Einige Beispiele:
quelle
format(-123456)
damit gibt-,123,456