Estoy tratando de imprimir un número entero en JavaScript con comas como miles de separadores. Por ejemplo, quiero mostrar el número 1234567 como "1,234,567". ¿Cómo haría para hacer esto?

Así es como lo estoy haciendo:

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

¿Hay una manera más simple o más elegante de hacerlo? Sería bueno si también funciona con flotadores, pero eso no es necesario. No es necesario que sea específico de la localidad para decidir entre puntos y comas.

Usé la idea de la respuesta de Kerry, pero la simplifiqué ya que solo estaba buscando algo simple para mi propósito específico. Aquí esta lo que hice:

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

La expresión regular utiliza 2 aserciones anticipadas:

• uno positivo para buscar cualquier punto en la cadena que tenga un múltiplo de 3 dígitos seguidos,
• una afirmación negativa para asegurarse de que ese punto solo tenga exactamente un múltiplo de 3 dígitos. La expresión de reemplazo pone una coma allí.

Por ejemplo, si lo pasa 123456789.01, la afirmación positiva coincidirá con cada punto a la izquierda del 7 (ya que 789es un múltiplo de 3 dígitos, 678es un múltiplo de 3 dígitos 567, etc.). La afirmación negativa verifica que el múltiplo de 3 dígitos no tenga ningún dígito después. 789tiene un punto después, por lo que es exactamente un múltiplo de 3 dígitos, por lo que una coma va allí. 678es un múltiplo de 3 dígitos pero tiene un 9después, por lo que esos 3 dígitos son parte de un grupo de 4 y una coma no va allí. Del mismo modo para 567. 456789es de 6 dígitos, que es un múltiplo de 3, por lo que una coma va antes de eso. 345678es un múltiplo de 3, pero tiene un 9después, por lo que no va ninguna coma. Y así. los\B evita que la expresión regular ponga una coma al comienzo de la cadena.

@ neu-rah mencionó que esta función agrega comas en lugares indeseables si hay más de 3 dígitos después del punto decimal. Si esto es un problema, puede usar esta función:

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 señaló que ahora que JavaScript se ha quedado atrás ( información de soporte ), se puede resolver en la propia expresión 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*)es una mirada hacia atrás negativa que dice que la coincidencia no puede ir precedida de un .cero o más dígitos. La mirada hacia atrás negativa es más rápida que la solución splity join( comparación ), al menos en V8.

Me sorprende que nadie haya mencionado Number.prototype.toLocaleString . Está implementado en JavaScript 1.5 (que se introdujo en 1999), por lo que básicamente es compatible con todos los principales navegadores.

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

También funciona en Node.js a partir de v0.12 mediante la inclusión de Intl

Solo preste atención a que esta función devuelve una cadena, no un número.

Si quieres algo diferente, Numeral.js puede ser interesante.

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

⚠ Tenga en cuenta que javascript tiene un valor entero 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 no es compatible):

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

Por lo que verifiqué (al menos Firefox), ambos son más o menos iguales en cuanto al rendimiento.

Sugiero usar el número_formato de 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);
}

ACTUALIZACIÓN 13/02/14

La gente ha estado informando que esto no funciona como se esperaba, así que hice un JS Fiddle que incluye pruebas automatizadas.

Actualización 26/11/2017

Aquí está ese violín como un fragmento de pila con salida ligeramente 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 es una variación de la respuesta de @ mikez302, pero modificada para admitir números con decimales (según los comentarios de @ neu-rah that numberWithCommas (12345.6789) -> "12,345.6,789" en lugar 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 expresión 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 ()

Utilizando 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 EN AQUÍ

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

Actuación

http://jsben.ch/sifRd

Intl.NumberFormat

Función nativa de JS. Compatible con IE11, Edge, la última versión de Safari, Chrome, Firefox, Opera, Safari en iOS y Chrome en Android.

var number = 3500;

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

Gracias a todos por sus respuestas. Me basé en algunas de las respuestas para hacer una solución más "única para todos".

El primer fragmento agrega una función que imita PHP 's number_format()al prototipo Number. Si estoy formateando un número, generalmente quiero lugares decimales para que la función tome el número de lugares decimales para mostrar. Algunos países usan comas como decimales y decimales como separador de miles, por lo que la función permite establecer estos separadores.

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

Usarías esto de la siguiente manera:

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

Descubrí que a menudo necesitaba recuperar el número para operaciones matemáticas, pero parseFloat convierte 5,000 a 5, simplemente tomando la primera secuencia de valores enteros. Así que creé mi propia función de conversión flotante y la agregué 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));
}

