¿Diferencia entre toFixed() y toPrecision()?

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()?

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

Referencia en w3schools: aFijo y aPrecisión

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

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

Creo que el primero te da un número fijo de lugares 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"

Es más, toPrecision rendirá notación cientifica 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, te recomiendo encarecidamente el libro “JavaScript: The Good Parts” de Douglas Crockford.

Los ejemplos hablan claro:

var A = 123.456789;

A.toFixed()      // 123
A.toFixed(0)     // 123
A.toFixed(1)     // 123.5      round up last
A.toFixed(2)     // 123.46     round up last
A.toFixed(3)     // 123.457    round up last
A.toFixed(4)     // 123.4568   round up last
A.toFixed(5)     // 123.45679  round up last
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      round up last
A.toPrecision(5)     // 123.46     round up last
A.toPrecision(6)     // 123.457    round up last
A.toPrecision(7)     // 123.4568   round up last
A.toPrecision(8)     // 123.45679  round up last
A.toPrecision(9)     // 123.456789
A.toPrecision(10)    // 123.4567890
A.toPrecision(11)    // 123.45678900

// ----------------------
// edge-case rounding
// ----------------------
var B = 999.99;
B.toFixed(0)      // 1000
B.toFixed(1)      // 1000.0
B.toFixed(2)      // 999.99
B.toFixed(3)      // 999.990

B.toPrecision(0)  // --- ERROR ----
B.toPrecision(1)  // 1e+3
B.toPrecision(2)  // 1.0e+3
B.toPrecision(3)  // 1.00e+3
B.toPrecision(4)  // 1000
B.toPrecision(5)  // 999.99
B.toPrecision(6)  // 999.990

var C = 0.99;
C.toFixed(0)      // 1
C.toFixed(1)      // 1.0
C.toFixed(2)      // 0.99
C.toFixed(3)      // 0.990

C.toPrecision(0)  // --- ERROR ----
C.toPrecision(1)  // 1
C.toPrecision(2)  // 0.99
C.toPrecision(3)  // 0.990

Creo que esto se responde mejor con un ejemplo.

Digamos que tienes 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. Intentemos 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 arreglar esto cambiando la cantidad de dígitos significativos para cada producto, pero si iteramos sobre la variedad de productos, eso podría ser complicado. usemos toFixed en cambio:

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 conjeturas involucradas, 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 que toFixed() 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