Sto cercando di stampare un numero intero in JavaScript con virgole come migliaia di separatori. Ad esempio, voglio mostrare il numero 1234567 come "1.234.567". Come potrei fare per fare questo?

Ecco come lo sto facendo:

function numberWithCommas(x) {
    x = x.toString();
    var pattern = /(-?\d+)(\d{3})/;
    while (pattern.test(x))
        x = x.replace(pattern, "$1,$2");
    return x;
}

Esiste un modo più semplice o più elegante per farlo? Sarebbe bello se funziona anche con i float, ma non è necessario. Non è necessario essere specifici delle impostazioni internazionali per decidere tra punti e virgole.

Ho usato l'idea della risposta di Kerry, ma l'ho semplificata poiché stavo solo cercando qualcosa di semplice per il mio scopo specifico. Ecco cosa ho fatto:

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

Regex utilizza 2 asserzioni lookahead:

• uno positivo per cercare qualsiasi punto nella stringa che ha un multiplo di 3 cifre consecutive dopo di essa,
• un'asserzione negativa per assicurarsi che quel punto abbia esattamente solo un multiplo di 3 cifre. L'espressione di sostituzione inserisce una virgola lì.

Ad esempio, se lo passi 123456789.01, l'asserzione positiva corrisponderà a ogni punto a sinistra del 7 (poiché 789è un multiplo di 3 cifre, 678è un multiplo di 3 cifre 567, ecc.). L'asserzione negativa verifica che il multiplo di 3 cifre non contenga cifre successive. 789ha un punto dopo, quindi è esattamente un multiplo di 3 cifre, quindi una virgola va lì. 678è un multiplo di 3 cifre ma ha un 9dopo, quindi quelle 3 cifre fanno parte di un gruppo di 4 e una virgola non va lì. Allo stesso modo per 567. 456789è composto da 6 cifre, ovvero un multiplo di 3, quindi una virgola precede. 345678è un multiplo di 3, ma ha un 9dopo, quindi nessuna virgola va lì. E così via. Il\B impedisce alla regex di inserire una virgola all'inizio della stringa.

@ neu-rah ha menzionato che questa funzione aggiunge virgole in punti indesiderati se ci sono più di 3 cifre dopo il punto decimale. Se questo è un problema, puoi usare questa funzione:

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 ha sottolineato che ora che JavaScript ha un aspetto ( informazioni di supporto ), può essere risolto nell'espressione regolare stessa:

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*)è un aspetto negativo che dice che la partita non può essere preceduta da un .seguito da zero o più cifre. L'aspetto negativo è più veloce della soluzione splite join( confronto ), almeno in V8.

Sono sorpreso che nessuno abbia menzionato Number.prototype.toLocaleString . È implementato in JavaScript 1.5 (introdotto nel 1999), quindi è sostanzialmente supportato da tutti i principali browser.

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

Funziona anche in Node.js a partire da v0.12 tramite l'inclusione di Intl

Basta prestare attenzione che questa funzione restituisce una stringa, non un numero.

Se vuoi qualcosa di diverso, Numeral.js potrebbe essere interessante.

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

⚠ Ricorda che JavaScript ha un valore intero massimo di 9007199254740991

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 non supportato):

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

Da quello che ho controllato (almeno Firefox) sono entrambi più o meno gli stessi per quanto riguarda le prestazioni.

Suggerisco di usare il number_format () di phpjs.org

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

AGGIORNAMENTO 13/02/14

Le persone hanno riferito che questo non funziona come previsto, quindi ho fatto un JS Fiddle che include test automatizzati.

Aggiornamento 26/11/2017

Ecco quel violino come Stack Snippet con output leggermente modificato:

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

Questa è una variazione della risposta di @mikez302, ma modificata per supportare i numeri con i decimali (secondo il feedback di @ neu-rah quel numero ConCommas (12345.6789) -> "12.345.6.789" invece di "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

Usando l'espressione regolare

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

Utilizzo di 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 ()

Utilizzo di 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 QUI

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

Prestazione

http://jsben.ch/sifRd

Intl.NumberFormat

Funzione JS nativa. Supportato da IE11, Edge, l'ultimo Safari, Chrome, Firefox, Opera, Safari su iOS e Chrome su Android.

var number = 3500;

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

Grazie a tutti per le loro risposte. Ho costruito alcune delle risposte per creare una soluzione più "unica per tutti".

Il primo frammento di aggiunge una funzione che imita PHP 'il number_format()al prototipo numero. Se sto formattando un numero, di solito voglio posizioni decimali, quindi la funzione accetta il numero di posizioni decimali da mostrare. Alcuni paesi utilizzano virgole come decimali e decimali come separatore delle migliaia, quindi la funzione consente di impostare questi separatori.

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

Lo useresti come segue:

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

Ho scoperto che spesso avevo bisogno di recuperare il numero per le operazioni matematiche, ma parseFloat converte da 5.000 a 5, semplicemente prendendo la prima sequenza di valori interi. Quindi ho creato la mia funzione di conversione float e l'ho aggiunta al prototipo String.

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

Ora puoi usare entrambe le funzioni come segue:

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

Sono abbastanza impressionato dal numero di risposte che questa domanda ha avuto. Mi piace la risposta di uKolka :

n.toLocaleString()

Ma sfortunatamente, in alcuni locali come lo spagnolo, non funziona (IMHO) come previsto per numeri inferiori a 10.000:

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

Dà 1000e non 1.000.

Vedere toLocaleString non funziona con numeri inferiori a 10000 in tutti i browser per sapere perché.

Quindi ho dovuto usare la risposta di Elias Zamaria scegliendo il giusto carattere separatore delle migliaia:

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

Questo funziona bene come one-liner per entrambi i locali che usano ,o .come separatore delle migliaia e inizia a lavorare da 1.000 in tutti i casi.

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

Fornisce 1.000un contesto locale spagnolo.

Se vuoi avere il controllo assoluto sul modo in cui un numero viene formattato, puoi anche provare quanto segue:

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)

Dà 1,234.57.

Questo non ha bisogno di un'espressione regolare. Funziona regolando il numero sulla quantità desiderata di decimali contoFixed , quindi dividendolo attorno al punto decimale .se ce n'è uno. Il lato sinistro viene quindi trasformato in una matrice di cifre che è invertita. Quindi un separatore di migliaia viene aggiunto ogni tre cifre dall'inizio e il risultato viene nuovamente invertito. Il risultato finale è l'unione delle due parti. Il segno del numero di input viene rimosso conMath.abs prima quindi, se necessario, nuovamente.

Non è un liner ma non molto più lungo e facilmente trasformabile in una funzione. Le variabili sono state aggiunte per maggiore chiarezza, ma possono essere sostituite dai valori desiderati se conosciute in anticipo. Puoi usare le espressioni che usano toLocaleStringcome un modo per scoprire i caratteri giusti per il punto decimale e il separatore delle migliaia per la locale corrente (tieni presente che quelli richiedono un Javascript più moderno).

Penso che questa sia l'espressione regolare più breve che lo fa:

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

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

L'ho controllato su alcuni numeri e ha funzionato.

Number.prototype.toLocaleString()sarebbe stato fantastico se fosse stato fornito in modo nativo da tutti i browser (Safari) .

Ho controllato tutte le altre risposte ma nessuno sembrava averlo riempito. Ecco un poc verso quello, che in realtà è una combinazione delle prime due risposte; se toLocaleStringfunziona lo utilizza, in caso contrario utilizza una funzione personalizzata.

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

Il separatore delle migliaia può essere inserito in modo internazionale utilizzando l' Intloggetto del browser :

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

Vedere l'articolo di MDN su NumberFormat per ulteriori informazioni, è possibile specificare il comportamento della locale o l'impostazione predefinita dell'utente. Questo è un po 'più sicuro perché rispetta le differenze locali; molti paesi usano i punti per separare le cifre mentre una virgola indica i decimali.

Intl.NumberFormat non è ancora disponibile in tutti i browser, ma funziona negli ultimi Chrome, Opera e IE. La prossima versione di Firefox dovrebbe supportarla. Webkit non sembra avere una linea temporale per l'implementazione.

È possibile utilizzare questa procedura per formattare la valuta che necessita.

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

Per maggiori informazioni puoi accedere a questo link.

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

se hai a che fare con valori di valuta e formattazioni molto, potrebbe valere la pena aggiungere piccoli account.js che gestiscono molti casi limite e localizzazione:

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

Il codice seguente usa la scansione dei caratteri, quindi non c'è regex.

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] : ''); 
}

Mostra prestazioni promettenti: http://jsperf.com/number-formatting-with-commas/5

2015.4.26: Correzione minore per risolvere il problema quando num <0. Vedi https://jsfiddle.net/runsun/p5tqqvs3/

Ecco una semplice funzione che inserisce virgole per migliaia di separatori. Utilizza le funzioni di array anziché un 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('');
};

Collegamento CodeSandbox con esempi: https://codesandbox.io/s/p38k63w0vq

Utilizzare questo codice per gestire il formato valuta per l'India. Il codice paese può essere modificato per gestire la valuta di un altro paese.

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

// Use it.

formatter.format(amount);

produzione:

3,50,256.95

Puoi anche usare il costruttore Intl.NumberFormat . Ecco come puoi farlo.

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

Ho scritto questo prima di imbattermi in questo post. Nessuna regex e puoi effettivamente capire il codice.

$(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(".");
}

EDIT: la funzione funziona solo con un numero positivo. per esempio:

var number = -123123231232;
formatNumber(number)

Uscita: "123.123.231.232"

Ma per rispondere alla domanda sopra il toLocaleString()metodo risolve solo il problema.

var number = 123123231232;
    number.toLocaleString()

Uscita: "123.123.231.232"

Cheer!

La mia risposta è l'unica risposta che sostituisce completamente jQuery con un'alternativa molto più sensata:

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

Questa soluzione non solo aggiunge le virgole, ma si arrotonda anche al penny più vicino nel caso in cui si inserisca un importo come se $(1000.9999)si ottengano $ 1.001,00. Inoltre, il valore inserito può essere tranquillamente un numero o una stringa; non importa.

Se hai a che fare con i soldi, ma non vuoi che venga visualizzato un segno di dollaro in anticipo sull'importo, puoi anche aggiungere questa funzione, che utilizza la funzione precedente ma rimuove $:

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

Se stai non si tratta di soldi, e hanno diversi requisiti di formattazione decimali, ecco un più versatile funzione di:

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

Oh, a proposito, il fatto che questo codice non funzioni in alcune vecchie versioni di Internet Explorer è completamente intenzionale. Cerco di interrompere IE ogni volta che riesco a catturarlo senza supportare gli standard moderni.

Ricorda che elogi eccessivi, nella sezione commenti, sono considerati fuori tema. Invece, mi riempi di voti positivi.

Per me, la risposta migliore è usare toLocaleString come hanno detto alcuni membri. Se vuoi includere il simbolo '$' aggiungi solo languaje e digita le opzioni. Ecco un esempio per formattare un numero in Pesos messicani

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

scorciatoia

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

Vorrei provare a migliorare la risposta di uKolka e forse aiutare gli altri a risparmiare un po 'di tempo.

Usa 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>

Dovresti andare con Number.prototype.toLocaleString () solo se la compatibilità del suo browser non è un problema.

Un modo alternativo, che supporta decimali, diversi separatori e negativi.

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

Alcune correzioni di @Jignesh Sanghani, non dimenticare di votare il suo commento.

Penso che questa funzione si occuperà di tutte le questioni relative a questo problema.

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

Solo per futuri googler (o non necessariamente "googler"):

Tutte le soluzioni sopra menzionate sono meravigliose, tuttavia, RegExp potrebbe essere terribilmente brutto da usare in una situazione del genere.

Quindi, sì, potresti usare alcune delle opzioni proposte o persino scrivere qualcosa di primitivo ma utile come:

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

Il regexp usato qui è abbastanza semplice e il ciclo andrà esattamente il numero di volte necessario per completare il lavoro.

E potresti ottimizzarlo molto meglio, codice "DRYify" e così via.

Ancora,

(-1234567.0987).toLocaleString();

(nella maggior parte dei casi) sarebbe una scelta molto migliore.

Il punto non è nella velocità di esecuzione o nella compatibilità tra browser.

Nelle situazioni in cui desideri mostrare il numero risultante all'utente, il metodo .toLocaleString () ti dà la superpotenza di parlare la stessa lingua con l'utente del tuo sito Web o della tua app (qualunque sia la sua lingua).

Questo metodo secondo la documentazione ECMAScript è stato introdotto nel 1999 e credo che la ragione di ciò sia stata la speranza che Internet ad un certo punto collegherà le persone in tutto il mondo, quindi sono stati necessari alcuni strumenti di "internalizzazione".

Oggi Internet ci collega tutti, quindi è importante ricordare che il mondo è un modo molto più complesso che possiamo immaginare e che (/ quasi) tutti noi siamo qui , su Internet.