Ahora puede usar ambas funciones de la siguiente manera:

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

Estoy bastante impresionado por la cantidad de respuestas que tiene esta pregunta. Me gusta la respuesta de uKolka :

n.toLocaleString()

Pero desafortunadamente, en algunos lugares como el español, no funciona (en mi humilde opinión) como se espera para números inferiores a 10,000:

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

Da 1000y no 1.000.

Consulte toLocaleString que no funciona en números inferiores a 10000 en todos los navegadores para saber por qué.

Así que tuve que usar la respuesta de Elias Zamaria eligiendo el carácter separador de miles correcto:

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

Este funciona bien como una línea para ambos entornos locales que usan ,o .como separador de miles y comienza a funcionar desde 1,000 en todos los casos.

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

Da 1.000con un contexto local español.

Si desea tener un control absoluto sobre la forma en que se formatea un número, también puede intentar lo siguiente:

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)

Da 1,234.57.

Este no necesita una expresión regular. Funciona ajustando el número a la cantidad deseada de decimales con toFixedprimero, luego dividiéndolo alrededor del punto decimal .si hay uno. El lado izquierdo se convierte en una matriz de dígitos que se invierte. Luego se agrega un separador de miles cada tres dígitos desde el inicio y el resultado se invierte nuevamente. El resultado final es la unión de las dos partes. El signo del número de entrada se elimina conMath.abs primero y luego se vuelve a colocar si es necesario.

No es de una sola línea, pero no es mucho más largo y se convierte fácilmente en una función. Se han agregado variables para mayor claridad, pero esas pueden ser sustituidas por sus valores deseados si se conocen de antemano. Puede usar las expresiones que usan toLocaleStringcomo una forma de encontrar los caracteres correctos para el punto decimal y el separador de miles para la localización actual (tenga en cuenta que estos requieren un Javascript más moderno).

Creo que esta es la expresión regular más corta que lo hace:

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

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

Lo revisé en algunos números y funcionó.

Number.prototype.toLocaleString()habría sido increíble si hubiera sido proporcionado de forma nativa por todos los navegadores (Safari) .

Verifiqué todas las demás respuestas, pero nadie pareció llenarlo. Aquí hay un poc hacia eso, que en realidad es una combinación de las dos primeras respuestas; si toLocaleStringfunciona lo usa, si no lo hace usa una función 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));

El separador de miles se puede insertar de manera internacional utilizando el Intlobjeto del navegador :

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

Consulte el artículo de MDN sobre NumberFormat para obtener más información; puede especificar el comportamiento de la configuración regional o el valor predeterminado del usuario. Esto es un poco más infalible porque respeta las diferencias locales; Muchos países usan puntos para separar los dígitos, mientras que una coma denota los decimales.

Intl.NumberFormat aún no está disponible en todos los navegadores, pero funciona en los últimos Chrome, Opera e IE. La próxima versión de Firefox debería ser compatible. Webkit no parece tener una línea de tiempo para la implementación.

Puede usar este procedimiento para formatear la moneda que necesita.

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

Para más información puedes acceder a este enlace.

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

si está tratando con valores de moneda y formateando mucho, puede valer la pena agregar un pequeño Accounting.js que maneja muchos casos extremos y localización:

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

El siguiente código usa el escaneo de caracteres, por lo que no hay expresiones regulares.

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

Muestra un rendimiento prometedor: http://jsperf.com/number-formatting-with-commas/5

2015.4.26: corrección menor para resolver el problema cuando num <0. Ver https://jsfiddle.net/runsun/p5tqqvs3/

Aquí hay una función simple que inserta comas para miles de separadores. Utiliza funciones de matriz en lugar de 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('');
};

