it-swarm.com.de

So drucken Sie eine Zahl mit Kommas als Tausendertrennzeichen in JavaScript

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 das machen?

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 funktioniert, aber das ist nicht notwendig. Es muss nicht länderspezifisch sein, um zwischen Punkten und Kommas zu entscheiden.

1507
Elias Zamaria

Ich habe die Idee aus Kerrys Antwort übernommen, 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, ",");
}

Das ist alles, was Sie wirklich wissen müssen.

@Neils Bom fragte, wie der Regex funktioniert. Meine Erklärung ist ziemlich lang. Es passt nicht in die Kommentare und ich weiß nicht, wo ich es sonst hinstellen soll, also mache ich es hier. Wenn jemand andere Vorschläge hat, wo er es hinstellen soll, lass es mich wissen.

Der reguläre Ausdruck verwendet zwei Lookahead-Zusicherungen: eine positive, um nach einem beliebigen Punkt in der Zeichenfolge zu suchen, der ein Vielfaches von drei Ziffern in einer Zeile enthält, und eine negative Zusicherung, um sicherzustellen, dass dieser Punkt nur genau ein Vielfaches von drei Ziffern enthält. Der Ersetzungsausdruck setzt dort ein Komma.

Wenn Sie beispielsweise "123456789.01" übergeben, stimmt die positive Aussage mit jeder Stelle links von der 7 überein (da "789" ein Vielfaches von 3 Stellen ist, "678" ein Vielfaches von 3 Stellen ist, "567"). usw.). Die negative Zusicherung prüft, dass dem Vielfachen von 3 Ziffern keine Ziffern folgen. "789" hat einen Punkt danach, es ist also genau ein Vielfaches von 3 Stellen, also geht ein Komma dorthin. "678" ist ein Vielfaches von 3 Ziffern, aber es steht eine "9" dahinter, sodass diese 3 Ziffern Teil einer 4er-Gruppe sind und ein Komma dort nicht steht. Ähnliches gilt für "567". "456789" ist 6-stellig, was einem Vielfachen von 3 entspricht. Deshalb muss davor ein Komma stehen. "345678" ist ein Vielfaches von 3, aber es steht eine "9" dahinter, sodass dort kein Komma steht. Und so weiter. Das "\ B" hindert den Regex daran, ein Komma an den Anfang der Zeichenkette zu setzen.

@ neu-rah erwähnte, dass diese Funktion an unerwünschten Stellen Kommas hinzufügt, wenn mehr als 3 Stellen nach dem Komma 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(".");
}
2491
Elias Zamaria

Ich bin überrascht, dass niemand etwas 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
n.toLocaleString()
"34,523,453.345"

Es funktioniert auch in Node.js ab v0.12 durch Einfügen 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.

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

⚠ Beachten Sie, dass Javascript einen maximale Ganzzahl 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 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.

213
vsync

Ich schlage vor, phpjs.orgs number_format () 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 ein JS Fiddle gemacht, das automatisierte Tests beinhaltet.

Update 26/11/2017

Hier ist die Geige als Stack-Snippet mit leicht veränderter 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;
}
100
Kerry Jones

Dies ist eine Variation der Antwort von @ mikez302, die jedoch dahingehend geändert wurde, dass Dezimalzahlen unterstützt werden (gemäß @ neu-rahs Rückmeldung, 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] : "");
}
68
user1437663
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
62
Tutankhamen

Verwenden des regulären Ausdrucks

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

Verwendung 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 AT 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>

Leistung

Performancehttp://jsben.ch/sifRd

47

Intl.NumberFormat

Native JS-Funktion. Unterstützt von IE11, Edge, den neuesten Versionen von Safari, Chrome, Firefox, Opera, Safari unter iOS und Chrome unter Android.

var number = 3500;

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

Vielen Dank an alle für ihre Antworten. Ich habe aus einigen der Antworten eine "Einheitslösung" zusammengestellt.

Das erste Snippet fügt dem Number-Prototyp eine Funktion hinzu, die PHP s number_format() nachahmt. 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 Dezimalzahlen als Tausendertrennzeichen, sodass diese Trennzeichen durch die Funktion festgelegt werden können.

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 für mathematische Operationen oft die Zahl zurückholen musste, aber parseFloat konvertiert 5.000 in 5, indem einfach die erste Folge von Ganzzahlwerten verwendet wird. 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));
}

Nun können Sie beide Funktionen wie folgt nutzen:

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
32
J.Money

Ich denke, das ist der kürzeste reguläre Ausdruck, der das macht:

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

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

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

21
user3664916

Number.prototype.toLocaleString() wäre fantastisch gewesen, wenn es von allen Browsern nativ bereitgestellt worden wäre (Safari).

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 toLocaleString funktioniert, wird es verwendet, wenn es keine 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));
18
Sinan

Das Tausendertrennzeichen kann international über das Objekt Intl des Browsers eingefügt werden:

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

Weitere Informationen finden Sie in MDNs Artikel zu NumberFormat . Sie können das Gebietsschemaverhalten oder die Standardeinstellung für den Benutzer festlegen. Dies ist ein wenig 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. Das Webkit scheint keinen Zeitplan für die Implementierung zu haben.

16
phette23

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/

15
Dulith De Costa

wenn Sie mit Währungswerten zu tun haben und viel formatieren, ist es möglicherweise sinnvoll, tiny accounting.js hinzuzufügen, das viele Edge-Fälle und die Lokalisierung 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
13
Shital Shah

Der folgende Code verwendet char scan, sodass kein regulärer Ausdruck vorhanden ist.

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. Siehe https://jsfiddle.net/runsun/p5tqqvs3/

12
runsun

Hier ist eine einfache Funktion, die Kommas für Tausendertrennzeichen einfügt. Es werden Array-Funktionen anstelle von RegEx verwendet.

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

11
Noah Freitas

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

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

// Use it.

formatter.format(amount);

ausgabe:

3,50,256.95
9
Bathri Nathan

Ich habe dieses Buch 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>
7
Ronnie Overby

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 die Sprache hinzu und geben Sie Optionen ein. Hier ist ein Beispiel zum Formatieren einer Zahl in mexikanischen Pesos

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

abkürzung

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

Sie können auch den Konstruktor Intl.NumberFormat verwenden. Hier ist, wie Sie es machen können.

 resultNumber = new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(yourNumber); 
5
Oliver
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 positiven Zahlen. Zum Beispiel:

var number = -123123231232;
formatNumber(number)

Ausgabe: "123,123,231,232"

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

var number = 123123231232;
    number.toLocaleString()

Ausgabe: "123,123,231,232"

Jubeln!

5
Kiry Meas

Lassen Sie mich versuchen, Kolka 's zu verbessern answer und vielleicht anderen zu helfen, etwas Zeit zu sparen.

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 dann verwenden, wenn Browserkompatibilität kein Problem darstellt.