Ovviamente, considerando la diversità delle persone, è impossibile garantire la perfetta UX per tutti perché parliamo lingue diverse, valutiamo cose diverse, ecc. E proprio per questo, è ancora più importante cercare di localizzare le cose il più possibile .

Quindi, considerando che ci sono alcuni standard particolari per la rappresentazione di data, ora, numeri, ecc. E che abbiamo uno strumento per visualizzare quelle cose nel formato preferito dall'utente finale, non è così raro e quasi irresponsabile non utilizzare quello strumento (soprattutto nelle situazioni in cui vogliamo visualizzare questi dati all'utente)?

Per me, usare RegExp invece di .toLocaleString () in una situazione del genere sembra un po 'come creare un'app orologio con JavaScript e codificarla in modo tale da visualizzare solo l'ora di Praga (che sarebbe abbastanza inutile per persone che non vivono a Praga) anche se il comportamento predefinito di

new Date();

è di restituire i dati secondo l'orologio dell'utente finale.

La mia " vera " soluzione solo _{per le} espressioni regolari _{per chi ama le battute one-line}

Vedi quei giocatori entusiasti sopra? Forse puoi giocarci a golf. Ecco il mio colpo.

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

_{Utilizza un  THIN SPACE (U + 2009) per un separatore di migliaia, come il Sistema Internazionale di Unità ha detto di fare nell'ottava edizione (2006) della loro pubblicazione " Brochure SI: Il Sistema Internazionale di Unità (SI) " (Vedi §5.3 .4.). La nona edizione (2019) suggerisce di utilizzare uno spazio per esso (vedere §5.4.4.). Puoi usare quello che vuoi, inclusa una virgola.}

Vedere.

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

Come funziona?

Per una parte intera

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

• .replace(……, " I ") Metti "io"
  • /……/g a ciascuno di
    • \B l'intervallo tra due cifre adiacenti
      • (?=……)_{LOOKAHEAD POSITIVO la} cui parte giusta è
        • (\d{3})+ uno o più blocchi di tre cifre
        • \b seguito da una non cifra, come ad esempio un punto, la fine della stringa, eccetera,
      • (?<!……)_{LOOKBEHIND NEGATIVO} esclusi quelli la cui parte sinistra
        • \.\d+ è un punto seguito da cifre ("ha un separatore decimale").

Per una parte decimale

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

• .replace(……, " F ") Metti "F"
  • /……/g a ciascuno di
    • \B l'intervallo tra due cifre adiacenti
      • (?<=……)_{LOOKBEHIND POSITIVO la} cui parte sinistra è
        • \. un separatore decimale
        • (\d{3})+ seguito da uno o più blocchi di tre cifre.

Classi di carattere e confini

\d

Corrisponde a qualsiasi cifra (numero arabo). Equivalente a [0-9].

Per esempio,

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

\b

Corrisponde a un limite di parole . Questa è la posizione in cui un carattere di parola non è seguito o preceduto da un altro carattere di parola, come tra una lettera e uno spazio. Si noti che un limite di parole corrispondenti non è incluso nella corrispondenza. In altre parole, la lunghezza del limite di una parola corrispondente è zero.

Esempi:

• /\bm/corrisponde a min moon;
• /oo\b/non corrisponde a ooin moon, perché ooè seguito da nquale è un carattere di parola;
• /oon\b/corrisponde a oonin moon, poiché oonè la fine della stringa, quindi non seguita da un carattere parola;
• /\w\b\w/ non corrisponderà mai a nulla, perché un carattere parola non può mai essere seguito da un carattere non-parola e un carattere-parola.

\B

Corrisponde a un limite non di parole . Questa è una posizione in cui il carattere precedente e successivo sono dello stesso tipo: o entrambi devono essere parole o entrambi devono essere non parole. Come tra due lettere o tra due spazi. L'inizio e la fine di una stringa sono considerati non parole. Come il limite di parole corrispondenti, anche il limite di non parole corrispondenti non è incluso nella corrispondenza.

Per esempio,

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

Compatibilità del browser

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

Ho aggiunto tofixed alla soluzione di Aki143S . Questa soluzione utilizza punti per migliaia di separatori e virgola per la precisione.

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

Esempi;

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

Molte buone risposte già. Eccone un altro, solo per divertimento:

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] : "");
}

Qualche esempio:

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