JavaScript que muestra un flotante a 2 decimales

316

Quería mostrar un número con 2 decimales.

Pensé que podría usar toPrecision(2)en JavaScript.

Sin embargo, si el número es 0.05, me sale 0.0500. Prefiero que siga igual.

Véalo en JSbin .

¿Cuál es la mejor manera de hacer esto?

Puedo pensar en codificar algunas soluciones, pero me imagino (espero) que algo como esto está incorporado.

alex
fuente

Respuestas:

560
float_num.toFixed(2);

Nota:toFixed() se redondeará o rellenará con ceros si es necesario para cumplir con la longitud especificada.

Jason McCreary
fuente
61
¡Pero devuelve cadena, no flotante!
Anwar
38
El autor de la pregunta quiere "mostrarlo", por lo que una cadena es perfecta
Christophe Marois
77
Y siempre puede usar parseFloat (float_num.toFixed (2)) para convertir la cadena de nuevo a flotante manteniendo solo dos decimales.
Hankrecords
3
@anwar no puedes redondear un flotador de manera confiable (podría decirse que puedes redondear un flotador): obtendrás algo como 0.0500 o incluso 0.0500000000001. Ver floating-point-gui.de
jmc
2
@Hankrecords lo que dijiste no es cierto. Si tengo '43 .01 'y analizo Flotar, obtengo 43.01 PERO si tengo '43 .10' obtendré 43.1: D no es lo que quiero.
Lucian Tarna
50

Podrías hacerlo con la toFixedfunción, pero tiene errores en IE . Si quieres una solución confiable, mira mi respuesta aquí .

Elias Zamaria
fuente
26
La tecnología debe desarrollarse en lugar de adaptarse a IE ... (por cierto, en el nodo js float_num.toFixed(2);funciona bien)
fider
14

No sé cómo llegué a esta pregunta, pero incluso si han pasado muchos años desde que se hizo esta pregunta, me gustaría agregar un método rápido y simple que sigo y nunca me ha decepcionado:

var num = response_from_a_function_or_something();

var fixedNum = parseFloat(num).toFixed( 2 );
panos
fuente
1
¿Por qué parseFloat()allí? Solo debe usarse si el número proviene de una cadena.
alex
3
En algunas ocasiones, cuando obtengo un valor de atributo "data-" con jquery de un elemento, si uso solo toFixed, se produce un error. parseFloat lo arregla.
panos
2
Sí, eso es lo que quise decir si venía de una cuerda . Pero usarlo siempre es un mal consejo.
alex
12

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

redondo (1.005, 2); // devuelve 1.01

redondo (1.004, 2); // devuelve 1 en lugar de 1.00

La respuesta está siguiendo este enlace: http://www.jacklmoore.com/notes/rounding-in-javascript/

Huy Nguyen
fuente
8

number.parseFloat(2) funciona pero devuelve una cadena.

Si desea conservarlo como un tipo de número, puede usar:

Math.round(number * 100) / 100

rnmalone
fuente
4

Podrías intentar mezclar Number()y toFixed().

Haga que su número objetivo se convierta en una bonita cadena con X dígitos y luego convierta la cadena formateada en un número.

Number( (myVar).toFixed(2) )


Ver ejemplo a continuación:

var myNumber = 5.01;
var multiplier = 5;
$('#actionButton').on('click', function() {
  $('#message').text( myNumber * multiplier );
});

$('#actionButton2').on('click', function() {
  $('#message').text( Number( (myNumber * multiplier).toFixed(2) ) );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button id="actionButton">Weird numbers</button>
<button id="actionButton2">Nice numbers</button>

<div id="message"></div>

George-Paul B.
fuente
Gracias por tu buena referencia.
Arman H
1

El toFixed()método formatea un número usando notación de punto fijo.

y aquí está la sintaxis

numObj.toFixed([digits])

El argumento de dígitos es opcional y, por defecto, es 0. Y el tipo de retorno es string no number. Pero puedes convertirlo a número usando

numObj.toFixed([digits]) * 1

También puede arrojar excepciones como TypeError,RangeError

Aquí está el detalle completo y la compatibilidad en el navegador.

Sunil Garg
fuente
1
let a = 0.0500
a.toFixed(2);

//output
0.05
Rizo
fuente
-1

He hecho esta función. Funciona bien pero devuelve cadena.

function show_float_val(val,upto = 2){
  var val = parseFloat(val);
  return val.toFixed(upto);
}
Syed Nurul Islam
fuente