Wie formatiere ich eine Zahl mit Kommas als Tausendertrennzeichen?

Lesezeit: 8 Minuten

Benutzeravatar von Elias Zamaria
Elias Zamaria

Ich versuche, eine Ganzzahl in JavaScript mit Kommas als Tausendertrennzeichen zu drucken. Zum Beispiel möchte ich die Nummer 1234567 als “1.234.567” anzeigen. Wie würde ich vorgehen?

So mache ich es:

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 funktionieren würde, aber das ist nicht notwendig. Es muss nicht gebietsschemaspezifisch sein, um zwischen Punkten und Kommas zu entscheiden.

  • Das ist erwähnenswert Number.prototype.toLocaleString still funktioniert nicht in Safari, in 2016. Anstatt die Zahl tatsächlich zu formatieren, wird sie nur zurückgegeben, ohne dass ein Fehler ausgelöst wird. Als Ergebnis davon habe ich heute den größten Facepalm … #goodworkApple

    – aendra

    10. März 2016 um 11:21 Uhr


  • toLocaleString ist inkonsistent und sollte nicht verwendet werden. Zum Beispiel – auf Firefox wird dies 1.234 zurückgeben, aber auf IE werden Dezimalstellen hinzugefügt: 1.234,00

    – Bort

    21. September 2017 um 16:29 Uhr

Benutzeravatar von uKolka
uKolka

Ich bin überrascht, dass niemand erwähnt hat Number.prototype.toLocaleString. Es ist in JavaScript 1.5 (das 1999 eingeführt wurde) implementiert, sodass es grundsätzlich von allen gängigen Browsern unterstützt wird.

var n = 34523453.345;
console.log(n.toLocaleString());    // "34,523,453.345"

Es funktioniert auch in Node.js ab v0.12 über die Einbeziehung von Intl

Wenn Sie etwas anderes wollen, Ziffer.js könnte interessant sein.

  • @csigrist Gute Punkte, aber es ist nicht so schlimm, wie es scheint. Die Geschwindigkeit ist browserabhängig. In FF oder Opera schneidet es gut ab. Ich sauge in Chrome aber. Zu den Nullen: var number = 123456.000; number.toLocaleString('en-US', {minimumFractionDigits: 2}); "123,456.00" Diese Optionen funktionieren jedoch nicht in FF oder Safari.

    – uKolka

    23. Juli 2013 um 15:50 Uhr

  • Der Leistungsunterschied kann je nach Kontext ein Problem sein oder auch nicht. Wenn es für eine riesige Tabelle mit 1000 Ergebnissen verwendet wird, ist es wichtiger, aber wenn es nur für einen einzelnen Wert verwendet wird, ist der Unterschied vernachlässigbar. Aber der Vorteil ist, dass es ortsabhängig ist, sodass jemand in Europa es sehen würde 34.523.453.345 oder 34 523 453.345. Dies wäre auf einer Website mit Besuchern aus vielen Ländern wichtiger.

    – T Nguyen

    12. Februar 2014 um 21:06 Uhr

  • Genial. Endlich eine Antwort mit nativer Funktion. Und außerdem wird dieser in verschiedenen Ländern mit unterschiedlichen Trennzeichen richtig angezeigt (in der Tschechischen Republik schreiben wir X XXX XXX,YYY).

    – Tomáš Zato

    7. Juli 2014 um 17:02 Uhr

  • Update für Googler: toLocaleString funktioniert in Node.js ab v0.12 über die Aufnahme von Intl.

    – Srobinson

    2. November 2015 um 16:59 Uhr

  • @MSC sollten Sie versuchen parseInt("1234567", 10).toLocaleString('en-US', {minimumFractionDigits: 2}) oder new Number("1234567").toLocaleString('en-US', {minimumFractionDigits: 2}) stattdessen. Es funktioniert nicht, weil Sie es für eine Zeichenfolge verwenden, nicht für eine Zahl.

    – uKolka

    22. Februar 2016 um 16:29 Uhr

  • Die Browserunterstützung wird immer am Ende jeder MDN-Seite erwähnt, auf die ich verlinkt habe.

    – vsync

    19. März 2016 um 16:38 Uhr

  • Basic toLocaleString funktioniert auf Safari, Optionen nicht

    – dandavis

    21. Juni 2016 um 9:16 Uhr

  • Wie andere angemerkt haben, number.toLocaleString funktioniert nicht für alle Browser und auch nicht in PhantomJS. Number.toLocaleString() wendet keine geeignete Formatierung an

    – Majatron

    9. September 2016 um 20:37 Uhr


  • das toLocaleString Die Lösung sollte wahrscheinlich auch das gewünschte Gebietsschema enthalten, also toLocaleString("en"), weil das englische Muster Kommas verwendet. jedoch, wenn toLocaleString() ohne Gebietsschemaindikator in Frankreich ausgeführt wird, ergibt es Punkte anstelle von Kommas, da dies verwendet wird, um Tausende lokal zu trennen.

    – Mike „Pomax“ Kamermans

    17. November 2016 um 18:05 Uhr

  • minimumFractionDigits: 2 kann auch hinzugefügt werden, um eine feste Anzahl von Dezimalstellen sicherzustellen stackoverflow.com/questions/31581011/…

    – SharpC

    17. Januar 2018 um 14:35 Uhr

