Estou tentando imprimir um número inteiro em JavaScript com vírgulas como separadores de milhares. Por exemplo, quero mostrar o número 1234567 como "1.234.567". Como eu faria isso?

Aqui está como eu estou fazendo isso:

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

Existe uma maneira mais simples ou mais elegante de fazer isso? Seria bom se ele trabalha com carros alegóricos também, mas isso não é necessário. Não precisa ser específico do local para decidir entre pontos e vírgulas.

Usei a ideia da resposta de Kerry, mas a simplifiquei, pois estava apenas procurando algo simples para o meu propósito específico. Aqui está o que eu fiz:

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

O regex usa 2 asserções lookahead:

• positivo para procurar qualquer ponto na sequência que tenha vários 3 dígitos seguidos depois,
• uma afirmação negativa para garantir que esse ponto tenha apenas exatamente um múltiplo de 3 dígitos. A expressão de substituição coloca uma vírgula lá.

Por exemplo, se você a passar 123456789.01, a afirmação positiva corresponderá a todos os pontos à esquerda dos 7 (já que 789é um múltiplo de 3 dígitos, 678é um múltiplo de 3 dígitos 567, etc.). A asserção negativa verifica se o múltiplo de 3 dígitos não possui nenhum dígito depois dele. 789tem um período depois dele, então é exatamente um múltiplo de 3 dígitos, então uma vírgula vai para lá. 678é um múltiplo de 3 dígitos, mas possui um 9depois, portanto esses 3 dígitos fazem parte de um grupo de 4 e uma vírgula não vai para lá. Da mesma forma para 567. 456789tem 6 dígitos, que é um múltiplo de 3, então uma vírgula é anterior a isso. 345678é um múltiplo de 3, mas tem um 9depois, portanto, nenhuma vírgula vai para lá. E assim por diante. o\B impede que o regex coloque vírgula no início da string.

@ neu-rah mencionou que esta função adiciona vírgulas em locais indesejáveis ​​se houver mais de 3 dígitos após o ponto decimal. Se este for um problema, você pode usar esta função:

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 apontou que agora que o JavaScript está oculto ( informações de suporte ), ele pode ser resolvido na própria expressão regular:

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*)é um aspecto negativo que indica que a correspondência não pode ser precedida por um .seguido por zero ou mais dígitos. O lookbehind negativo é mais rápido que a solução splite join( comparação ), pelo menos na V8.

Estou surpreso que ninguém tenha mencionado Number.prototype.toLocaleString . Ele foi implementado no JavaScript 1.5 (que foi introduzido em 1999) e, portanto, é basicamente suportado nos principais navegadores.

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

Também funciona no Node.js a partir da v0.12 através da inclusão de Intl

Apenas preste atenção que esta função retorna uma string, não um número.

Se você quiser algo diferente, o Numeral.js pode ser interessante.

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

⚠ Lembre-se de que o javascript tem um valor inteiro máximo de 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 não suportado):

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

Pelo que verifiquei (Firefox pelo menos), ambos são mais ou menos iguais em relação ao desempenho.

Sugiro usar o number_format () do 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);
}

ATUALIZAÇÃO 13/02/14

As pessoas têm relatado que isso não funciona como esperado, então eu fiz um JS Fiddle que inclui testes automatizados.

Atualização 26/11/2017

Aqui está o violino como um snippet de pilha com saída levemente modificada:

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

Esta é uma variação da resposta de @ mikez302, mas modificada para suportar números com decimais (de acordo com o feedback de @ neu-rah que numberWithCommas (12345.6789) -> "12.345.6.789" em vez de "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 expressão regular

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

Usando 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 ()

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

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

atuação

http://jsben.ch/sifRd

Intl.NumberFormat

Função JS nativa. Suportado pelo IE11, Edge, Safari mais recente, Chrome, Firefox, Opera, Safari no iOS e Chrome no Android.

var number = 3500;

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

Obrigado a todos por suas respostas. Eu desenvolvi algumas das respostas para criar uma solução mais "tamanho único".

O primeiro trecho acrescenta uma função que imita PHP é number_format()para o protótipo Number. Se estou formatando um número, normalmente quero casas decimais, para que a função receba o número de casas decimais a serem exibidas. Alguns países usam vírgulas como decimais e decimais como separador de milhares, para que a função permita que esses separadores sejam definidos.

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

Você usaria isso da seguinte maneira:

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

Descobri que muitas vezes precisava recuperar o número para operações matemáticas, mas o parseFloat converte 5.000 em 5, simplesmente obtendo a primeira sequência de valores inteiros. Então, criei minha própria função de conversão de flutuador e a adicionei ao protótipo 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));
}

