Formatee el número para mostrar siempre 2 lugares decimales


783

Me gustaría formatear mis números para que siempre muestren 2 decimales, redondeando donde corresponda.

Ejemplos:

number     display
------     -------
1          1.00
1.341      1.34
1.345      1.35

He estado usando esto:

parseFloat(num).toFixed(2);

Pero se muestra 1como 1, en lugar de 1.00.


2
Quiero decir que si ingreso 1 no mostrará el número como 1.00, pero si ingreso 1.345, mostrará 1.35
Varada

1
He reformulado tu pregunta a lo que creo que estabas buscando. Compruebe para asegurarse de que le he entendido correctamente.
Drudge



Respuestas:


1117
(Math.round(num * 100) / 100).toFixed(2);

Demo en vivo

Tenga en cuenta que se redondeará a 2 decimales, por lo que la entrada 1.346volverá 1.35.


66
@Kooilnc: OP quiere 1mostrarse como 1.00, y 1.341mostrarse como 1.34.
Drudge

49
No es necesario usar round () ya que toFixed () lo redondea.
Milan Babuškov

27
toFixed () lo redondea pero no olvide que devuelve una cadena ... Por lo tanto, este método solo es útil para mostrar. Si desea realizar más cálculos matemáticos en el valor redondeado, no use toFixed ().
TWright

8
Según MDN, Math.round no siempre dará resultados precisos debido a errores de redondeo. Probé esto con 1.005, que debería redondear a 1.01, pero da 1.00. Use mi respuesta para una precisión constante: stackoverflow.com/a/34796988/3549440 .
Nate

13
Toda esta respuesta podría reducirse a (+num).toFixed(2). Incluso conserva el error de redondeo en el original, vea la respuesta de Nate .
RobG

322
Number(1).toFixed(2);         // 1.00
Number(1.341).toFixed(2);     // 1.34
Number(1.345).toFixed(2);     // 1.34 NOTE: See andy's comment below.
Number(1.3450001).toFixed(2); // 1.35


1
La última línea es falsa. Probé esto en la consola de Chrome y `` Number (1.365) .toFixed (2) devuelve "1.37"
Andre

1
@Andre, Chrome 29.0.1547.57 me da 1.34expresión Number(1.345).toFixed(2).
Drew Noakes

1
toFixed hace redondeo, lo que puede ver en casi todos los números de prueba.
Andy

40
El último comentario enviado accidentalmente antes de terminar ... 1.345es un ejemplo de un número que no se puede almacenar exactamente en coma flotante, por lo que creo que la razón por la que no se redondea como se espera es que en realidad se almacena como un número ligeramente menos de 1.345 y se redondea hacia abajo. Si prueba en su lugar con, (1.34500001).toFixed(2)entonces verá que se redondea correctamente a1.35
andy

94

Esta respuesta fallará sivalue = 1.005 .

Como una mejor solución, el problema de redondeo se puede evitar utilizando números representados en notación exponencial:

Number(Math.round(1.005+'e2')+'e-2'); // 1.01

Código más limpio como lo sugiere @Kon, y el autor original:

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)

Puede agregar toFixed()al final para retener el punto decimal, por ejemplo: 1.00pero tenga en cuenta que volverá como una cadena.

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces).toFixed(decimalPlaces)

Crédito: redondeando decimales en JavaScript


13
Sorprendentemente, todos los demás aquí no pudieron ver que toFixedtiene ese problema de redondeo. Su respuesta debe ser la aceptada.
Brazo

1
Solo probé para ver si este seguía siendo el caso. sigue siendo correcto para Chrome Versión 59.0.3071.115 Su solución se redondeará por 1.005 (1.01) y se redondeará por 1.00499999 (1.00)
Artistan

jsfiddle.net/Artistan/qq895bnp/28 hay "momentos" en que toFixed funcionará, pero es bastante inconsistente. :)
Artistan

Número de sonido envolvente en parseFloat es su cadena de retorno
user889030

1
Esta es una respuesta sólida. Se me ocurren algunas mejoras: (1) VS Code (archivo TypeScript) no le gusta que Math.round () pase una cadena. (2) Hacer que el número de decimales sea dinámico (no codificado a 2). (3) toFixed () parece innecesario. Entonces, lo que se me ocurrió esNumber(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)
Kon