Enlace CodeSandbox con ejemplos: https://codesandbox.io/s/p38k63w0vq

Utilice este código para manejar el formato de moneda para la India. El código del país se puede cambiar para manejar la moneda de otro país.

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

// Use it.

formatter.format(amount);

salida:

3,50,256.95

También puede usar el constructor Intl.NumberFormat . Aquí sabrás como podrás hacerlo.

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

Escribí este antes de tropezar con esta publicación. Sin expresiones regulares y realmente puedes entender el 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(".");
}

EDITAR: la función solo funciona con un número positivo. por ejemplo:

var number = -123123231232;
formatNumber(number)

Salida: "123,123,231,232"

Pero responder el toLocaleString()método de la pregunta anterior solo resuelve el problema.

var number = 123123231232;
    number.toLocaleString()

Salida: "123,123,231,232"

¡Animar!

Mi respuesta es la única respuesta que reemplaza completamente a jQuery con una alternativa mucho más sensata:

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

Esta solución no solo agrega comas, sino que también se redondea al centavo más cercano en caso de que ingrese una cantidad como la $(1000.9999)que obtendrá $ 1,001.00. Además, el valor que ingrese puede ser un número o una cadena; No importa.

Si está tratando con dinero, pero no desea que se muestre un signo de dólar principal en la cantidad, también puede agregar esta función, que usa la función anterior pero elimina el $:

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

Si estás no se trata de dinero, y tienen diferentes requisitos de formato decimal, he aquí una función más 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, y por cierto, el hecho de que este código no funcione en alguna versión antigua de Internet Explorer es completamente intencional. Intento romper IE en cualquier momento que pueda detectar que no es compatible con los estándares modernos.

Recuerde que el elogio excesivo, en la sección de comentarios, se considera fuera de tema. En cambio, solo colócame con votos positivos.

Para mí, la mejor respuesta es usar toLocaleString como dijeron algunos miembros. Si desea incluir el símbolo '$' simplemente agregue las opciones de idioma y tipo. Aquí hay un ejemplo para formatear un número a pesos mexicanos

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

atajo

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

Déjame intentar mejorar la respuesta de uKolka y tal vez ayudar a otros a ahorrar algo de tiempo.

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>

Debe usar Number.prototype.toLocaleString () solo si la compatibilidad de su navegador no es un problema.

Una forma alternativa, soportando decimales, diferentes separadores y 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;
}

Algunas correcciones de @Jignesh Sanghani, no olviden votar su comentario.

Creo que esta función se ocupará de todos los problemas relacionados con este 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 para futuros Googlers (o no necesariamente 'Googlers'):

Todas las soluciones mencionadas anteriormente son maravillosas, sin embargo, RegExp podría ser muy malo para usar en una situación como esa.

Entonces, sí, puede usar algunas de las opciones propuestas o incluso escribir algo primitivo pero ú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

La expresión regular que se usa aquí es bastante simple y el ciclo irá exactamente la cantidad de veces que se necesita para hacer el trabajo.

Y puede optimizarlo mucho mejor, código "DRYify", etc.

Todavía,

(-1234567.0987).toLocaleString();

(en la mayoría de las situaciones) sería una opción mucho mejor.

El punto no está en la velocidad de ejecución o en la compatibilidad entre navegadores.

En situaciones en las que desea mostrar el número resultante al usuario, el método .toLocaleString () le brinda superpoderes para hablar el mismo idioma con el usuario de su sitio web o aplicación (cualquiera que sea su idioma).

Este método de acuerdo con la documentación de ECMAScript se introdujo en 1999, y creo que la razón fue la esperanza de que Internet en algún momento conecte a personas de todo el mundo, por lo que se necesitaban algunas herramientas de "internalización".

Hoy Internet nos conecta a todos, por lo tanto, es importante recordar que el mundo es mucho más complejo de lo que podríamos imaginar y que (/ casi) todos estamos aquí , en Internet.

Obviamente, teniendo en cuenta la diversidad de personas, es imposible garantizar una experiencia de usuario perfecta para todos porque hablamos diferentes idiomas, valoramos cosas diferentes, etc. Y exactamente por esto, es aún más importante tratar de localizar las cosas tanto como sea posible. .