Agora você pode usar as duas funções da seguinte maneira:

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

Estou bastante impressionado com o número de respostas que esta pergunta tem. Eu gosto da resposta de uKolka :

n.toLocaleString()

Infelizmente, porém, em alguns locais como o espanhol, ele não funciona (IMHO) conforme o esperado para números abaixo de 10.000:

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

Dá 1000e não 1.000.

Consulte toLocaleString que não funciona em números inferiores a 10000 em todos os navegadores para saber o motivo.

Então, eu tive que usar a resposta de Elias Zamaria escolhendo o caractere separador de milhares certo:

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

Este funciona bem como uma linha para ambos os locais que usam ,ou .como separador de milhares e começa a trabalhar a partir de 1.000 em todos os casos.

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

Fornece 1.000com um contexto de localidade em espanhol.

Se você deseja ter controle absoluto sobre a formatação de um número, tente também o seguinte:

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.

Este não precisa de uma expressão regular. Ele funciona ajustando o número para a quantidade desejada de decimais com toFixedprimeiro e, em seguida, dividindo-o em torno do ponto decimal, .se houver um. O lado esquerdo é então transformado em uma matriz de dígitos que é revertida. Em seguida, um separador de milhares é adicionado a cada três dígitos desde o início e o resultado é revertido novamente. O resultado final é a união das duas partes. O sinal do número de entrada é removido Math.absprimeiro e depois recolocado, se necessário.

Não é uma linha, mas não muito mais longa e facilmente transformada em função. As variáveis ​​foram adicionadas para maior clareza, mas essas podem ser substituídas pelos valores desejados, se forem conhecidos com antecedência. Você pode usar as expressões usadas toLocaleStringpara descobrir os caracteres corretos para o ponto decimal e o separador de milhares para o código do idioma atual (lembre-se de que esses requerem um Javascript mais moderno).

Eu acho que essa é a expressão regular mais curta que faz isso:

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

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

Eu verifiquei em alguns números e funcionou.

Number.prototype.toLocaleString()teria sido incrível se fosse fornecido nativamente por todos os navegadores (Safari) .

Eu verifiquei todas as outras respostas, mas ninguém parecia preenchê-lo. Aqui está um ponto a favor disso, que na verdade é uma combinação das duas primeiras respostas; se toLocaleStringfunciona, usa-o; caso contrário, usa uma função personalizada.

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

O separador de milhares pode ser inserido de maneira internacional, usando o Intlobjeto do navegador :

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

Consulte o artigo da MDN sobre NumberFormat para obter mais informações, você pode especificar o comportamento da localidade ou o padrão para o usuário. Isso é um pouco mais infalível, porque respeita as diferenças locais; muitos países usam períodos para separar dígitos, enquanto uma vírgula indica os decimais.

O Intl.NumberFormat ainda não está disponível em todos os navegadores, mas funciona nos mais recentes Chrome, Opera e IE. O próximo lançamento do Firefox deve suportá-lo. O Webkit não parece ter um cronograma para implementação.

Você pode usar este procedimento para formatar sua moeda.

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

Para mais informações, você pode acessar este link.

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

se você estiver lidando com valores de moeda e formatando muito, talvez valha a pena adicionar o accounting.js minúsculo, que lida com muitos casos extremos e localização:

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

O código a seguir usa char scan, portanto, não há 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] : ''); 
}

Ele mostra um desempenho promissor: http://jsperf.com/number-formatting-with-commas/5

26/04/2015: Correção menor para resolver o problema quando num <0. Consulte https://jsfiddle.net/runsun/p5tqqvs3/

Aqui está uma função simples que insere vírgulas para milhares de separadores. Ele usa funções de matriz em vez de um 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('');
};