Benutzeravatar von Kerry Jones
Kerry Jones

Ich schlage vor, phpjs.org zu verwenden Zahlenformat()

function number_format(number, decimals, dec_point, thousands_sep) {
    var n = !isFinite(+number) ? 0 : +number, 
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
        toFixedFix = function (n, prec) {
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            var k = Math.pow(10, prec);
            return Math.round(n * k) / k;
        },
        s = (prec ? toFixedFix(n, prec) : Math.round(n)).toString().split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}

UPDATE 13.02.14

Leute haben berichtet, dass dies nicht wie erwartet funktioniert, also habe ich a JS Geige Dazu gehören automatisierte Tests.

Aktualisierung 26.11.2017

Hier ist diese Geige als Stack Snippet mit leicht modifizierter Ausgabe:

function number_format(number, decimals, dec_point, thousands_sep) {
    var n = !isFinite(+number) ? 0 : +number, 
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
        toFixedFix = function (n, prec) {
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            var k = Math.pow(10, prec);
            return Math.round(n * k) / k;
        },
        s = (prec ? toFixedFix(n, prec) : Math.round(n)).toString().split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}

var exampleNumber = 1;
function test(expected, number, decimals, dec_point, thousands_sep)
{
    var actual = number_format(number, decimals, dec_point, thousands_sep);
    console.log(
        'Test case ' + exampleNumber + ': ' +
        '(decimals: ' + (typeof decimals === 'undefined' ? '(default)' : decimals) +
        ', dec_point: "' + (typeof dec_point === 'undefined' ? '(default)' : dec_point) + '"' +
        ', thousands_sep: "' + (typeof thousands_sep === 'undefined' ? '(default)' : thousands_sep) + '")'
    );
    console.log('  => ' + (actual === expected ? 'Passed' : 'FAILED') + ', got "' + actual + '", expected "' + expected + '".');
    exampleNumber++;
}

test('1,235',    1234.56);
test('1 234,56', 1234.56, 2, ',', ' ');
test('1234.57',  1234.5678, 2, '.', '');
test('67,00',    67, 2, ',', '.');
test('1,000',    1000);
test('67.31',    67.311, 2);
test('1,000.6',  1000.55, 1);
test('67.000,00000', 67000, 5, ',', '.');
test('1',        0.9, 0);
test('1.20',     '1.20', 2);
test('1.2000',   '1.20', 4);
test('1.200',    '1.2000', 3);
.as-console-wrapper {
  max-height: 100% !important;
}

  • @Andrew S – Nur 1 Person hat es notiert. Es funktioniert, ich habe es oft in meinem eigenen Code verwendet. Es ist auch nicht mein Code (noch meine Tests), ich habe auf die Site verwiesen, von der er stammt, die eine bekannte Site ist. Vielleicht haben sie eine aktualisierte Version davon), da der Code, den Sie sich ansehen, 3 Jahre alt ist.

    – Kerry Jones

    19. Juni 2013 um 18:03 Uhr

  • @ernix – Der Operator hat nach JavaScript gefragt, diese Antwort habe ich gegeben ist JavaScript. Dies ist eine JavaScript-Interpretation einer PHP-Funktion.

    – Kerry Jones

    23. Januar 2014 um 6:04 Uhr

  • @ernix – es funktioniert genau wie erwartet mit dem Beispiel, das das OP gegeben hat. Ich habe eine Geige, damit Sie sehen können.

    – Kerry Jones

    13. Februar 2014 um 17:12 Uhr

  • @ernix – Okay, aber der Punkt ist, dass es so ist exakt wonach der OP gefragt hat. Es stammt von einer anderen Site (wird nicht von mir gepflegt, und ich habe dies zuvor angegeben), und wenn es die richtigen Variablen gibt, funktioniert es genau wie angegeben. Wenn Sie glauben, dass es sich um einen Fehler handelt, wenden Sie sich an phpjs.org oder sehen Sie nach, ob es eine aktualisierte Version gibt.

    – Kerry Jones

    13. Februar 2014 um 20:06 Uhr

  • Dies ist perfekt. Ich suchte weiter und fand nur unglaublich aufgeblähte Bibliotheken, in denen ich nicht einmal Tausender und Dezimaltrennzeichen ändern konnte.

    – Hissvard

    17. März 2021 um 9:12 Uhr