5

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;
}
4
AbhinavRanjan

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.abs(Math.floor(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.

3
Felipe Buccioni

Ich habe tofixed zu Aki143S 's Lösung hinzugefügt. Diese Lösung verwendet Punkte für Tausendertrennzeichen und Kommas 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
3
bartburkhardt

Viele gute Antworten schon. Hier ist eine andere, 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"
3
Wayne Burkett

Nur für zukünftige Googler (oder nicht unbedingt "Googler"):

Alle oben genannten Lösungen sind wunderbar, aber in einer solchen Situation ist RegExp möglicherweise furchtbar schlecht.

Also, ja, Sie könnten einige der vorgeschlagenen Optionen verwenden oder sogar etwas Primitives schreiben, das dennoch nützlich ist, 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 recht einfach und die Schleife wird genau so oft durchlaufen, bis der Job 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 ist nicht in der Geschwindigkeit der Ausführung oder in der Cross-Browser-Kompatibilität.

In Situationen, in denen Sie dem Benutzer die resultierende Zahl anzeigen möchten, können Sie mit der Methode .toLocaleString () dieselbe Sprache wie mit dem Benutzer Ihrer Website oder App sprechen (unabhängig von seiner Sprache).

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, sodass einige "Internalisierungs" -Tools benötigt wurden.

Heutzutage verbindet das Internet uns alle, daher ist es wichtig, sich daran zu erinnern, dass die Welt komplexer ist, als wir es uns vorstellen können und dass (/ fast) wir alle sind hier im Internet .

Angesichts der Vielfalt der Menschen ist es natürlich unmöglich, eine perfekte Benutzeroberfläche für alle zu garantieren, da wir verschiedene Sprachen sprechen, verschiedene Dinge schätzen usw. Und genau aus diesem Grund ist es umso wichtiger, zu versuchen, die Dinge so weit wie möglich zu lokalisieren .

Wenn man bedenkt, dass es bestimmte 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 das nicht so selten und fast unverantwortlich 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 sie so fest codieren, dass sie nur die Prager Zeit anzeigt (was für ziemlich nutzlos wäre Menschen, die nicht in Prag leben), obwohl das Standardverhalten von

new Date();

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

2
Igor Bykov

Ich denke, Ihre Lösung ist eine der kürzeren, die ich dafür gesehen habe. Ich glaube nicht, dass es Standard-JavaScript-Funktionen gibt, mit denen Sie so etwas tun können, also sind Sie wahrscheinlich auf sich allein gestellt.

Ich habe die CSS 3-Spezifikationen überprüft, um festzustellen, ob dies in CSS möglich ist, aber ich denke nicht, dass dies möglich ist, es sei denn, Sie möchten, dass jede Ziffer ihren eigenen <span> hat.

Ich habe auf Google Code ein Projekt gefunden, das vielversprechend aussah: flexible-js-Formatierung . Ich habe es nicht benutzt, aber es sieht ziemlich flexibel aus und hat Unit-Tests mit JsUnit . Der Entwickler hat auch viele (wenn auch alte) Beiträge zu diesem Thema.

Berücksichtigen Sie internationale Benutzer: Viele Nationen verwenden ein Leerzeichen als Trennzeichen und verwenden das Komma, um die Dezimalstelle vom ganzzahligen Teil der Zahl zu trennen.

2
jasonmp85

Meine true Lösung nur für reguläre Ausdrücke für diejenigen, die Einzeiler lieben

Siehst du die 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ÜNNER RAUM (U + 2009) für ein Tausendertrennzeichen, wie es das Internationale Einheitensystem in der achten Ausgabe tun soll(2006) ihrer Veröffentlichung „ SI-Broschüre: Das Internationale Einheitensystem (SI) (Siehe §5.3.4.). Die neunte Ausgabe(2019) schlägt vor, ein Leerzeichen dafür zu verwenden (siehe §5.4.4.). Sie können 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 "I"
    • /……/g bei jedem von
      • \B das Dazwischen zweier benachbarter Ziffern
        • (?=……)POSITIVE LOOKAHEAD dessen rechter Teil ist
          • (\d{3})+ ein oder mehrere dreistellige Chunks
          • \b gefolgt von einer Nicht-Ziffer, z. B. einem Punkt, dem Ende der Zeichenfolge usw.
        • (?<!……)NEGATIVE LOOKBEHIND ausgenommen diejenigen, 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 Dazwischen zweier benachbarter Ziffern
        • (?<=……)POSITIVER BLICK HINTEN deren linker Teil ist
          • \. ein Dezimaltrennzeichen
          • (\d{3})+ gefolgt von einem oder mehreren dreistelligen Blöcken.

Zeichenklassen und Grenzen

\d

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

Zum Beispiel,

  • /\d/ oder /[0-9]/ stimmt mit 2 in B2 is the suite number überein.

\b

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

Beispiele:

  • /\bm/ stimmt mit m in moon überein;
  • /oo\b/ stimmt nicht mit oo in moon überein, da oo von n gefolgt wird, das ein Wortzeichen ist;
  • /oon\b/ stimmt mit oon in moon überein, da oon das Ende der Zeichenfolge ist und daher kein Wortzeichen folgt.
  • /\w\b\w/ wird niemals mit etwas übereinstimmen, da einem Word-Zeichen niemals sowohl ein Nicht-Word- als auch ein Word-Zeichen folgen kann.

\B

Entspricht einer Nicht-Wort-Grenze . Dies ist eine Position, an der das vorherige und das nächste Zeichen vom selben Typ sind: Entweder müssen beide Wörter sein oder beide dürfen keine Wö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 wird auch die übereinstimmende Nicht-Wortgrenze nicht in die Übereinstimmung einbezogen.

Zum Beispiel,

  • /\Bon/ stimmt mit on in at noon überein;
  • /ye\B/ stimmt mit ye in possibly yesterday überein.

Browser-Kompatibilität

Die Lösung von @ user1437663 ist großartig.

Wer die Lösung wirklich versteht, ist bereit, komplexe reguläre Ausdrücke zu verstehen.

Eine kleine Verbesserung, um es lesbarer zu machen:

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

Das Muster beginnt mit \ B, um die Verwendung von Kommas am Anfang eines Wortes zu vermeiden. Interessanterweise wird das Muster leer zurückgegeben, da \ B den "Cursor" nicht weiterbewegt (dasselbe gilt für $).

O \ B wird von weniger bekannten Ressourcen gefolgt, ist jedoch eine leistungsstarke Funktion in Perls regulären Ausdrücken.

            Pattern1 (? = (Pattern2) ).

Die Magie ist, dass das, was in Klammern steht ( Muster2 ), ein Muster ist, das dem vorherigen Muster folgt ( Muster1 ) aber ohne den Cursor vorwärts zu bewegen und ist auch nicht Teil des zurückgegebenen Musters. Es ist eine Art Zukunftsmuster. Das ist ähnlich, wenn sich jemand freut, aber wirklich nicht geht!

In diesem Fall ist Muster2

\d{3})+(?=$)

Es bedeutet 3 Ziffern (einmal oder mehrmals), gefolgt vom Ende der Zeichenkette ($)

Schließlich ändert die Ersetzen -Methode alle Vorkommen des gefundenen Musters (leere Zeichenfolge) für Komma. Dies geschieht nur in Fällen, in denen das verbleibende Stück ein Vielfaches von 3 Stellen ist (in solchen Fällen erreicht der zukünftige Cursor das Ende des Ursprungs).

2
Paulo Buchsbaum

Ich habe einen Ansatz gefunden, der in jeder Situation funktioniert. CodeSandbox-Beispiel

function commas(n) {
  if (n < 1000) {
    return n + ''
  } else {
    // Convert to string.
    n += ''

    // Skip scientific notation.
    if (n.indexOf('e') !== -1) {
      return n
    }

    // Support fractions.
    let i = n.indexOf('.')
    let f = i == -1 ? '' : n.slice(i)
    if (f) n = n.slice(0, i)

    // Add commas.
    i = n.length
    n = n.split('')
    while (i > 3) n.splice((i -= 3), 0, ',')
    return n.join('') + f
  }
}

Dies ist wie Noah Freitas 'Antwort , jedoch mit Unterstützung für Brüche und wissenschaftliche Notation .

Ich denke, toLocaleString ist die beste Wahl, wenn Leistung keine Rolle spielt.

edit: Hier ist eine CodeSandbox mit einigen Beispielen: https://codesandbox.io/s/zmvxjpj6x

1
aleclarson

Ich habe Ihren Code so angepasst, dass er in TextBox funktioniert (Eingabetyp = "Text"), damit wir Ziffern in Echtzeit eingeben und löschen können, ohne den Cursor zu verlieren. Dies funktioniert auch, wenn Sie beim Löschen einen Bereich auswählen. Und Sie können Pfeile und Home/End-Tasten frei verwenden.
Danke, dass du mir Zeit gespart hast!

//function controls number format as "1,532,162.3264321"
function numberWithCommas(x) {
    var e = e || window.event;
    if (e.keyCode >= '35' && e.keyCode <= '40') return; //skip arrow-keys
    var selStart = x.selectionStart, selEnd = x.selectionEnd; //save cursor positions
    var parts = x.value.toString().split(".");
    var part0len = parts[0].length; //old length to check if new ',' would be added. Need for correcting new cursor position (+1 to right).

    //if user deleted ',' - remove previous number instead (without selection)
    if (x.selectionLength == 0 && (e.keyCode == 8 || e.keyCode == 46)) {//if pressed 8-backspace or 46-delete button
        var delPos = parts[0].search(/\d{4}/);
        if (delPos != -1) {//if found 4 digits in a row (',' is deleted)
            if (e.keyCode == 8) {//if backspace flag
                parts[0] = parts[0].slice(0, selStart - 1) + parts[0].slice(selEnd, parts[0].length);
                selEnd--;
                if (selStart > selEnd) selStart = selEnd;
            } else {
                parts[0] = parts[0].slice(0, selStart) + parts[0].slice(selEnd + 1, parts[0].length);
                selStart++;
                if (selEnd < selStart) selEnd = selStart;
            }
        }
    }

   var hasMinus = parts[0][0] == '-';
   parts[0] = (hasMinus ? '-' : '') + parts[0].replace(/[^\d]*/g, ""); //I'd like to clear old ',' to avoid things like 1,2,3,5,634.443216
   parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); //sets ',' between each 3 digits
   if (part0len < parts[0].length) { //move cursor to right if added new ','
       selStart++;
       selEnd++;
   } else if (part0len > parts[0].length) { //..or if removed last one ','
       selStart--;
       selEnd--;
   }
   x.value = parts.join(".");
   x.setSelectionRange(selStart, selEnd); //restoring cursor position
}
function saveSelectionLength(x) {
    x.selectionLength = x.selectionEnd - x.selectionStart;
}

Um dies zu nutzen, wurden zwei Ereignisse hinzugefügt - onKeyUp und onKeyDown

<asp:TextBox runat="server" ID="val" Width="180px" onKeyUp="numberWithCommas(this);" onKeyDown="saveSelectionLength(this);"/>
1
Eluny

Wenn Sie AngularJS verwenden, gibt es diesen Währungsfilter, der definitiv hilfreich sein kann: http://www.w3schools.com/angular/ng_filter_currency.asp

1
Yuxuan Chen

Nachdem ich hier keine moderne und umfassende Lösung gefunden habe, habe ich eine Pfeilfunktion (ohne Regex) geschrieben, um das Formatierungsproblem zu lösen, und der Aufrufer kann auch die Anzahl der Nachkommastellen angeben als Periode und Tausendertrennzeichen für Europa und den Rest der Welt.

Beispiele:

numberFormatter(1234567890.123456) => 1,234,567,890
numberFormatter(1234567890.123456, 4) => 1,234,567,890.1235
numberFormatter(1234567890.123456, 4, '.', ',') => 1.234.567.890,1235 Europe

Hier ist die in ES6 (moderne Syntax) geschriebene Funktion:

const numberFormatter = (number, fractionDigits = 0, thousandSeperator = ',', fractionSeperator = '.') => {
    if (number!==0 && !number || !Number.isFinite(number)) return number
    const frDigits = Number.isFinite(fractionDigits)? Math.min(Math.max(fractionDigits, 0), 7) : 0
    const num = number.toFixed(frDigits).toString()

    const parts = num.split('.')
    let digits = parts[0].split('').reverse()
    let sign = ''
    if (num < 0) {sign = digits.pop()}
    let final = []
    let pos = 0

    while (digits.length > 1) {
        final.Push(digits.shift())
        pos++
        if (pos % 3 === 0) {final.Push(thousandSeperator)}
    }
    final.Push(digits.shift())
    return `${sign}${final.reverse().join('')}${frDigits > 0 ? fractionSeperator : ''}${frDigits > 0 && parts[1] ? parts[1] : ''}`
}

