¿Diferencia entre toFixed () y toPrecision ()?

Soy nuevo en JavaScript y acabo de descubrir toFixed()y toPrecision()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()?

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

Ref. En w3schools: toFixed y toPrecision

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

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

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, toPrecisionproducirá 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.

Los ejemplos hablan claramente:

var A = 123.456789;

A.toFixed()      // 123
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()      // 123.456789 
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

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 con formato. Intentemos usar toPrecisionprimero:

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 arreglar esto cambiando la cantidad de dígitos significativos para cada producto, pero si estamos iterando sobre la variedad de productos, eso podría ser complicado. Usemos en su toFixedlugar:

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 hay trabajo de adivinanzas involucrado, y no hay redondeo.

Sólo:

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

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

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

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.450000 // 6 dígitos después del punto decimal

Ambas toPrecision()y toFixed()son funciones diseñadas para formatear un número antes de imprimirlo. Entonces ambos devuelven Stringvalores.

Hay una excepción Si utiliza estas funciones en un literal de número negativo , debido a la precedencia del operador, se devuelve un número. Lo que esto significa es que toFixed()o toPrecision()devolverá una cadena primero, y luego el -operador menos convertirá la cadena de nuevo a un Número como un valor negativo. Consulte a continuación para ver un ejemplo.

toPrecision()devuelve una Stringrepresentación del objeto Número en notación de punto fijo o exponencial redondeada a dígitos significativos. Entonces, si especifica que desea una precisión de 1, devuelve el primer número significativo junto con la notación científica para indicar las potencias de 10 o los 0 anteriores antes de su punto decimal si el número significativo es <0.

const num1 = 123.4567;

// if no arguments are passed, it is similar to converting the Number to String
num1.toPrecision();   // returns "123.4567

// scientific notation is used when you pass precision count less than total
// number of digits left of the period
num1.toPrecision(2);  // returns "1.2e+2"

// last digit is rounded if precision is less than total significant digits
num1.toPrecision(4);  // returns "123.5"
num1.toPrecision(5);  // returns "123.46"

const largeNum = 456.789;
largeNum.toPrecision(2);  // returns "4.6e+2"

// trailing zeroes are added if precision is > total digits of the number or float
num1.toPrecision(9);  // returns "123.456700"

const num2 = 123;
num2.toPrecision(4);  // returns "123.0"

const num3 = 0.00123;
num3.toPrecision(4);  // returns "0.001230"
num3.toPrecision(5);  // returns "0.0012300"

// if the number is < 1, precision is by the significant digits
num3.toPrecision(1);  // returns "0.001"

toFixed()devuelve una Stringrepresentación del objeto Number en notación de punto fijo, redondeado hacia arriba. Esta función solo se preocupa por los números de punto decimal

const num1 = 123.4567;

// if no argument is passed, the fractions are removed
num1.toFixed();  // returns "123"

// specifying an argument means you the amount of numbers after the decimal point
num1.toFixed(1);  // returns "123.5"
num1.toFixed(3);  // returns "123.457"
num1.toFixed(5);  // returns "123.45670"
num1.toFixed(7);  // returns "123.4567000"

// trying to operator on number literals
2.34.toFixed(1);  // returns "2.3"
2.toFixed(1);     // returns SyntaxError
(2).toFixed(1);   // returns "2.0"
(2.34e+5).toFixed(1);  // returns "234000.0"

Mencioné anteriormente una excepción en la que el uso de estas funciones en literales de números negativos devolverá un número y no una cadena debido a la precedencia del operador. Aquí hay unos ejemplos:

// Note: these are returning as Number
// toPrecision()
-123.45.toPrecision();  // returns -123.45
-123.45.toPrecision(2);  // returns -120
-123.45.toPrecision(4);  // returns -123.5
-2.34e+2.toPrecision(1);  // returns -200
-0.0456.toPrecision(1);  // returns -0.05
-0.0456.toPrecision(6);  // returns -0.0456

// toFixed()
-123.45.toFixed();  // returns -123.45
-123.45.toFixed(1);  // returns -123.5
-123.45.toFixed(4);  // returns -123.45
-0.0456.toFixed(1);  // returns -0
-0.0456.toFixed(6);  // -0.0456

Dato curioso: hay ceros con signo como se ve desde -0.0456.toFixed(1)

Ver: ¿Son +0 y -0 iguales?