Elías Zamaría
Estoy tratando de imprimir un número entero en JavaScript con comas como separadores de miles. 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 funcionara con flotadores, pero eso no es necesario. No es necesario que sea específico del lugar para decidir entre puntos y comas.
uKolka
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;
console.log(n.toLocaleString()); // "34,523,453.345"
También funciona en Node.js a partir de v0.12 mediante la inclusión de internacional
Si quieres algo diferente, Numeral.js podría ser interesante
-
@csigrist Buenos puntos, pero no es tan malo como parece. La velocidad depende del navegador. En FF u Opera funciona bien. Sin embargo, apesto en Chrome. En cuanto a los ceros:
var number = 123456.000; number.toLocaleString('en-US', {minimumFractionDigits: 2}); "123,456.00"
Sin embargo, esas opciones no funcionan en FF o Safari.– uKolka
23 de julio de 2013 a las 15:50
-
La diferencia de rendimiento puede o no ser un problema, según el contexto. Si se usa para una tabla gigante de 1000 resultados, será más importante, pero si solo se usa para un solo valor, la diferencia es insignificante. Pero la ventaja es que tiene en cuenta la ubicación, por lo que alguien en Europa vería 34.523.453.345 o 34 523 453,345. Esto sería más importante en un sitio con visitantes de muchos países.
– T Nguyen
12 de febrero de 2014 a las 21:06
-
Impresionante. Finalmente una respuesta con función nativa. Y qué más, este se muestra correctamente en diferentes países con diferentes separadores (en República Checa escribimos
X XXX XXX,YYY
).– Tomáš Zato
7 julio 2014 a las 17:02
-
Actualización para googlers:
toLocaleString
funciona en Node.js a partir de v0.12 a través de la inclusión de Intl.– srobinson
2 de noviembre de 2015 a las 16:59
-
@MSC deberías probar
parseInt("1234567", 10).toLocaleString('en-US', {minimumFractionDigits: 2})
onew Number("1234567").toLocaleString('en-US', {minimumFractionDigits: 2})
en cambio. No funciona porque lo usa en una cadena, no en un número.– uKolka
22 de febrero de 2016 a las 16:29
-
La compatibilidad con los navegadores siempre se menciona en la parte inferior de cada página de MDN, a la que me he vinculado.
– vsync
19 de marzo de 2016 a las 16:38
-
básico
toLocaleString
funciona en safari, las opciones no– dandavis
21 de junio de 2016 a las 9:16
-
Como otros han señalado,
number.toLocaleString
no funciona para todos los navegadores, ni en PhantomJS. Number.toLocaleString() no aplica el formato apropiado– mayatrón
9 sep 2016 a las 20:37
-
la
toLocaleString
La solución probablemente también debería incluir la configuración regional deseada, por lo quetoLocaleString("en")
, porque el patrón inglés usa comas. Sin embargo, sitoLocaleString()
sin indicador de configuración regional se ejecuta en Francia, producirá puntos en lugar de comas porque eso es lo que se usa para separar miles localmente.-Mike ‘Pomax’ Kamermans
17/11/2016 a las 18:05
-
minimumFractionDigits: 2
también se puede agregar para garantizar un número fijo de lugares decimales stackoverflow.com/questions/31581011/…– SharpC
17 de enero de 2018 a las 14:35
kerry jones
Sugiero usar phpjs.org ‘s formato numérico()
function number_format(number, decimals, dec_point, thousands_sep) {
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 violín que incluye pruebas automatizadas.
Actualización 26/11/2017
Aquí está ese violín como un Fragmento de pila con una salida ligeramente modificada:
function number_format(number, decimals, dec_point, thousands_sep) {
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;
}
-
@Andrew S: solo 1 persona lo ha marcado. Funciona, lo he usado en mi propio código muchas veces. Tampoco es mi código (ni mis pruebas), hice referencia al sitio del que proviene, que es un sitio muy conocido. Tal vez tengan una versión actualizada) ya que el código que está viendo tiene 3 años.
–Kerry Jones
19 de junio de 2013 a las 18:03
-
@ernix: el operador solicitó JavaScript, esa respuesta le di es JavaScript. Esta es una interpretación de JavaScript de una función de PHP.
–Kerry Jones
23 de enero de 2014 a las 6:04
-
@ernix: funciona exactamente como se esperaba con el ejemplo que dio el OP. Pongo un violín para que puedas ver.
–Kerry Jones
13 de febrero de 2014 a las 17:12
-
@ernix – Está bien, pero el punto es que sí exactamente lo que pide el OP. Es de otro sitio (no mantenido por mí, y lo he dicho anteriormente), y cuando le doy las variables adecuadas, funciona exactamente como se indica. Si cree que se trata de un error, comuníquese con phpjs.org o vea si tienen una versión actualizada.
–Kerry Jones
13 de febrero de 2014 a las 20:06
-
Esto es perfecto. Seguí buscando y solo encontré bibliotecas increíblemente infladas que ni siquiera me permitían cambiar los miles y el separador decimal.
– Hissvard
17 de marzo de 2021 a las 9:12
usuario1437663
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 de que 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] : "");
}
-
@Andrew S: solo 1 persona lo ha marcado. Funciona, lo he usado en mi propio código muchas veces. Tampoco es mi código (ni mis pruebas), hice referencia al sitio del que proviene, que es un sitio muy conocido. Tal vez tengan una versión actualizada) ya que el código que está viendo tiene 3 años.
–Kerry Jones
19 de junio de 2013 a las 18:03
-
@ernix: el operador solicitó JavaScript, esa respuesta le di es JavaScript. Esta es una interpretación de JavaScript de una función de PHP.
–Kerry Jones
23 de enero de 2014 a las 6:04
-
@ernix: funciona exactamente como se esperaba con el ejemplo que dio el OP. Pongo un violín para que puedas ver.
–Kerry Jones
13 de febrero de 2014 a las 17:12
-
@ernix – Está bien, pero el punto es que sí exactamente lo que pide el OP. Es de otro sitio (no mantenido por mí, y lo he dicho anteriormente), y cuando le doy las variables adecuadas, funciona exactamente como se indica. Si cree que se trata de un error, comuníquese con phpjs.org o vea si tienen una versión actualizada.
–Kerry Jones
13 de febrero de 2014 a las 20:06
-
Esto es perfecto. Seguí buscando y solo encontré bibliotecas increíblemente infladas que ni siquiera me permitían cambiar los miles y el separador decimal.
– Hissvard
17 de marzo de 2021 a las 9:12
Tutankamón
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
-
¿Qué hace esto que mi respuesta no? La expresión regular se ve ligeramente diferente, pero parece que debería hacer lo mismo.
– Elías Zamaría
19 de agosto de 2014 a las 22:14
-
Esto es elegante. Exactamente lo que estaba buscando.
– tradicional
7 oct 2014 a las 18:23
-
De blog.tompawlak.org/number-currency-formatting-javascript? Problema conocido: formatNumber(0.123456) = 0.123,456 La ausencia de lookbehind en JS dificulta arreglarlo con una expresión regular elegante.
– Vlad
20 de enero de 2015 a las 2:48
-
esto permite caracteres como abcdef, etc., que deberían estar restringidos.
– Debashis
26 de mayo de 2016 a las 13:09
-
123456789.123456789.toString().replace(/(\d)(?=(\d{3})+\.)/g, ‘$1,’) => 123,456,789.12345679
– Kenberkeley
24/07/2017 a las 10:30
Número(x).toLocaleString()
-Boffin
9 de marzo de 2015 a las 23:04
Vale la pena señalar que
Number.prototype.toLocaleString
todavía no funciona en Safari, en 2016. En lugar de formatear el número, simplemente lo devuelve, no arroja ningún error. Tener la palma de la mano más grande hoy como resultado de eso… #goodworkApple– aendra
10 de marzo de 2016 a las 11:21
@atomless ¿En serio? tengo
Version 61.0.3163.100 (Official Build) (64-bit)
y cuando digo(2982932323).toLocaleString()
la respuesta es"2,982,932,323"
. Mi configuración regional predeterminada es en-US. tal vez deberías intentarlo(2982932323).toLocaleString('en-US')
.– Ray Toal
2 de noviembre de 2017 a las 2:46
Parece que esta debería ser la respuesta aprobada… Intl.NumberFormat(‘en-US’).format(count) Ver desarrollador.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
-chad steele
28 oct 2019 a las 23:19
Number.prototype.toLocaleString
funciona en Safari 14, en 2021.– Martijn
21 de abril de 2021 a las 11:36