Es wurde auf negative, schlechte Eingaben und NaN-Fälle getestet. Wenn die Eingabe NaN ist, wird sie einfach zurückgegeben.

1

Hier ist eine einzeilige Funktion mit int & decimal Unterstützung. Ich habe einen Code hinterlassen, um die Zahl auch in einen String umzuwandeln.

    function numberWithCommas(x) {
        return (x=x+'').replace(new RegExp('\\B(?=(\\d{3})+'+(~x.indexOf('.')?'\\.':'$')+')','g'),',');
    }
0
arosolino

Dieser folgende Code funktioniert für mich

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

Für Ganzzahlen habe ich eine sehr einfache Methode verwendet:

var myNumber = 99999,
    myString = myNumber + "";

myString.length > 3 ? return myString.substring(0, myString.length - 3) + "," + 
    myString.substring(myString.length - 3) : return myString;
0
Zakhar

Hier ist mein Versuch:

EDIT: In Dezimalstellen hinzugefügt

function splitMille(n, separator = ',') {
  // Cast to string
  let num = (n + '')

  // Test for and get any decimals (the later operations won't support them)
  let decimals = ''
  if (/\./.test(num)) {
    // This regex grabs the decimal point as well as the decimal numbers
    decimals = num.replace(/^.*(\..*)$/, '$1')
  }
  
  // Remove decimals from the number string
  num = num.replace(decimals, '')
    // Reverse the number string through Array functions
    .split('').reverse().join('')
    // Split into groups of 1-3 characters (with optional supported character "-" for negative numbers)
    .match(/[0-9]{1,3}-?/g)
    // Add in the mille separator character and reverse back
    .join(separator).split('').reverse().join('')

  // Put the decimals back and output the formatted number
  return `${num}${decimals}`
}