23
var num = new Number(14.12);
console.log(num.toPrecision(2));//outputs 14
console.log(num.toPrecision(3));//outputs 14.1
console.log(num.toPrecision(4));//outputs 14.12
console.log(num.toPrecision(5));//outputs 14.120

Eso da resultados inesperados, si su número puede ser 1.4, y 23.654, y 0, ¿qué precisión tomaría?
shinzou

2
Tenga en cuenta que el OP solicita "redondeo cuando corresponda" . toPrecisionsolo formatea el número a un número específico de lugares decimales, simplemente omite los lugares redundantes, pero no los redondea . Esto también podría ser muy útil, por supuesto, pero es importante entender la diferencia.
Boaz - Restablece a Mónica el

1
En realidad, toPrecision es redondo, según Mozilla. Prueba:(20.55).toPrecision(3) "20.6"
James L.

2
Si desea eliminar los ceros finales , conviértalos en un Número o Flotante después de usar toFixed: const formattedVal = Number(val.toFixed(2));No use toPrecision, ya que cuenta los números no decimales cuando usa el parámetro de precisión.
James L.

17

Para el redondeo más preciso, cree esta función:

function round(value, decimals) {
    return Number(Math.round(value +'e'+ decimals) +'e-'+ decimals).toFixed(decimals);
}

y úsalo para redondear a 2 decimales:

console.log("seeked to " + round(1.005, 2));
> 1.01

Gracias a Razu , este artículo y la referencia de Math.round de MDN .


1
¿Qué pasa con 1.0049999999999998934?
4esn0k

1
No va más allá de 2 dp
Stephen Adelakun

1
jsfiddle.net/Artistan/qq895bnp probado, este es el único método consistente que he visto. Gracias.
Artistan

17

Para navegadores modernos, use toLocaleString:

var num = 1.345;
num.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 });

Especifique una etiqueta de configuración regional como primer parámetro para controlar el separador decimal . Para un punto, use, por ejemplo, la configuración regional de inglés de EE. UU .:

num.toLocaleString("en-US", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

lo que da:

1,35

La mayoría de los países de Europa usan una coma como separador decimal, por lo que si, por ejemplo, usa la configuración regional sueca / sueca:

num.toLocaleString("sv-SE", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

dará:

1,35


No estoy seguro de por qué esto es rechazado, parecía funcionar bien para mí. ¡Agregue un comentario si tiene la intención de votar si algo está mal con esto!
John Culviner

13

La respuesta más simple:

var num = 1.2353453;
num.toFixed(2); // 1.24

Ejemplo: http://jsfiddle.net/E2XU7/


11
Bueno, toFixedya se sugirió en stackoverflow.com/a/13292833/218196 . ¿Qué información adicional proporciona su pregunta?
Felix Kling

esa respuesta no incluye funcionalidad redonda, mi respuesta incluye tho.
macio.

8
Uh Es exactamente la misma respuesta. Llamando toFixeda un número.
Felix Kling

1
Correcto, la misma función, pero el resultado de esa respuesta es engañoso, simplemente lo rectifiqué expresando la funcionalidad redonda.
macio.Jun

La pregunta dice: "... redondeando donde corresponda". Su respuesta no implica redondeo.
Chris

12

Una solución mucho más genérica para redondear a N lugares

function roundN(num,n){
  return parseFloat(Math.round(num * Math.pow(10, n)) /Math.pow(10,n)).toFixed(n);
}


console.log(roundN(1,2))
console.log(roundN(1.34,2))
console.log(roundN(1.35,2))
console.log(roundN(1.344,2))
console.log(roundN(1.345,2))
console.log(roundN(1.344,3))
console.log(roundN(1.345,3))
console.log(roundN(1.3444,3))
console.log(roundN(1.3455,3))

Output

1.00
1.34
1.35
1.34
1.35
1.344
1.345
1.344
1.346

1
Esta respuesta falla con ciertos números cercanos a 0, roundN(-3.4028230607370965e+38,2)regresa en "-3.4028230607370965e+38"lugar del esperado 0.00
Ferrybig

@Ferrybig interesante i ll probar los números que usted ha mencionado y pensar en una solución, gracias a las pruebas
PirateApp

1
Tenga en cuenta que el número mencionado anteriormente no debe mostrar cero, sino un número enorme, esto fue solo un error en mi cerebro. Pero todavía no funciona, ya que todavía no muestra 2 decimales
Ferrybig


9

Si ya está usando jQuery, puede mirar usando el formato de número jQuery complemento .

El complemento puede devolver números formateados como una cadena, puede establecer separadores decimales y de miles, y puede elegir el número de decimales para mostrar.

$.number( 123, 2 ); // Returns '123.00'

También puede obtener jQuery Number Format de GitHub .


11
Es excesivo usar un complemento "solo para tener una parte decimal de longitud fija".
Lashae

99
@Lashae, claro, si eso es todo lo que quieres hacer. Publiqué esto en caso de que el OP o alguien más quisiera la funcionalidad adicional que proporciona el complemento también.
Sam Sehnert

si el cartel de la pregunta hubiera agregado la etiqueta jQuery, por supuesto;)
fullstacklife

7

¿Es esto lo que quieres decir?

function showAsFloat(num, n){
      return !isNaN(+num) ? (+num).toFixed(n || 2) : num;
}

document.querySelector('#result').textContent = 
    [
     'command                      | result',
     '-----------------------------------------------',
     'showAsFloat(1);              | ' + showAsFloat(1),
     'showAsFloat(1.314);          | ' + showAsFloat(1.314),
     'showAsFloat(\'notanumber\')    | ' + showAsFloat('notanumber'),
     'showAsFloat(\'23.44567\', 3)   | ' + showAsFloat('23.44567', 3),
     'showAsFloat(2456198, 5)      | ' + showAsFloat('2456198', 5),
     'showAsFloat(0);              | ' + showAsFloat(0)
    ].join('\n');
<pre id="result"></pre>


6

Convierta un número en una cadena, manteniendo solo dos decimales:

var num = 5.56789;
var n = num.toFixed(2);

El resultado de n será:

5.57

4

¿Buscas piso?

var num = 1.42482;
var num2 = 1;
var fnum = Math.floor(num).toFixed(2);
var fnum2 = Math.floor(num2).toFixed(2);
alert(fnum + " and " + fnum2); //both values will be 1.00

44
No creo que quiera redondear al entero más cercano.
Drudge

sí, no estaba seguro de la descripción, pero solo lo estaba lanzando en caso de que fuera
samwise

3
function currencyFormat (num) {
    return "$" + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

console.info(currencyFormat(2665));   // $2,665.00
console.info(currencyFormat(102665)); // $102,665.00

3

Aquí también hay una función genérica que puede formatear cualquier número de decimales:

function numberFormat(val, decimalPlaces) {

    var multiplier = Math.pow(10, decimalPlaces);
    return (Math.round(val * multiplier) / multiplier).toFixed(decimalPlaces);
}

3

Cuando se requiere un formato específico, debe escribir su propia rutina o utilizar una función de biblioteca que haga lo que necesita. La funcionalidad básica de ECMAScript suele ser insuficiente para mostrar números formateados.

Aquí encontrará una explicación detallada del redondeo y el formato: http://www.merlyn.demon.co.uk/js-round.htm#RiJ

Como regla general, el redondeo y el formato solo deben realizarse como un último paso antes de la salida. Hacerlo antes puede introducir errores inesperadamente grandes y destruir el formato.


Hay momentos en los que sacudo la cabeza a mi elección para involucrarme tan profundamente en esta plataforma JS / Ecma. :( "Cuando se requiere un formato específico, debe escribir su propia rutina o utilizar una función de biblioteca que haga lo que necesita. La funcionalidad básica de ECMAScript suele ser insuficiente para mostrar números formateados". pero porque ese hecho existe. Simplemente triste. ¡
Apúntate

2

function number_format(string,decimals=2,decimal=',',thousands='.',pre='R$ ',pos=' Reais'){
  var numbers = string.toString().match(/\d+/g).join([]);
  numbers = numbers.padStart(decimals+1, "0");
  var splitNumbers = numbers.split("").reverse();
  var mask = '';
  splitNumbers.forEach(function(d,i){
    if (i == decimals) { mask = decimal + mask; }
    if (i>(decimals+1) && ((i-2)%(decimals+1))==0) { mask = thousands + mask; }
    mask = d + mask;
  });
  return pre + mask + pos;
}
var element = document.getElementById("format");
var money= number_format("10987654321",2,',','.');
element.innerHTML = money;
#format{
display:inline-block;
padding:10px;
border:1px solid #ddd;
background:#f5f5f5;
}
<div id='format'>Test 123456789</div>


2

Simplemente encuentre este hilo más largo, a continuación está mi solución:

parseFloat(Math.round((parseFloat(num * 100)).toFixed(2)) / 100 ).toFixed(2)

Avísame si alguien puede hacer un agujero


2


2
Este código es suficiente para cumplir con sus requisitos parseFloat(num.toFixed(2))
kva

1

No nos estás dando la imagen completa.

javascript:alert(parseFloat(1).toFixed(2))muestra 1.00 en mi navegador cuando lo pego en la barra de ubicación. Sin embargo, si le haces algo después, se revertirá.

var num = 2
document.getElementById('spanId').innerHTML=(parseFloat(num).toFixed(2)-1)


shows 1 and not 1.00

Funciona en FF 50, Chrome 49 e IE 8
Florian Straub

1
var quantity = 12;

var import1 = 12.55;

var total = quantity * import1;

var answer = parseFloat(total).toFixed(2);

document.write(answer);

1

Tuve que decidir entre las conversiones parseFloat () y Number () antes de poder hacer la llamada a toFixed (). Aquí hay un ejemplo de un número que formatea la entrada del usuario después de la captura.

HTML:

<input type="number" class="dec-number" min="0" step="0.01" />

Controlador de eventos:

$('.dec-number').on('change', function () {
     const value = $(this).val();
     $(this).val(value.toFixed(2));
});

El código anterior dará como resultado la excepción TypeError. Tenga en cuenta que aunque el tipo de entrada html es "número", la entrada del usuario es en realidad un tipo de datos de "cadena". Sin embargo, la función toFixed () solo se puede invocar en un objeto que es un Número.

Mi código final se vería de la siguiente manera:

$('.dec-number').on('change', function () {
     const value = Number($(this).val());
     $(this).val(value.toFixed(2));
});

La razón por la que prefiero emitir con Number () vs. parseFloat () es porque no tengo que realizar una validación adicional ni para una cadena de entrada vacía, ni para el valor NaN. La función Number () manejaría automáticamente una cadena vacía y la convertiría a cero.


0

Si me gusta:

var num = 12.749;
parseFloat((Math.round(num * 100) / 100).toFixed(2)); // 123.75

Redondea el número con 2 puntos decimales, luego asegúrate de analizarlo parseFloat() para devolver Número, no Cadena, a menos que no te importe si es Cadena o Número.


Supongo que si el propósito era mostrar con 2 decimales de precisión, analizar el flotador lo alterará. Por ejemploparseFloat("1.00") // 1
Stijn de Witt el

0

Extender objeto matemático con método de precisión

Object.defineProperty(Math, 'precision',{
   value: function (value,precision,type){
             var v = parseFloat(value),
                 p = Math.max(precision,0)||0,
                 t = type||'round';
              return (Math[t](v*Math.pow(10,p))/Math.pow(10,p)).toFixed(p);
          }
    });

console.log(
    Math.precision(3.1,3), // round 3 digits 
    Math.precision(0.12345,2,'ceil'), // ceil 2 digits
    Math.precision(1.1) // integer part
)



0

Aquí hay otra solución para redondear solo usando piso, es decir, asegurarse de que la cantidad calculada no sea mayor que la cantidad original (a veces necesaria para las transacciones):

Math.floor(num* 100 )/100;

0

Puedes probar este código:

    function FormatNumber(number, numberOfDigits = 2) {
        try {
            return new Intl.NumberFormat('en-US').format(parseFloat(number).toFixed(2));
        } catch (error) {
            return 0;
        }
    }

    var test1 = FormatNumber('1000000.4444');
    alert(test1); // 1,000,000.44

    var test2 = FormatNumber(100000000000.55555555, 4);
    alert(test2); // 100,000,000,000.56

0

Pruebe el siguiente código:

function numberWithCommas(number) { 

   var newval = parseFloat(Math.round(number * 100) / 100).toFixed(2);

   return newval.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}


-3

Así es como resuelvo mi problema:

parseFloat(parseFloat(floatString).toFixed(2));
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.