Come posso formattare i numeri usando JavaScript?

Voglio formattare i numeri usando JavaScript.

Per esempio:

10 => 10.00 100 => 100.00 1000 => 1,000.00 10000 => 10,000.00 100000 => 100,000.00 

Se si desidera utilizzare il codice incorporato, è ansible utilizzare toLocaleString() con minimumFractionDigits , sebbene la compatibilità del browser per le opzioni estese su toLocaleString() sia limitata .

 var n = 100000; var value = n.toLocaleString( undefined, // leave undefined to use the browser's locale, // or use a string like 'en-US' to override it. { minimumFractionDigits: 2 } ); console.log(value); // In en-US, logs '100,000.00' // In de-DE, logs '100.000,00' // In hi-IN, logs '1,00,000.00' 

A causa degli errori trovati da JasperV – buoni punti! – Ho riscritto il mio vecchio codice. Immagino di averlo usato solo per valori positivi con due cifre decimali.

A seconda di ciò che stai cercando di ottenere, potresti volere un arrotondamento o meno, quindi qui ci sono due versioni divise in quella divisione.

Primo, con arrotondamento.

Ho introdotto il metodo toFixed() in quanto gestisce meglio l’arrotondamento a cifre decimali specifiche in modo accurato ed è ben supportato. Tuttavia, rallenta le cose.

Questa versione stacca ancora il decimale, ma usando un metodo diverso rispetto a prima. La parte w|0 rimuove il decimale. Per ulteriori informazioni su questo, questa è una buona risposta . Questo lascia quindi il numero intero rimanente, lo memorizza in k e quindi lo sottrae nuovamente dal numero originale, lasciando da solo il decimale.

Inoltre, se dobbiamo prendere in considerazione i numeri negativi, dobbiamo fare un ciclo while (saltando tre cifre) finché non colpiamo b . Questo è stato calcolato per essere 1 quando si tratta di numeri negativi per evitare di inserire qualcosa come -,100.00

Il resto del ciclo è lo stesso di prima.

 function formatThousandsWithRounding(n, dp){ var w = n.toFixed(dp), k = w|0, b = n < 0 ? 1 : 0, u = Math.abs(wk), d = (''+u.toFixed(dp)).substr(2, dp), s = ''+k, i = s.length, r = ''; while ( (i-=3) > b ) { r = ',' + s.substr(i, 3) + r; } return s.substr(0, i + 3) + r + (d ? '.'+d: ''); }; 

Nello snippet seguente puoi modificare i numeri per metterti alla prova.

 function formatThousandsWithRounding(n, dp){ var w = n.toFixed(dp), k = w|0, b = n < 0 ? 1 : 0, u = Math.abs(wk), d = (''+u.toFixed(dp)).substr(2, dp), s = ''+k, i = s.length, r = ''; while ( (i-=3) > b ) { r = ',' + s.substr(i, 3) + r; } return s.substr(0, i + 3) + r + (d ? '.'+d: ''); }; var dp; var createInput = function(v){ var inp = jQuery('').val(v); var eql = jQuery(' = '); var out = jQuery('
').css('display', 'inline-block'); var row = jQuery('
'); row.append(inp).append(eql).append(out); inp.keyup(function(){ out.text(formatThousandsWithRounding(Number(inp.val()), Number(dp.val()))); }); inp.keyup(); jQuery('body').append(row); return inp; }; jQuery(function(){ var numbers = [ 0, 99.999, -1000, -1000000, 1000000.42, -1000000.57, -1000000.999 ], inputs = $(); dp = jQuery('#dp'); for ( var i=0; i
   

Soluzione breve:

 var n = 1234567890; String(n).replace(/(.)(?=(\d{3})+$)/g,'$1,') // "1,234,567,890" 

Uso

 num = num.toFixed(2); 

Dove 2 è il numero di posizioni decimali

Modificare:

Ecco la funzione per formattare il numero come vuoi

 function formatNumber(number) { number = number.toFixed(2) + ''; x = number.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return x1 + x2; } 

Sorce: http://www.mredkj.com

Sui browser che supportano la specifica dell’API di internazionalizzazione ECMAScript® 2016 (ECMA-402) , è ansible utilizzare un’istanza Intl.NumberFormat :

 var nf = Intl.NumberFormat(); var x = 42000000; console.log(nf.format(x)); // 42,000,000 in many locales // 42.000.000 in many other locales 
 if (typeof Intl === "undefined" || !Intl.NumberFormat) { console.log("This browser doesn't support Intl.NumberFormat"); } else { var nf = Intl.NumberFormat(); var x = 42000000; console.log(nf.format(x)); // 42,000,000 in many locales // 42.000.000 in many other locales } 

Penso che con questo jQuery-numberformatter potresti risolvere il tuo problema.

 $("#salary").blur(function(){ $(this).parseNumber({format:"#,###.00", locale:"us"}); $(this).formatNumber({format:"#,###.00", locale:"us"}); }); 

Ovviamente, si presume che non si abbiano problemi con l’utilizzo di jQuery nel proprio progetto.

Usa la funzione Numero su toFixed e questa funzione per aggiungere le virgole.

 function addCommas(nStr) { nStr += ''; var x = nStr.split('.'); var x1 = x[0]; var x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return x1 + x2; } n = 10000; r = n.toFixed(2); //10000.00 addCommas(r); // 10,000.00 

http://www.mredkj.com/javascript/numberFormat.html

 function numberWithCommas(x) { x=String(x).toString(); var afterPoint = ''; if(x.indexOf('.') > 0) afterPoint = x.substring(x.indexOf('.'),x.length); x = Math.floor(x); x=x.toString(); var lastThree = x.substring(x.length-3); var otherNumbers = x.substring(0,x.length-3); if(otherNumbers != '') lastThree = ',' + lastThree; return otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree + afterPoint; } console.log(numberWithCommas(100000)); console.log(numberWithCommas(10000000)); 

Questo è un articolo sul tuo problema. L’aggiunta di un separatore di migliaia non è integrata in JavaScript, quindi dovrai scrivere la tua funzione in questo modo (esempio tratto dalla pagina collegata):

 function addSeperator(nStr){ nStr += ''; x = nStr.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return x1 + x2; } 

Oppure puoi utilizzare la libreria sugar.js e il metodo di formattazione :

format (place = 0, thousand = ‘,’, decimal = ‘.’) Formatta il numero in una stringa leggibile. Se il posto non è definito, determinerà automaticamente il luogo. migliaia è il carattere utilizzato per il separatore delle migliaia. decimale è il carattere utilizzato per il punto decimale.

Esempi:

 (56782).format() > "56,782" (56782).format(2) > "56,782.00" (4388.43).format(2, ' ') > "4 388.43" (4388.43).format(3, '.', ',') > "4.388,430" 

Se stai cercando una formattazione con limite a tre cifre significative, ad esempio:

 1,23,45,67,890.123 

Uso:

 number.toLocaleString('en-IN'); 

Esempio di lavoro:

 let number = 1234567890.123; document.write(number.toLocaleString('en-IN')); 

Questo ti porterà i valori separati da virgola e aggiungerà la notazione fissa alla fine.

  nStr="1000"; nStr += ''; x = nStr.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } commaSeperated = x1 + x2 + ".00"; alert(commaSeperated); 

fonte

Permettetemi di lanciare la mia soluzione qui. Ho commentato ogni riga per facilità di lettura e ho anche fornito alcuni esempi, quindi potrebbe sembrare grande.

 function format(number) { var decimalSeparator = "."; var thousandSeparator = ","; // make sure we have a string var result = String(number); // split the number in the integer and decimals, if any var parts = result.split(decimalSeparator); // if we don't have decimals, add .00 if (!parts[1]) { parts[1] = "00"; } // reverse the string (1719 becomes 9171) result = parts[0].split("").reverse().join(""); // add thousand separator each 3 characters, except at the end of the string result = result.replace(/(\d{3}(?!$))/g, "$1" + thousandSeparator); // reverse back the integer and replace the original integer parts[0] = result.split("").reverse().join(""); // recombine integer with decimals return parts.join(decimalSeparator); } document.write("10 => " + format(10) + "
"); document.write("100 => " + format(100) + "
"); document.write("1000 => " + format(1000) + "
"); document.write("10000 => " + format(10000) + "
"); document.write("100000 => " + format(100000) + "
"); document.write("100000.22 => " + format(100000.22) + "
");

Se utilizzi jQuery, puoi utilizzare il formato o i plug-in di formato numerico .

  function formatNumber1(number) { var comma = ',', string = Math.max(0, number).toFixed(0), length = string.length, end = /^\d{4,}$/.test(string) ? length % 3 : 0; return (end ? string.slice(0, end) + comma : '') + string.slice(end).replace(/(\d{3})(?=\d)/g, '$1' + comma); } function formatNumber2(number) { return Math.max(0, number).toFixed(0).replace(/(?=(?:\d{3})+$)(?!^)/g, ','); } 

Fonte: http://jsperf.com/number-format

Questa è una versione 3 volte più veloce della risposta accettata. Non crea array ed evita la creazione di oggetti e la concatenazione di stringhe per numeri interi alla fine. Questo potrebbe essere utile se si esegue il rendering di molti valori, ad esempio in una tabella.

 function addThousandSeparators(number) { var whole, fraction var decIndex = number.lastIndexOf('.') if (decIndex > 0) { whole = number.substr(0, decIndex) fraction = number.substr(decIndex) } else { whole = number } var rgx = /(\d+)(\d{3})/ while (rgx.test(whole)) { whole = whole.replace(rgx, '$1' + ',' + '$2') } return fraction ? whole + fraction : whole }