Link do CodeSandbox com exemplos: https://codesandbox.io/s/p38k63w0vq

Use este código para lidar com o formato de moeda da Índia. O código do país pode ser alterado para lidar com a moeda de outro país.

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

// Use it.

formatter.format(amount);

resultado:

3,50,256.95

Você também pode usar o construtor Intl.NumberFormat . Aqui está como você pode fazer isso.

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

Eu escrevi este antes de tropeçar neste post. Sem regex e você pode realmente entender o código.

$(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: A função funciona apenas com número positivo. por exemplo:

var number = -123123231232;
formatNumber(number)

Saída: "123,123,231,232"

Mas, para responder à pergunta acima, o toLocaleString()método apenas resolve o problema.

var number = 123123231232;
    number.toLocaleString()

Saída: "123,123,231,232"

Elogio!

Minha resposta é a única resposta que substitui completamente o jQuery por uma alternativa muito mais sensata:

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

Essa solução não apenas adiciona vírgulas, mas também arredonda para o centavo mais próximo, caso você insira uma quantia como a de $(1000.9999)US $ 1.001,00. Além disso, o valor inserido pode ser um número ou uma string com segurança; Não importa.

Se você está lidando com dinheiro, mas não quer um cifrão à esquerda, também pode adicionar esta função, que usa a função anterior, mas remove $:

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

Se você não está lidando com dinheiro e tem vários requisitos de formatação decimal, aqui está uma função mais versátil:

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

Ah, e a propósito, o fato de esse código não funcionar em alguma versão antiga do Internet Explorer é completamente intencional. Eu tento interromper o IE a qualquer momento que eu possa pegá-lo sem suportar os padrões modernos.

Lembre-se de que elogios excessivos, na seção de comentários, são considerados fora de tópico. Em vez disso, apenas me regue com votos positivos.

Para mim, a melhor resposta é usar toLocaleString como alguns membros disseram. Se você deseja incluir o símbolo '$', basta adicionar o idioma e digitar as opções. Aqui está e exemplo para formatar um número para pesos mexicanos

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

atalho

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

Deixe-me tentar melhorar a resposta do uKolka e talvez ajudar outras pessoas a economizar algum tempo.

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

Você deve usar Number.prototype.toLocaleString () apenas se a compatibilidade do navegador não for um problema.

Uma maneira alternativa, suportando decimais, diferentes separadores e negativos.

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

Algumas correções feitas por @Jignesh Sanghani, não se esqueça de votar neste comentário.

Eu acho que essa função cuidará de todos os problemas relacionados a esse 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;
}

Apenas para futuros googlers (ou não necessariamente 'googlers'):

Todas as soluções mencionadas acima são maravilhosas, no entanto, o RegExp pode ser uma coisa muito ruim de se usar em uma situação como essa.

Então, sim, você pode usar algumas das opções propostas ou até escrever algo primitivo, mas útil como:

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

O regexp usado aqui é bastante simples e o loop será precisamente o número de vezes necessário para concluir o trabalho.

E você pode otimizar muito melhor o código "DRYify" e assim por diante.

Ainda,

(-1234567.0987).toLocaleString();

(na maioria das situações) seria uma escolha muito melhor.

O ponto não está na velocidade de execução ou na compatibilidade entre navegadores.

Nas situações em que você deseja mostrar o número resultante ao usuário, o método .toLocaleString () fornece a você o poder de falar o mesmo idioma com o usuário do seu site ou aplicativo (qualquer que seja o idioma dele).

Esse método, de acordo com a documentação do ECMAScript, foi introduzido em 1999, e acredito que a razão disso tenha sido a esperança de que a Internet, em algum momento, conectasse pessoas em todo o mundo, portanto, eram necessárias algumas ferramentas de "internalização".

Hoje a Internet conecta todos nós, portanto, é importante lembrar que o mundo é muito mais complexo do que imaginamos e que (/ quase) todos nós estamos aqui , na Internet.

Obviamente, considerando a diversidade de pessoas, é impossível garantir a experiência do usuário perfeita para todos, porque falamos idiomas diferentes, valorizamos coisas diferentes, etc. E exatamente por isso, é ainda mais importante tentar localizar as coisas o máximo possível .