Entonces, teniendo en cuenta que hay algunos estándares particulares para la representación de fecha, hora, números, etc. y que tenemos una herramienta para mostrar esas cosas en el formato preferido por el usuario final, no es tan raro y casi irresponsable no hacerlo. utilizar esa herramienta (especialmente en situaciones en las que queremos mostrar estos datos al usuario)

Para mí, usar RegExp en lugar de .toLocaleString () en una situación como esa suena un poco como crear una aplicación de reloj con JavaScript y codificarlo de tal manera que muestre solo la hora de Praga (lo cual sería bastante inútil para personas que no viven en Praga) a pesar de que el comportamiento predeterminado de

new Date();

es devolver los datos de acuerdo con el reloj del usuario final.

Mi solución " verdadera " de expresiones regulares solo _{para esos fanáticos}

¿Ves a esos entusiastas jugadores arriba? Tal vez puedas jugar golf. Aquí está mi derrame cerebral.

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

_{Utiliza un  ESPACIO DELGADO (U + 2009) para un separador de miles, como dijo el Sistema Internacional de Unidades en la octava edición (2006) de su publicación " Folleto SI: El Sistema Internacional de Unidades (SI) " (Ver §5.3 .4.) La novena edición (2019) sugiere utilizar un espacio para ello (Ver §5.4.4.). Puede usar lo que quiera, incluida una coma.}

Ver.

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 una parte entera

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

• .replace(……, " I ") Poner "yo"
  • /……/g en cada uno de
    • \B el intermedio de dos dígitos adyacentes
      • (?=……)_{LOOKAHEAD POSITIVO} cuya parte correcta es
        • (\d{3})+ uno o más fragmentos de tres dígitos
        • \b seguido de un no dígito, como un punto, el final de la cadena, etc.
      • (?<!……)_{MIRADA NEGATIVA DETRÁS} excluyendo aquellos cuya parte izquierda
        • \.\d+ es un punto seguido de dígitos ("tiene un separador decimal").

Para una parte decimal

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

• .replace(……, " F ") Poner "F"
  • /……/g en cada uno de
    • \B el intermedio de dos dígitos adyacentes
      • (?<=……)_{MIRADA POSITIVA DETRÁS} cuya parte izquierda es
        • \. un separador decimal
        • (\d{3})+ seguido de uno o más fragmentos de tres dígitos.

Clases de personajes y límites

\d

Coincide con cualquier dígito (número arábigo). Equivalente a [0-9].

Por ejemplo,

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

\b

Coincide con un límite de palabra . Esta es la posición en la que un carácter de palabra no es seguido o precedido por otro carácter de palabra, como entre una letra y un espacio. Tenga en cuenta que un límite de palabra coincidente no está incluido en la coincidencia. En otras palabras, la longitud de un límite de palabra coincidente es cero.

Ejemplos:

• /\bm/coincide con el men moon;
• /oo\b/no coincide con el ooin moon, porque ooes seguido por nun carácter de palabra;
• /oon\b/coincide con oonin moon, porque oones el final de la cadena, por lo tanto, no va seguido de un carácter de palabra;
• /\w\b\w/ nunca coincidirá con nada, porque un carácter de palabra nunca puede ser seguido por un carácter que no sea de palabra y otro de palabra.

\B

Coincide con un límite que no es de palabra . Esta es una posición donde el carácter anterior y el siguiente son del mismo tipo: ambos deben ser palabras o ambos deben ser no palabras. Tal como entre dos letras o entre dos espacios. El principio y el final de una cadena se consideran no palabras. Igual que el límite de palabras coincidentes, el límite de palabras no coincidentes tampoco se incluye en la coincidencia.

Por ejemplo,

• /\Bon/coincide onen at noon;
• /ye\B/partidos yeen possibly yesterday.

Compatibilidad del navegador

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

Agregué tofixed a la solución de Aki143S . Esta solución utiliza puntos para miles de separadores y comas para la precisión.

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

Ejemplos;

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

Muchas buenas respuestas ya. Aquí hay otro, solo por diversión:

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

Algunos ejemplos:

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