javascript - decimals - ¿Diferencia entre toFixed() y toPrecision()?

javascript truncate 2 decimals

Question

Soy nuevo en JavaScript y acabo de descubrir toFixed() y toPrecision() para redondear números. Sin embargo, no puedo entender cuál es la diferencia entre los dos.

¿Cuál es la diferencia entre number.toFixed() y number.toPrecision() ?

Answer 1

Creo que el primero te da un número fijo de decimales, mientras que el segundo te da un número fijo de dígitos significativos.

Math.PI.toFixed(2); // "3.14"
Math.PI.toPrecision(2); // "3.1"

Además, toPrecision arrojará notación científica si hay más dígitos enteros en el número que la precisión especificada.

(Math.PI * 10).toPrecision(2); // "31"
(Math.PI * 100).toPrecision(2); // "3.1e+2"

EDITAR: Ah, y si eres nuevo en JavaScript, puedo recomendar el libro " JavaScript: The Good Parts " de Douglas Crockford.

Answer 2

Creo que esto se responde mejor con un ejemplo.

Digamos que tiene los siguientes datos:

var products = [
  {
    "title": "Really Nice Pen",
    "price": 150
  },
  {
    "title": "Golf Shirt",
    "price": 49.99
  },
  {
    "title": "My Car",
    "price": 1234.56
  }
]

Desea mostrar cada uno de estos productos con el título y el precio formateado. Tratemos de usar toPrecision primero:

document.write("The price of " + products[0].title + " is $" + products[0].price.toPrecision(5));

The price of Really Nice Pen is $150.00

Se ve bien, por lo que podría pensar que esto también funcionará para los otros productos:

document.write("The price of " + products[1].title + " is $" + products[2].price.toPrecision(5));
document.write("The price of " + products[2].title + " is $" + products[2].price.toPrecision(5));

The price of Golf Shirt is $49.990
The price of My Car is $1234.6

No tan bien. Podemos solucionar esto cambiando la cantidad de dígitos significativos para cada producto, pero si estamos iterando sobre la matriz de productos que podrían ser complicados. toFixed lugar de toFixed :

document.write("The price of " + products[0].title + " is $" + products[0].price.toFixed(2));
document.write("The price of " + products[1].title + " is $" + products[2].price.toFixed(2));
document.write("The price of " + products[2].title + " is $" + products[2].price.toFixed(2));

The price of Really Nice Pen is $150.00
The price of Golf Shirt is $49.99
The price of My Car is $1234.56

Esto produce lo que esperabas. No se trata de adivinar, y no hay redondeo.

Answer 3

En ciertas circunstancias, toPrecision() devolverá la notación exponencial, mientras que toFixed() no lo hará.

Answer 4

Los ejemplos hablan claramente:

var A = 123.456789;

A.toFixed(0)     // 123
A.toFixed(1)     // 123.5
A.toFixed(2)     // 123.46
A.toFixed(3)     // 123.457
A.toFixed(4)     // 123.4568
A.toFixed(5)     // 123.45679
A.toFixed(6)     // 123.456789
A.toFixed(7)     // 123.4567890
A.toFixed(8)     // 123.45678900
A.toFixed(9)     // 123.456789000
A.toFixed(10)    // 123.4567890000
A.toFixed(11)    // 123.45678900000

A.toPrecision()      // --- ERROR --- 
A.toPrecision(0)     // --- ERROR --- 
A.toPrecision(1)     // 1e+2
A.toPrecision(2)     // 1.2e+2
A.toPrecision(3)     // 123
A.toPrecision(4)     // 123.5
A.toPrecision(5)     // 123.46
A.toPrecision(6)     // 123.457
A.toPrecision(7)     // 123.4568
A.toPrecision(8)     // 123.45679
A.toPrecision(9)     // 123.456789
A.toPrecision(10)    // 123.4567890
A.toPrecision(11)    // 123.45678900

Answer 5

Por ejemplo, consideramos la variable a como, var a = 123.45 a.toPrecision (6) La salida es 123.450 a.toFixed (6) La salida es como 123.45000000

Answer 6

Sólo:

49.99.toFixed(5)
// → "49.99000"

49.99.toPrecision(5)
// → "49.990"

Answer 7

toFixed(n) proporciona n longitud después del punto decimal; toPrecision(x) proporciona x longitud total.

Ref en w3schools: a toFixed y a toPrecision

EDITAR :
Hace un tiempo aprendí que w3schools no es exactamente la mejor fuente, pero me olvidé de esta respuesta hasta que vi el comentario de Kzh, "entusiasta". Aquí hay referencias adicionales de Mozilla Doc Center para toFixed() y para toPrecision() . Afortunadamente para todos nosotros, MDC y w3schools están de acuerdo en este caso.

Para completar, debo mencionar que toFixed() es equivalente a to toFixed(0) y toPrecision() solo devuelve el número original sin formato.