Pregunta ¿Cómo puedo formatear números usando JavaScript?


Quiero formatear números usando JavaScript.

Por ejemplo:

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

74
2018-04-20 13:36


origen


Respuestas:


Si desea usar el código incorporado, puede usar toLocaleString() con minimumFractionDigits, aunque la compatibilidad del navegador para las opciones extendidas en toLocaleString()  está limitado.

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'

Si está utilizando Node.js, necesitará  npm install el intl paquete.


113
2018-05-07 16:05



Debido a los errores encontrados por JasperV, ¡buenos puntos! - He reescrito mi código anterior. Supongo que solo utilicé esto para valores positivos con dos decimales.

Dependiendo de lo que intente lograr, puede querer redondear o no, así que aquí hay dos versiones divididas en esa división.

Primero arriba, con redondeo.

He introducido el toFixed() método, ya que maneja mejor el redondeo a lugares decimales específicos con precisión y es un buen soporte. Sin embargo, desacelera las cosas.

Esta versión aún separa el decimal, pero usando un método diferente al anterior. los w|0 parte elimina el decimal. Para obtener más información sobre eso, este es un buena respuesta. Esto deja el entero restante, lo almacena en k y luego lo resta nuevamente del número original, dejando el decimal por sí mismo.

Además, si tenemos que tener en cuenta los números negativos, necesitamos repetir el ciclo (saltándonos tres dígitos) hasta que golpeemos b. Se ha calculado que es 1 cuando se trata de números negativos para evitar poner algo así como -,100.00

El resto del ciclo es el mismo que antes.

function formatThousandsWithRounding(n, dp){
  var w = n.toFixed(dp), k = w|0, b = n < 0 ? 1 : 0,
      u = Math.abs(w-k), 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: '');
};

En el siguiente fragmento, puede editar los números para probarse a sí mismo.

