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.

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:

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function numberWithCommas(x) {
    return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}

function test(x, expect) {
    const result = numberWithCommas(x);
    const pass = result === expect;
    console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`);
    return pass;
}

let failures = 0;
failures += !test(0,        "0");
failures += !test(100,      "100");
failures += !test(1000,     "1,000");
failures += !test(10000,    "10,000");
failures += !test(100000,   "100,000");
failures += !test(1000000,  "1,000,000");
failures += !test(10000000, "10,000,000");
if (failures) {
    console.log(`${failures} test(s) failed`);
} else {
    console.log("All tests passed");
}

.as-console-wrapper {
    max-height: 100% !important;
}

Der Regex verwendet zwei Lookahead-Behauptungen:

• eine positive, um nach einem Punkt in der Zeichenfolge zu suchen, der ein Vielfaches von 3 Ziffern hintereinander enthält,
• eine negative Aussage, um sicherzustellen, dass dieser Punkt nur ein Vielfaches von 3 Ziffern hat. Der Ersetzungsausdruck setzt dort ein Komma.

Wenn Sie es beispielsweise bestehen, stimmt 123456789.01die positive Behauptung mit jedem Punkt links von der 7 überein (da 789es sich um ein Vielfaches von 3 Ziffern, 678ein Vielfaches von 3 Ziffern 567usw. handelt). Die negative Behauptung überprüft, ob das Vielfache von 3 Ziffern keine Ziffern hinter sich hat. 789hat einen Punkt danach, also ist es genau ein Vielfaches von 3 Ziffern, also geht dort ein Komma. 678ist ein Vielfaches von 3 Ziffern, aber es hat ein 9Nachher, so dass diese 3 Ziffern Teil einer Gruppe von 4 sind und ein Komma nicht dorthin geht. Ähnliches gilt für 567. 456789ist 6 Stellen, was ein Vielfaches von 3 ist, also steht davor ein Komma. 345678ist ein Vielfaches von 3, aber es hat ein 9Nachher, 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:

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

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

function test(x, expect) {
    const result = numberWithCommas(x);
    const pass = result === expect;
    console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`);
    return pass;
}

let failures = 0;
failures += !test(0              , "0");
failures += !test(0.123456       , "0.123456");
failures += !test(100            , "100");
failures += !test(100.123456     , "100.123456");
failures += !test(1000           , "1,000");
failures += !test(1000.123456    , "1,000.123456");
failures += !test(10000          , "10,000");
failures += !test(10000.123456   , "10,000.123456");
failures += !test(100000         , "100,000");
failures += !test(100000.123456  , "100,000.123456");
failures += !test(1000000        , "1,000,000");
failures += !test(1000000.123456 , "1,000,000.123456");
failures += !test(10000000       , "10,000,000");
failures += !test(10000000.123456, "10,000,000.123456");
if (failures) {
    console.log(`${failures} test(s) failed`);
} else {
    console.log("All tests passed");
}

.as-console-wrapper {
    max-height: 100% !important;
}

@ tjcrowder wies darauf hin, dass JavaScript nun, da es Lookbehind ( Support-Informationen ) hat, im regulären Ausdruck selbst gelöst werden kann:

function numberWithCommas(x) {
    return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}

function numberWithCommas(x) {
    return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}