Portanto, considerando que existem alguns padrões específicos para representação de data, hora, números etc. e que temos uma ferramenta para exibir essas coisas no formato preferido pelo usuário final, não é raro e quase irresponsável não usar essa ferramenta (especialmente em situações em que queremos exibir esses dados para o usuário)?

Para mim, usar RegExp em vez de .toLocaleString () em situações como essa parece um pouco como criar um aplicativo de relógio com JavaScript e codificá-lo de maneira a exibir apenas o tempo de Praga (o que seria bastante inútil para pessoas que não vivem em Praga), embora o comportamento padrão de

new Date();

é retornar os dados de acordo com o relógio do usuário final.

Minha " verdadeira " solução apenas de expressões regulares _{para aqueles que adoram uma só palavra}

Você vê esses jogadores entusiasmados acima? Talvez você possa jogar fora disso. Aqui está o meu derrame.

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

_{Usa um  ESPAÇO FINO (U + 2009) para um separador de milhares, como o Sistema Internacional de Unidades disse na oitava edição (2006) de sua publicação “ Brochura da SI: Sistema Internacional de Unidades (SI) ” (Veja §5.3 .4.). A nona edição (2019) sugere usar um espaço para isso (ver §5.4.4.). Você pode usar o que quiser, incluindo uma vírgula.}

Vejo.

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

Como funciona?

Para uma parte inteira

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

• .replace(……, " I ") Coloque "eu"
  • /……/g em cada um
    • \B entre dois dígitos adjacentes
      • (?=……)_{VISÃO POSITIVA} cuja parte direita é
        • (\d{3})+ um ou mais pedaços de três dígitos
        • \b seguido por um não dígito, como um ponto final, o fim da string, etc.
      • (?<!……)_{OLHAR NEGATIVO,} excluindo aqueles cuja parte esquerda
        • \.\d+ é um ponto seguido de dígitos ("possui um separador decimal").

Para uma parte decimal

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

• .replace(……, " F ") Coloque "F"
  • /……/g em cada um
    • \B entre dois dígitos adjacentes
      • (?<=……)_{VISUALIZAÇÃO POSITIVA,} cuja parte esquerda é
        • \. um separador decimal
        • (\d{3})+ seguido por um ou mais blocos de três dígitos.

Classes e limites de caracteres

\d

Corresponde a qualquer dígito (algarismo arábico). Equivalente a [0-9].

Por exemplo,

• /\d/ou /[0-9]/corresponde 2em B2 is the suite number.

\b

Corresponde a um limite de palavras . Essa é a posição em que um caractere de palavra não é seguido ou precedido por outro caractere de palavra, como entre uma letra e um espaço. Observe que um limite de palavras correspondentes não está incluído na correspondência. Em outras palavras, o comprimento de um limite de palavra correspondente é zero.

Exemplos:

• /\bm/corresponde ao min moon;
• /oo\b/não corresponde ao ooin moon, porque ooé seguido por nqual é um caractere de palavra;
• /oon\b/corresponde ao oonin moon, porque ooné o fim da string, não sendo seguido por um caractere de palavra;
• /\w\b\w/ nunca corresponderá a nada, porque um caractere de palavra nunca pode ser seguido por um caractere que não seja uma palavra e um caractere de palavra.

\B

Corresponde a um limite de não palavra . Essa é uma posição em que o caractere anterior e o próximo são do mesmo tipo: ambos devem ser palavras ou ambos não devem ser palavras. Como entre duas letras ou entre dois espaços. O início e o fim de uma string são considerados não-palavras. Igual ao limite de palavras correspondidas, o limite de não palavras correspondidas também não é incluído na correspondência.

Por exemplo,

• /\Bon/corresponde onem at noon;
• /ye\B/corresponde yeem possibly yesterday.

Compatibilidade do navegador

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

Adicionei tofixed à solução do Aki143S . Esta solução usa pontos para separadores de milhares e vírgula para precisão.

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

Exemplos;

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

Muitas boas respostas já. Aqui está outro, apenas por diversão:

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

Alguns exemplos:

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