numero - separador de miles y decimales javascript

Cómo imprimir un número con comas como miles de separadores en JavaScript (30)

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

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

Estoy intentando imprimir un entero en JavaScript con comas como miles de separadores. Por ejemplo, quiero mostrar el número 1234567 como "1,234,567". ¿Cómo voy a 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 forma 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.

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 comprobé en unos pocos números y funcionó.

El separador de miles se puede insertar de forma amigable internacionalmente utilizando el objeto Intl del navegador:

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

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

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

El siguiente código utiliza 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: Solución menor para resolver el problema cuando num <0. Ver https://jsfiddle.net/runsun/p5tqqvs3/

Escribí esto antes de tropezar en este post. No hay expresiones regulares y realmente se puede 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>

Esta es una variación de la respuesta de @mikez302, pero modificada para admitir números con decimales (según la retroalimentación de @ neu-rah 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] : ""); }

Gracias a todos por sus respuestas. He construido algunas de las respuestas para hacer una solución más "única para todos".

El primer fragmento de código agrega una función que imita number_format() PHP al prototipo Number. Si estoy formateando un número, por lo general quiero decimales para que la función tome el número de decimales que se muestran. Algunos países usan comas como el decimal y decimales como el 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ía 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 las 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 puedes 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

Me sorprende que nadie mencione Number.prototype.toLocaleString . Se implementó en JavaScript 1.5 (que se introdujo en 1999), por lo que es básicamente compatible con los principales navegadores.

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

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

Si quieres algo diferente, Numeral.js podría ser interesante.

Permítame tratar de mejorar la answer y tal vez ayudar a otros a ahorrar tiempo.

Utilice 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 ir con Number.prototype.toLocaleString solo si la compatibilidad de su navegador no es un problema.

Puede utilizar este procedimiento para formatear la moneda que necesite.

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, entonces podría valer la pena agregar tiny accounting.js que maneja muchos casos de borde 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

Sugiero usar el number_format() phpjs.org number_format()

ACTUALIZACIÓN 02/13/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á el violín como un fragmento de pila con salida ligeramente modificada:

.as-console-wrapper { max-height: 100% !important; }

Utilicé 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:

const numberWithCommas = (x) => { return x.toString().replace(//B(?=(/d{3})+(?!/d))/g, ","); }

Esto es todo lo que realmente necesitas saber.

@Neils Bom preguntó cómo funciona la expresión regular. Mi explicación es algo larga. No encaja en los comentarios y no sé dónde ponerlo, así que lo estoy haciendo aquí. Si alguien tiene alguna otra sugerencia sobre dónde colocarla, hágamelo saber.

La expresión regular utiliza 2 aserciones de búsqueda anticipada: una positiva para buscar cualquier punto en la cadena que tenga un múltiplo de 3 dígitos seguidos, y una aserció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 "789" es un múltiplo de 3 dígitos, "678" es un múltiplo de 3 dígitos, "567", etc.). La afirmación negativa comprueba que el múltiplo de 3 dígitos no tiene ningún dígito después. "789" tiene un período después de él, por lo que es exactamente un múltiplo de 3 dígitos, por lo que la coma va allí. "678" es un múltiplo de 3 dígitos pero tiene un "9" despué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". "456789" es de 6 dígitos, que es un múltiplo de 3, por lo que antes va una coma. "345678" es un múltiplo de 3, pero tiene un "9" después, por lo que no hay coma. Y así. La "/ B" evita que la expresión regular ponga una coma al principio de la cadena.

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

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

NumberFormat

Función nativa de JS. Compatible con IE11, Edge, las últimas versiones 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

Number.prototype.toLocaleString() hubiera sido impresionante si se proporcionara de forma nativa por todos los navegadores (Safari) .

Revisé todas las otras respuestas, pero nadie pareció rellenarlo. Aquí hay una poc hacia eso, que en realidad es una combinación de las dos primeras respuestas; si toLocaleString funciona, 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));

Usando la 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 Number.prototype.toLocaleString

Utilizando Intl.NumberFormat ()

ref NumberFormat

DEMO AQUÍ

Actuación

http://jsben.ch/sifRd

Aquí está mi intento:

EDITAR: Añadido en decimales