function formatThousandsWithRounding(n, dp){
  var w = n.toFixed(dp), k = w|0, b = n < 0 ? 1 : 0,
      u = Math.abs(w-k), 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('<input class="input" />').val(v);
  var eql = jQuery('<span>&nbsp;=&nbsp;</span>');
  var out = jQuery('<div class="output" />').css('display', 'inline-block');
  var row = jQuery('<div class="row" />');
  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<numbers.length; i++ ) {
    inputs = inputs.add(createInput(numbers[i]));
  }
  dp.on('input change', function(){
    inputs.keyup();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dp" type="range" min="0" max="5" step="1" value="2" title="number of decimal places?" />

Ahora la otra versión, sin redondeo.

Esto toma una ruta diferente e intenta evitar el cálculo matemático (ya que esto puede introducir redondeos o errores de redondeo). Si no desea redondear, solo está tratando con las cosas como una cadena, es decir, 1000.999 convertido a dos decimales solo será 1000.99 y no 1001.00.

Este método evita el uso .split() y RegExp() sin embargo, ambos son muy lentos en comparación. Y mientras aprendí algo nuevo de la respuesta de Michael sobre toLocaleString, También me sorprendí al saber que es, de alguna manera, el método más lento de todos (al menos en Firefox y Chrome, Mac OSX).

Utilizando lastIndexOf() encontramos el punto decimal posiblemente existente, y desde allí todo lo demás es más o menos lo mismo. Ahorre para el relleno con 0 extra donde sea necesario. Este código está limitado a 5 decimales. Fuera de mi prueba, este era el método más rápido.

var formatThousandsNoRounding = function(n, dp){
  var e = '', s = e+n, l = s.length, b = n < 0 ? 1 : 0,
      i = s.lastIndexOf('.'), j = i == -1 ? l : i,
      r = e, d = s.substr(j+1, dp);
  while ( (j-=3) > b ) { r = ',' + s.substr(j, 3) + r; }
  return s.substr(0, j + 3) + r + 
    (dp ? '.' + d + ( d.length < dp ? 
        ('00000').substr(0, dp - d.length):e):e);
};

var formatThousandsNoRounding = function(n, dp){
  var e = '', s = e+n, l = s.length, b = n < 0 ? 1 : 0,
      i = s.lastIndexOf('.'), j = i == -1 ? l : i,
      r = e, d = s.substr(j+1, dp);
  while ( (j-=3) > b ) { r = ',' + s.substr(j, 3) + r; }
  return s.substr(0, j + 3) + r + 
  	(dp ? '.' + d + ( d.length < dp ? 
    	('00000').substr(0, dp - d.length):e):e);
};

var dp;
var createInput = function(v){
  var inp = jQuery('<input class="input" />').val(v);
  var eql = jQuery('<span>&nbsp;=&nbsp;</span>');
  var out = jQuery('<div class="output" />').css('display', 'inline-block');
  var row = jQuery('<div class="row" />');
  row.append(inp).append(eql).append(out);
  inp.keyup(function(){
    out.text(formatThousandsNoRounding(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<numbers.length; i++ ) {
    inputs = inputs.add(createInput(numbers[i]));
  }
  dp.on('input change', function(){
    inputs.keyup();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dp" type="range" min="0" max="5" step="1" value="2" title="number of decimal places?" />

Lo actualizaré en breve con una demostración de fragmento en la página, pero por ahora aquí hay un violín:

https://jsfiddle.net/bv2ort0a/2/



Método antiguo

¿Por qué usar RegExp para esto? - No use un martillo cuando haga un palillo, es decir, use manipulación de cuerdas:

var formatThousands = function(n, dp){
  var s = ''+(Math.floor(n)), d = n % 1, i = s.length, r = '';
  while ( (i -= 3) > 0 ) { r = ',' + s.substr(i, 3) + r; }
  return s.substr(0, i + 3) + r + 
    (d ? '.' + Math.round(d * Math.pow(10, dp || 2)) : '');
};

ensayar

formatThousands( 1000000.42 );

Primera tira de decimal:

s = '1000000', d = ~ 0.42

Trabaja hacia atrás desde el final de la cadena:

',' + '000'
',' + '000' + ',000'

Finalice agregando el prefijo sobrante y el sufijo decimal (con redondeo a dp no. puntos decimales):

'1' + ',000,000' + '.42'

fiddlesticks

http://jsfiddle.net/XC3sS/


26
2017-12-12 14:01



Solución corta:

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

25
2017-09-02 13:50



Utilizar

num = num.toFixed(2);

Donde 2 es el número de decimales

Editar:

Aquí está la función para formatear el número como quieras

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: www.mredkj.com


23
2018-04-20 13:39



En navegadores compatibles con Especificación de la API de internacionalización de ECMAScript 2016 (ECMA-402), puedes usar un Intl.NumberFormat ejemplo:

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
}


14
2017-08-18 07:31



Creo con esto jQuery-numberformatter podrías resolver tu problema

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

Por supuesto, esto supone que no tienes problemas con el uso de jQuery en tu proyecto.


7
2018-04-20 13:43



Use la función Número toFixed y esta función para agregar las comas.

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


4
2018-04-20 13:39



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

Salida

1,00,000
   1,00,00,000


3
2018-01-12 15:34



Esta es un artículo sobre tu problema Agregar un separador de miles no está incorporado en JavaScript, por lo que tendrá que escribir su propia función de esta manera (ejemplo tomado de la página vinculada):

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

3
2018-04-20 13:42



O podrías usar el sugar.js biblioteca, y el formato método:

formato (lugar = 0, miles = ',', decimal = '.') Formatea el número para una cadena legible. Si el lugar no está definido, automáticamente   determinar el lugar miles es el personaje utilizado para los miles   separador. decimal es el caracter usado para el punto decimal.

Ejemplos:

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

2
2018-06-30 08:32



Si está buscando un formato con un límite de tres dígitos significativos, por ejemplo:

1,23,45,67,890.123

Utilizar:

number.toLocaleString('en-IN');

Ejemplo de trabajo:

let number = 1234567890.123; 

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

Probado en Chrome v60.0.3112.113

Fuente: Number.prototype.toLocaleString () | MDN


2
2017-09-11 18:13