let testA = splitMille(1234)
let testB = splitMille(-1234)
let testC = splitMille(123456.789)
let testD = splitMille(9007199254740991)
let testE = splitMille(1000.0001)

console.log('Results!\n\tA: %s\n\tB: %s\n\tC: %s\n\tD: %s\n\tE: %s', testA, testB, testC, testD, testE)
0
Matt Scheurich

Für indisches numerisches System

var number = "323483.85"
var decimal = number.split(".");
var res = (decimal[0].length>3? numberWithCommas(decimal[0].substring(0,decimal[0].length-3))+ ',' :decimal[0]) + (decimal[0].length>3?decimal[0].substring(decimal[0].length-3,decimal[0].length):'') + '.' + decimal[1];

Ausgabe: 3,23,483,85

0
Saksham

Ich dachte, ich würde einen kleinen Trick teilen, den ich für die Formatierung großer Zahlen verwende. Anstatt Kommas oder Leerzeichen einzufügen, füge ich einen leeren, aber sichtbaren Bereich zwischen den "Tausenden" ein. Dies macht Tausende leicht sichtbar, aber es ermöglicht das Kopieren/Einfügen der Eingabe im Originalformat ohne Kommas/Leerzeichen.

// This function accepts an integer, and produces a piece of HTML that shows it nicely with 
// some empty space at "thousand" markers. 
// Note, these space are not spaces, if you copy paste, they will not be visible.
function valPrettyPrint(orgVal) {
  // Save after-comma text, if present
  var period = orgVal.indexOf(".");
  var frac = period >= 0 ? orgVal.substr(period) : "";
  // Work on input as an integer
  var val = "" + Math.trunc(orgVal);
  var res = "";
  while (val.length > 0) {
    res = val.substr(Math.max(0, val.length - 3), 3) + res;
    val = val.substr(0, val.length - 3);
    if (val.length > 0) {
        res = "<span class='thousandsSeparator'></span>" + res;
    }
  }
  // Add the saved after-period information
  res += frac;
  return res;
}

Mit diesem CSS:

.thousandsSeparator {
  display : inline;
  padding-left : 4px;
}

Siehe ein Beispiel JSFiddle.

0
Marcin Zukowski

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

Wenn Sie nicht möchten, dass ein führendes Dollarzeichen auf dem Betrag angezeigt wird, können Sie auch diese Funktion hinzufügen, die die vorherige Funktion verwendet, jedoch den $ entfernt:

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

Diese Lösung fügt nicht nur Kommas hinzu, sondern rundet auch auf den nächsten Cent, falls Sie einen Betrag wie $(1000.9999) eingeben, und Sie erhalten $ 1,001.00. Darüber hinaus kann der eingegebene Wert sicher eine Zahl oder eine Zeichenfolge sein. es spielt keine rolle.

Übrigens ist die Tatsache, dass dieser Code in einer alten Version von Internet Explorer nicht funktioniert, völlig beabsichtigt. Ich versuche, IE immer dann zu brechen, wenn ich feststellen kann, dass es 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 positiven Stimmen.

0
Lonnie Best

Hier ist eine gute Lösung mit weniger Codierung ...

var y = "";
var arr = x.toString().split("");
for(var i=0; i<arr.length; i++)
{
    y += arr[i];
    if((arr.length-i-1)%3==0 && i<arr.length-1) y += ",";
}
0
Mosiur