function test(x, expect) {
    const result = numberWithCommas(x);
    const pass = result === expect;
    console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`);
    return pass;
}

let failures = 0;
failures += !test(0,               "0");
failures += !test(0.123456,        "0.123456");
failures += !test(100,             "100");
failures += !test(100.123456,      "100.123456");
failures += !test(1000,            "1,000");
failures += !test(1000.123456,     "1,000.123456");
failures += !test(10000,           "10,000");
failures += !test(10000.123456,    "10,000.123456");
failures += !test(100000,          "100,000");
failures += !test(100000.123456,   "100,000.123456");
failures += !test(1000000,         "1,000,000");
failures += !test(1000000.123456,  "1,000,000.123456");
failures += !test(10000000,        "10,000,000");
failures += !test(10000000.123456, "10,000,000.123456");
if (failures) {
    console.log(`${failures} test(s) failed`);
} else {
    console.log("All tests passed");
}

.as-console-wrapper {
    max-height: 100% !important;
}

(?<!\.\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 die splitund join-Lösung ( Vergleich ).

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.

var n = 34523453.345
n.toLocaleString()
"34,523,453.345"

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.

var number = 1234567890; // Example number to be converted

⚠ Beachten Sie, dass Javascript einen maximalen ganzzahligen Wert von 9007199254740991 hat

toLocaleString :

number.toLocaleString(); // "1,234,567,890"

// A more complex example: 
var number2 = 1234.56789; // floating point example
number2.toLocaleString(undefined, {maximumFractionDigits:2}) // "1,234.57"

NumberFormat ( Safari wird nicht unterstützt):

var nf = new Intl.NumberFormat();
nf.format(number); // "1,234,567,890"

Nach dem, was ich überprüft habe (zumindest Firefox), sind beide in Bezug auf die Leistung mehr oder weniger gleich.

Ich schlage vor, das number_format () von phpjs.org zu verwenden.

function number_format(number, decimals, dec_point, thousands_sep) {
    // http://kevin.vanzonneveld.net
    // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +     bugfix by: Michael White (http://getsprink.com)
    // +     bugfix by: Benjamin Lupton
    // +     bugfix by: Allan Jensen (http://www.winternet.no)
    // +    revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +     bugfix by: Howard Yeend
    // +    revised by: Luke Smith (http://lucassmith.name)
    // +     bugfix by: Diogo Resende
    // +     bugfix by: Rival
    // +      input by: Kheang Hok Chin (http://www.distantia.ca/)
    // +   improved by: davook
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Jay Klehr
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Amir Habibi (http://www.residence-mixte.com/)
    // +     bugfix by: Brett Zamir (http://brett-zamir.me)
    // +   improved by: Theriault
    // +   improved by: Drew Noakes
    // *     example 1: number_format(1234.56);
    // *     returns 1: '1,235'
    // *     example 2: number_format(1234.56, 2, ',', ' ');
    // *     returns 2: '1 234,56'
    // *     example 3: number_format(1234.5678, 2, '.', '');
    // *     returns 3: '1234.57'
    // *     example 4: number_format(67, 2, ',', '.');
    // *     returns 4: '67,00'
    // *     example 5: number_format(1000);
    // *     returns 5: '1,000'
    // *     example 6: number_format(67.311, 2);
    // *     returns 6: '67.31'
    // *     example 7: number_format(1000.55, 1);
    // *     returns 7: '1,000.6'
    // *     example 8: number_format(67000, 5, ',', '.');
    // *     returns 8: '67.000,00000'
    // *     example 9: number_format(0.9, 0);
    // *     returns 9: '1'
    // *    example 10: number_format('1.20', 2);
    // *    returns 10: '1.20'
    // *    example 11: number_format('1.20', 4);
    // *    returns 11: '1.2000'
    // *    example 12: number_format('1.2000', 3);
    // *    returns 12: '1.200'
    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

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:

function number_format(number, decimals, dec_point, thousands_sep) {
    // http://kevin.vanzonneveld.net
    // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +     bugfix by: Michael White (http://getsprink.com)
    // +     bugfix by: Benjamin Lupton
    // +     bugfix by: Allan Jensen (http://www.winternet.no)
    // +    revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +     bugfix by: Howard Yeend
    // +    revised by: Luke Smith (http://lucassmith.name)
    // +     bugfix by: Diogo Resende
    // +     bugfix by: Rival
    // +      input by: Kheang Hok Chin (http://www.distantia.ca/)
    // +   improved by: davook
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Jay Klehr
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Amir Habibi (http://www.residence-mixte.com/)
    // +     bugfix by: Brett Zamir (http://brett-zamir.me)
    // +   improved by: Theriault
    // +   improved by: Drew Noakes
    // *     example 1: number_format(1234.56);
    // *     returns 1: '1,235'
    // *     example 2: number_format(1234.56, 2, ',', ' ');
    // *     returns 2: '1 234,56'
    // *     example 3: number_format(1234.5678, 2, '.', '');
    // *     returns 3: '1234.57'
    // *     example 4: number_format(67, 2, ',', '.');
    // *     returns 4: '67,00'
    // *     example 5: number_format(1000);
    // *     returns 5: '1,000'
    // *     example 6: number_format(67.311, 2);
    // *     returns 6: '67.31'
    // *     example 7: number_format(1000.55, 1);
    // *     returns 7: '1,000.6'
    // *     example 8: number_format(67000, 5, ',', '.');
    // *     returns 8: '67.000,00000'
    // *     example 9: number_format(0.9, 0);
    // *     returns 9: '1'
    // *    example 10: number_format('1.20', 2);
    // *    returns 10: '1.20'
    // *    example 11: number_format('1.20', 4);
    // *    returns 11: '1.2000'
    // *    example 12: number_format('1.2000', 3);
    // *    returns 12: '1.200'
    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;
}

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"

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

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

Regulären Ausdruck verwenden

function toCommas(value) {
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
console.log(toCommas(123456789)); // 123,456,789

console.log(toCommas(1234567890)); // 1,234,567,890
console.log(toCommas(1234)); // 1,234

Verwenden von toLocaleString ()

var number = 123456.789;

// request a currency format
console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
// → 123.456,79 €

// the Japanese yen doesn't use a minor unit
console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
// → ￥123,457

// limit to three significant digits
console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
// → 1,23,000

ref MDN: Number.prototype.toLocaleString ()

Verwenden von Intl.NumberFormat ()

var number = 123456.789;

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// expected output: "123.456,79 €"

// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// expected output: "￥123,457"

// limit to three significant digits
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));

// expected output: "1,23,000"

ref Intl.NumberFormat

DEMO HIER

<script type="text/javascript">
  // Using Regular expression
  function toCommas(value) {
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }

  function commas() {
    var num1 = document.myform.number1.value;

    // Using Regular expression
    document.getElementById('result1').value = toCommas(parseInt(num1));
    // Using toLocaleString()

    document.getElementById('result2').value = parseInt(num1).toLocaleString('ja-JP', {
      style: 'currency',
      currency: 'JPY'
    });

    // Using Intl.NumberFormat()
    document.getElementById('result3').value = new Intl.NumberFormat('ja-JP', {
      style: 'currency',
      currency: 'JPY'
    }).format(num1);
  }
</script>
<FORM NAME="myform">
  <INPUT TYPE="text" NAME="number1" VALUE="123456789">
  <br>
  <INPUT TYPE="button" NAME="button" Value="=>" onClick="commas()">
  <br>Using Regular expression
  <br>
  <INPUT TYPE="text" ID="result1" NAME="result1" VALUE="">
  <br>Using toLocaleString()
  <br>
  <INPUT TYPE="text" ID="result2" NAME="result2" VALUE="">
  <br>Using Intl.NumberFormat()
  <br>
  <INPUT TYPE="text" ID="result3" NAME="result3" VALUE="">

</FORM>

Performance

http://jsben.ch/sifRd

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.

var number = 3500;

console.log(new Intl.NumberFormat().format(number));
// → '3,500' if in US English locale

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.

Number.prototype.numberFormat = function(decimals, dec_point, thousands_sep) {
    dec_point = typeof dec_point !== 'undefined' ? dec_point : '.';
    thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ',';

    var parts = this.toFixed(decimals).split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousands_sep);

    return parts.join(dec_point);
}

Sie würden dies wie folgt verwenden:

var foo = 5000;
console.log(foo.numberFormat(2)); // us format: 5,000.00
console.log(foo.numberFormat(2, ',', '.')); // european format: 5.000,00

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.

String.prototype.getFloat = function(dec_point, thousands_sep) {
    dec_point = typeof dec_point !== 'undefined' ? dec_point : '.';
    thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ',';

    var parts = this.split(dec_point);
    var re = new RegExp("[" + thousands_sep + "]");
    parts[0] = parts[0].replace(re, '');

    return parseFloat(parts.join(dec_point));
}

Jetzt können Sie beide Funktionen wie folgt verwenden:

var foo = 5000;
var fooString = foo.numberFormat(2); // The string 5,000.00
var fooFloat = fooString.getFloat(); // The number 5000;

console.log((fooString.getFloat() + 1).numberFormat(2)); // The string 5,001.00

Ich bin ziemlich beeindruckt von der Anzahl der Antworten, die diese Frage hat. Ich mag die Antwort von uKolka :

n.toLocaleString()

Leider funktioniert es in einigen Regionen wie Spanisch nicht wie erwartet (IMHO) für Zahlen unter 10.000:

Number(1000).toLocaleString('ES-es')

Gibt 1000und 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 :

n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, Number(10000).toLocaleString().substring(2, 3))

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.

Number(1000).toString().replace(/\B(?=(\d{3})+(?!\d))/g, Number(10000).toLocaleString().substring(2, 3))

Gibt 1.000mit 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:

let number   = 1234.567
let decimals = 2
let decpoint = '.' // Or Number(0.1).toLocaleString().substring(1, 2)
let thousand = ',' // Or Number(10000).toLocaleString().substring(2, 3)

let n = Math.abs(number).toFixed(decimals).split('.')
n[0] = n[0].split('').reverse().map((c, i, a) =>
  i > 0 && i < a.length && i % 3 == 0 ? c + thousand : c
).reverse().join('')
let final = (Math.sign(number) < 0 ? '-' : '') + n.join(decpoint)

console.log(final)

Gibt 1,234.57.

Dieser benötigt keinen regulären Ausdruck. Dazu wird zuerst die Zahl auf die gewünschte Anzahl von Dezimalstellen eingestellt toFixedund 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.)

Ich denke, dies ist der kürzeste reguläre Ausdruck, der dies tut:

/\B(?=(\d{3})+\b)/g

"123456".replace(/\B(?=(\d{3})+\b)/g, ",")

Ich habe ein paar Nummern überprüft und es hat funktioniert.

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 toLocaleStringfunktioniert, wird es verwendet, wenn es nicht funktioniert, wird eine benutzerdefinierte Funktion verwendet.

var putThousandsSeparators;

putThousandsSeparators = function(value, sep) {
  if (sep == null) {
    sep = ',';
  }
  // check if it needs formatting
  if (value.toString() === value.toLocaleString()) {
    // split decimals
    var parts = value.toString().split('.')
    // format whole numbers
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, sep);
    // put them back together
    value = parts[1] ? parts.join('.') : parts[0];
  } else {
    value = value.toLocaleString();
  }
  return value;
};

alert(putThousandsSeparators(1234567.890));

Das Tausendertrennzeichen kann international über das Browserobjekt eingefügt Intlwerden:

Intl.NumberFormat().format(1234);
// returns "1,234" if the user's locale is en_US, for example

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.

Sie können entweder dieses Verfahren verwenden, um Ihre benötigte Währung zu formatieren.

var nf = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
nf.format(123456.789); // ‘$123,456.79’

Für weitere Informationen können Sie auf diesen Link zugreifen.

https://www.justinmccandless.com/post/formatting-currency-in-javascript/

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:

// Default usage:
accounting.formatMoney(12345678); // $12,345,678.00

// European formatting (custom symbol and separators), could also use options object as second param:
accounting.formatMoney(4999.99, "€", 2, ".", ","); // €4.999,99

// Negative values are formatted nicely, too:
accounting.formatMoney(-500000, "£ ", 0); // £ -500,000

// Simple `format` string allows control of symbol position [%v = value, %s = symbol]:
accounting.formatMoney(5318008, { symbol: "GBP",  format: "%v %s" }); // 5,318,008.00 GBP

Der folgende Code verwendet den Char-Scan, daher gibt es keinen regulären Ausdruck.

function commafy( num){
  var parts = (''+(num<0?-num:num)).split("."), s=parts[0], L, i=L= s.length, o='';
  while(i--){ o = (i===0?'':((L-i)%3?'':',')) 
                  +s.charAt(i) +o }
  return (num<0?'-':'') + o + (parts[1] ? '.' + parts[1] : ''); 
}

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/

Hier ist eine einfache Funktion, die Kommas für tausend Trennzeichen einfügt. Es verwendet Array-Funktionen anstelle eines RegEx.

/**
 * Format a number as a string with commas separating the thousands.
 * @param num - The number to be formatted (e.g. 10000)
 * @return A string representing the formatted number (e.g. "10,000")
 */
var formatNumber = function(num) {
    var array = num.toString().split('');
    var index = -3;
    while (array.length + index > 0) {
        array.splice(index, 0, ',');
        // Decrement by 4 since we just added another unit to the array.
        index -= 4;
    }
    return array.join('');
};

CodeSandbox-Link mit Beispielen: https://codesandbox.io/s/p38k63w0vq

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.

let amount =350256.95
var formatter = new Intl.NumberFormat('en-IN', {
  minimumFractionDigits: 2,
});

// Use it.

formatter.format(amount);

Ausgabe:

3,50,256.95

Sie können auch den Intl.NumberFormat- Konstruktor verwenden. Hier erfahren Sie, wie Sie dies tun können.

 resultNumber = new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(yourNumber); 

Ich habe diesen geschrieben, bevor ich über diesen Beitrag gestolpert bin. Kein regulärer Ausdruck und Sie können den Code tatsächlich verstehen.

$(function(){
  
  function insertCommas(s) {

    // get stuff before the dot
    var d = s.indexOf('.');
    var s2 = d === -1 ? s : s.slice(0, d);

    // insert commas every 3 digits from the right
    for (var i = s2.length - 3; i > 0; i -= 3)
      s2 = s2.slice(0, i) + ',' + s2.slice(i);

    // append fractional part
    if (d !== -1)
      s2 += s.slice(d);

    return s2;

  }
  
  
  $('#theDudeAbides').text( insertCommas('1234567.89012' ) );
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="theDudeAbides"></div>

var formatNumber = function (number) {
  var splitNum;
  number = Math.abs(number);
  number = number.toFixed(2);
  splitNum = number.split('.');
  splitNum[0] = splitNum[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return splitNum.join(".");
}

BEARBEITEN: Die Funktion funktioniert nur mit positiver Zahl. Zum Beispiel:

var number = -123123231232;
formatNumber(number)

Ausgabe: "123,123,231,232"

Aber um die obige Frage zu beantworten, toLocaleString()löst die Methode nur das Problem.

var number = 123123231232;
    number.toLocaleString()

Ausgabe: "123,123,231,232"

Jubeln!

Meine Antwort ist die einzige Antwort, die jQuery vollständig durch eine viel sinnvollere Alternative ersetzt:

function $(dollarAmount)
{
    const locale = 'en-US';
    const options = { style: 'currency', currency: 'USD' };
    return Intl.NumberFormat(locale, options).format(dollarAmount);
}

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 $:

function no$(dollarAmount)
{
    return $(dollarAmount).replace('$','');
}

Wenn Sie nicht mit Geld zu tun haben und unterschiedliche Anforderungen an die Dezimalformatierung haben, finden Sie hier eine vielseitigere Funktion:

function addCommas(number, minDecimalPlaces = 0, maxDecimalPlaces = Math.max(3,minDecimalPlaces))
{
    const options = {};
    options.maximumFractionDigits = maxDecimalPlaces;
    options.minimumFractionDigits = minDecimalPlaces;
    return Intl.NumberFormat('en-US',options).format(number);
}

Ü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.

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

var n = 1234567.22
alert(n.toLocaleString("es-MX",{style:"currency", currency:"MXN"}))

Abkürzung

1234567.22.toLocaleString("es-MX",{style:"currency", currency:"MXN"})

Lassen Sie mich versuchen zu verbessern uKolka ‚s Antwort und vielleicht anderen helfen speichern einige Zeit.

Verwenden Sie Numeral.js .

document.body.textContent = numeral(1234567).format('0,0');

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>

Sie sollten Number.prototype.toLocaleString () nur verwenden, wenn die Browserkompatibilität kein Problem darstellt.

Ein alternativer Weg, der Dezimalstellen, verschiedene Trennzeichen und Negative unterstützt.

var number_format = function(number, decimal_pos, decimal_sep, thousand_sep) {
    var ts      = ( thousand_sep == null ? ',' : thousand_sep )
        , ds    = ( decimal_sep  == null ? '.' : decimal_sep )
        , dp    = ( decimal_pos  == null ? 2   : decimal_pos )

        , n     = Math.floor(Math.abs(number)).toString()

        , i     = n.length % 3 
        , f     = ((number < 0) ? '-' : '') + n.substr(0, i)
    ;

    for(;i<n.length;i+=3) {
        if(i!=0) f+=ts;
        f+=n.substr(i,3);
    }

    if(dp > 0) 
        f += ds + parseFloat(number).toFixed(dp).split('.')[1]

    return f;
}

Einige Korrekturen von @Jignesh Sanghani, vergessen Sie nicht, seinen Kommentar zu verbessern.

Ich denke, diese Funktion wird sich um alle Probleme kümmern, die mit diesem Problem zusammenhängen.

function commaFormat(inputString) {
    inputString = inputString.toString();
    var decimalPart = "";
    if (inputString.indexOf('.') != -1) {
        //alert("decimal number");
        inputString = inputString.split(".");
        decimalPart = "." + inputString[1];
        inputString = inputString[0];
        //alert(inputString);
        //alert(decimalPart);

    }
    var outputString = "";
    var count = 0;
    for (var i = inputString.length - 1; i >= 0 && inputString.charAt(i) != '-'; i--) {
        //alert("inside for" + inputString.charAt(i) + "and count=" + count + " and outputString=" + outputString);
        if (count == 3) {
            outputString += ",";
            count = 0;
        }
        outputString += inputString.charAt(i);
        count++;
    }
    if (inputString.charAt(0) == '-') {
        outputString += "-";
    }
    //alert(outputString);
    //alert(outputString.split("").reverse().join(""));
    return outputString.split("").reverse().join("") + decimalPart;
}

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:

const strToNum = str => {

   //Find 1-3 digits followed by exactly 3 digits & a comma or end of string
   let regx = /(\d{1,3})(\d{3}(?:,|$))/;
   let currStr;

   do {
       currStr = (currStr || str.split(`.`)[0])
           .replace( regx, `$1,$2`)
   } while (currStr.match(regx)) //Stop when there's no match & null's returned

   return ( str.split(`.`)[1] ) ?
           currStr.concat(`.`, str.split(`.`)[1]) :
           currStr;

};

strToNum(`123`) // => 123
strToNum(`123456`) // => 123,456
strToNum(`-1234567.0987`) // => -1,234,567.0987

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,

(-1234567.0987).toLocaleString();

(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

new Date();

ist es, die Daten gemäß der Uhr des Endbenutzers zurückzugeben.

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.

n => `${n}`.replace(/(?<!\.\d+)\B(?=(\d{3})+\b)/g, " ").replace(/(?<=\.(\d{3})+)\B/g, " ")

_{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.

const integer_part_only = n => `${n}`.replace(/(?<!\.\d+)\B(?=(\d{3})+\b)/g, " I ");
const fractional_part_only = n => `${n}`.replace(/(?<=\.(\d{3})+)\B/g, " F ");
const both = n => fractional_part_only(integer_part_only(n));

function demo(number) { // I’m using Chrome 74.
	console.log(`${number}
		→ "${integer_part_only(number)}" (integer part only)
		→ "${fractional_part_only(number)}" (fractional part only)
		→ "${both(number)}" (both)
	`);
}
demo(Math.random() * 10e5);
demo(123456789.01234567);
demo(123456789);
demo(0.0123456789);

Wie funktioniert es?

Für einen ganzzahligen Teil

.replace(/(?<!\.\d+)\B(?=(\d{3})+\b)/g, " I ")

• .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(/(?<=\.(\d{3})+)\B/g, " F ")

• .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

\d

Entspricht einer beliebigen Ziffer (arabische Ziffer). Entspricht [0-9].

Zum Beispiel,

• /\d/oder /[0-9]/passt 2in B2 is the suite number.

\b

Entspricht einer Wortgrenze . Dies ist die Position, an der einem Wortzeichen kein anderes Wortzeichen folgt oder vorangestellt wird, z. B. zwischen einem Buchstaben und einem Leerzeichen. Beachten Sie, dass eine übereinstimmende Wortgrenze nicht in der Übereinstimmung enthalten ist. Mit anderen Worten ist die Länge einer übereinstimmenden Wortgrenze Null.

Beispiele:

• /\bm/passt zum min moon;
• /oo\b/stimmt nicht mit dem ooin überein moon, da oogefolgt wird, nwelches ein Wortzeichen ist;
• /oon\b/stimmt mit dem oonin überein moon, da dies oondas Ende der Zeichenfolge ist und somit kein Wortzeichen folgt;
• /\w\b\w/ wird niemals mit irgendetwas übereinstimmen, da einem Wortzeichen niemals sowohl ein Nichtwort- als auch ein Wortzeichen folgen kann.

\B

Entspricht einer Nicht-Wortgrenze . Dies ist eine Position, an der das vorherige und das nächste Zeichen vom gleichen Typ sind: Entweder müssen beide Wörter sein oder beide müssen Nichtwörter sein. Zum Beispiel zwischen zwei Buchstaben oder zwischen zwei Leerzeichen. Der Anfang und das Ende einer Zeichenfolge werden als Nichtwörter betrachtet. Wie die übereinstimmende Wortgrenze ist auch die übereinstimmende Nichtwortgrenze nicht in der Übereinstimmung enthalten.

Zum Beispiel,

• /\Bon/passt onin at noon;
• /ye\B/passt yein possibly yesterday.

Browser-Kompatibilität

• https://caniuse.com/#feat=js-regexp-lookbehind

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.

function formatNumber( num, fixed ) { 
    var decimalPart;

    var array = Math.floor(num).toString().split('');
    var index = -3; 
    while ( array.length + index > 0 ) { 
        array.splice( index, 0, '.' );              
        index -= 4;
    }

    if(fixed > 0){
        decimalPart = num.toFixed(fixed).split(".")[1];
        return array.join('') + "," + decimalPart; 
    }
    return array.join(''); 
};

Beispiele;

formatNumber(17347, 0)  = 17.347
formatNumber(17347, 3)  = 17.347,000
formatNumber(1234563.4545, 3)  = 1.234.563,454

Viele gute Antworten schon. Hier ist noch eine, nur zum Spaß:

function format(num, fix) {
    var p = num.toFixed(fix).split(".");
    return p[0].split("").reduceRight(function(acc, num, i, orig) {
        if ("-" === num && 0 === i) {
            return num + acc;
        }
        var pos = orig.length - i - 1
        return  num + (pos && !(pos % 3) ? "," : "") + acc;
    }, "") + (p[1] ? "." + p[1] : "");
}

Einige Beispiele:

format(77.03453, 2); // "77.03"
format(78436589374); // "78,436,589,374"
format(784, 4);      // "784.0000"
format(-123456);     // "-123,456"