function splitMille(n, separator = '','') { // Cast to string let num = (n + '''') // Test for and get any decimals (the later operations won''t support them) let decimals = '''' if (//./.test(num)) { // This regex grabs the decimal point as well as the decimal numbers decimals = num.replace(/^.*(/..*)$/, ''$1'') } // Remove decimals from the number string num = num.replace(decimals, '''') // Reverse the number string through Array functions .split('''').reverse().join('''') // Split into groups of 1-3 characters (with optional supported character "-" for negative numbers) .match(/[0-9]{1,3}-?/g) // Add in the mille separator character and reverse back .join(separator).split('''').reverse().join('''') // Put the decimals back and output the formatted number return `${num}${decimals}` } let testA = splitMille(1234) let testB = splitMille(-1234) let testC = splitMille(123456.789) let testD = splitMille(9007199254740991) let testE = splitMille(1000.0001) console.log(''Results!/n/tA: %s/n/tB: %s/n/tC: %s/n/tD: %s/n/tE: %s'', testA, testB, testC, testD, testE)

Aquí hay una buena solución con menos codificación ...

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

Creo que esta función se hará cargo de todos los problemas relacionados con este problema.

La solución de @ user1437663 es genial.

Quien realmente entiende la solución está siendo preparado para entender expresiones regulares complejas.

Una pequeña mejora para hacerlo más legible:

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

El patrón comienza con / B para evitar usar una coma al principio de una palabra. Curiosamente, el patrón se devuelve vacío porque / B no avanza el "cursor" (lo mismo se aplica a $ ).

A O / B le siguen recursos menos conocidos, pero es una característica poderosa de las expresiones regulares de Perl.

Pattern1 (? = (Pattern2) ).

La magia es que lo que está entre paréntesis ( Patrón2 ) es un patrón que sigue el patrón anterior ( Patrón1 ) pero sin avanzar el cursor y tampoco es parte del patrón devuelto. Es una especie de patrón futuro. ¡Esto es similar cuando alguien mira hacia adelante pero realmente no camina!

En este caso, pattern2 es

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

Significa 3 dígitos (una o más veces) seguidos por el final de la cadena ($)

Finalmente, el método Reemplazar cambia todas las apariciones del patrón encontrado (cadena vacía) para la coma. Esto solo sucede en los casos en que la pieza restante es un múltiplo de 3 dígitos (casos en los que el cursor futuro llega al final del origen).

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.abs(Math.ceil(number)).toString() , i = n.length % 3 , f = n.substr(0, i) ; if(number < 0) f = ''-'' + f; for(;i<n.length;i+=3) { if(i!=0) f+=ts; f+=n.substr(i,3); } if(dp > 0) f += ds + number.toFixed(dp).split(''.'')[1] return f; }

Agregué tofixed a la solución de Aki143S . Esta solución utiliza puntos para miles de separadores y coma 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

Creo que tu solución es una de las más cortas que he visto para esto. No creo que haya ninguna función estándar de JavaScript para hacer este tipo de cosas, así que probablemente estés solo.

Revisé las especificaciones de CSS 3 para ver si es posible hacer esto en CSS, pero a menos que quieras cada dígito por sí solo <span>, no creo que sea posible.

Encontré un proyecto en Google Code que parecía prometedor: flexible-js-formatting . No lo he usado, pero parece bastante flexible y tiene pruebas unitarias utilizando JsUnit . El desarrollador también tiene muchos mensajes (aunque antiguos) sobre este tema.

Asegúrese de considerar a los usuarios internacionales: muchas naciones usan un espacio como separador y usan la coma para separar el decimal de la parte integral del número.

He adaptado su código para trabajar en TextBox (tipo de entrada = "texto") para que podamos ingresar y eliminar dígitos en tiempo real sin perder el cursor. También funciona si seleccionas el rango cuando eliminas. Y puedes usar las flechas y los botones de inicio / fin libremente.
Gracias por ahorrar mi tiempo!

//function controls number format as "1,532,162.3264321" function numberWithCommas(x) { var e = e || window.event; if (e.keyCode >= ''35'' && e.keyCode <= ''40'') return; //skip arrow-keys var selStart = x.selectionStart, selEnd = x.selectionEnd; //save cursor positions var parts = x.value.toString().split("."); var part0len = parts[0].length; //old length to check if new '','' would be added. Need for correcting new cursor position (+1 to right). //if user deleted '','' - remove previous number instead (without selection) if (x.selectionLength == 0 && (e.keyCode == 8 || e.keyCode == 46)) {//if pressed 8-backspace or 46-delete button var delPos = parts[0].search(//d{4}/); if (delPos != -1) {//if found 4 digits in a row ('','' is deleted) if (e.keyCode == 8) {//if backspace flag parts[0] = parts[0].slice(0, selStart - 1) + parts[0].slice(selEnd, parts[0].length); selEnd--; if (selStart > selEnd) selStart = selEnd; } else { parts[0] = parts[0].slice(0, selStart) + parts[0].slice(selEnd + 1, parts[0].length); selStart++; if (selEnd < selStart) selEnd = selStart; } } } var hasMinus = parts[0][0] == ''-''; parts[0] = (hasMinus ? ''-'' : '''') + parts[0].replace(/[^/d]*/g, ""); //I''d like to clear old '','' to avoid things like 1,2,3,5,634.443216 parts[0] = parts[0].replace(//B(?=(/d{3})+(?!/d))/g, ","); //sets '','' between each 3 digits if (part0len < parts[0].length) { //move cursor to right if added new '','' selStart++; selEnd++; } else if (part0len > parts[0].length) { //..or if removed last one '','' selStart--; selEnd--; } x.value = parts.join("."); x.setSelectionRange(selStart, selEnd); //restoring cursor position } function saveSelectionLength(x) { x.selectionLength = x.selectionEnd - x.selectionStart; }

Para usar esto solo agregue dos eventos - onKeyUp y onKeyDown

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

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"

Para mí, la mejor respuesta es usar toLocaleString como dijeron algunos miembros. Si desea incluir el símbolo ''$'', añada opciones de idioma y tipo. Aquí hay un ejemplo para dar formato a 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"})

Pensé que compartiría un pequeño truco que estoy usando para el formato de grandes números. En lugar de insertar comas o espacios, inserto un espacio vacío pero visible entre los "miles". Esto hace que miles sean fácilmente visibles, pero permite copiar / pegar la entrada en el formato original, sin comas / espacios.

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

Con este CSS:

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

Vea un ejemplo de JSFiddle.

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

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

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.