Benutzeravatar von user1437663
Benutzer1437663

Dies ist eine Variation der Antwort von @ mikez302, aber modifiziert, um Zahlen mit Dezimalstellen zu unterstützen (laut Feedback von @ neu-rah, dass numberWithCommas (12345.6789) -> “12.345.6.789” anstelle von “12.345.6789”

function numberWithCommas(n) {
    var parts=n.toString().split(".");
    return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
}

  • @Andrew S – Nur 1 Person hat es notiert. Es funktioniert, ich habe es oft in meinem eigenen Code verwendet. Es ist auch nicht mein Code (noch meine Tests), ich habe auf die Site verwiesen, von der er stammt, die eine bekannte Site ist. Vielleicht haben sie eine aktualisierte Version davon), da der Code, den Sie sich ansehen, 3 Jahre alt ist.

    – Kerry Jones

    19. Juni 2013 um 18:03 Uhr

  • @ernix – Der Operator hat nach JavaScript gefragt, diese Antwort habe ich gegeben ist JavaScript. Dies ist eine JavaScript-Interpretation einer PHP-Funktion.

    – Kerry Jones

    23. Januar 2014 um 6:04 Uhr

  • @ernix – es funktioniert genau wie erwartet mit dem Beispiel, das das OP gegeben hat. Ich habe eine Geige, damit Sie sehen können.

    – Kerry Jones

    13. Februar 2014 um 17:12 Uhr

  • @ernix – Okay, aber der Punkt ist, dass es so ist exakt wonach der OP gefragt hat. Es stammt von einer anderen Site (wird nicht von mir gepflegt, und ich habe dies zuvor angegeben), und wenn es die richtigen Variablen gibt, funktioniert es genau wie angegeben. Wenn Sie glauben, dass es sich um einen Fehler handelt, wenden Sie sich an phpjs.org oder sehen Sie nach, ob es eine aktualisierte Version gibt.

    – Kerry Jones

    13. Februar 2014 um 20:06 Uhr

  • Dies ist perfekt. Ich suchte weiter und fand nur unglaublich aufgeblähte Bibliotheken, in denen ich nicht einmal Tausender und Dezimaltrennzeichen ändern konnte.

    – Hissvard

    17. März 2021 um 9:12 Uhr

Benutzeravatar von Tutanchamun
Tutanchamun

function formatNumber (num) {
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

print(formatNumber(2665));      // 2,665
print(formatNumber(102665));    // 102,665
print(formatNumber(111102665)); // 111,102,665

  • Was macht das, was meine Antwort nicht tut? Die Regex sieht etwas anders aus, aber es sieht so aus, als ob sie dasselbe tun sollte.

    – Elias Zamaria

    19. August 2014 um 22:14 Uhr

  • Das ist elegant. Genau das, wonach ich gesucht habe.

    – traditionell

    7. Oktober 2014 um 18:23 Uhr

  • Aus blog.tompawlak.org/number-currency-formatting-javascript? Bekanntes Problem: formatNumber(0.123456) = 0.123.456 Das Fehlen von Lookbehind in JS macht es schwierig, es mit einer eleganten Regex zu beheben.

    – Vlad

    20. Januar 2015 um 2:48 Uhr

  • Dies erlaubt Zeichen wie abcdef usw., die eingeschränkt werden sollten.

    – Debashis

    26. Mai 2016 um 13:09 Uhr

  • 123456789.123456789.toString().replace(/(\d)(?=(\d{3})+\.)/g, ‘$1,’) => 123.456.789.12345679

    – Kenberkeley

    24. Juli 2017 um 10:30 Uhr

1434200cookie-checkWie formatiere ich eine Zahl mit Kommas als Tausendertrennzeichen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy