Difference between toFixed() and toPrecision()?

Question

I'm new to JavaScript and just discovered toFixed() and toPrecision() to round numbers. However, I can't figure out what the difference between the two is.

What is the difference between number.toFixed() and number.toPrecision()?

Answer 1

I think this is best answered with an example.

Let's say you have the following data:

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

You want to display each of these products with the title and formatted price. Let's try using toPrecision first:

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

The price of Really Nice Pen is $150.00

Looks good, so you might think this will work for the other products as well:

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

Not so good. We can fix this by changing the number of significant digits for each product, but if we're iterating over the array of products that could be tricky. Let's use toFixed instead:

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

This produces what you expected. There is no guess work involved, and there is no rounding.

Answer 2

For example , we consider the variable a as, var a = 123.45 a.toPrecision(6) The output is 123.450 a.toFixed(6) The output is like 123.450000 // 6 digits after decimal point

Answer 3

toFixed(n) provides n length after the decimal point; toPrecision(x) provides x total length.

Ref at w3schools: toFixed and toPrecision

EDIT:
I learned a while back that w3schools isn't exactly the best source, but I forgot about this answer until I saw kzh's, uh, "enthusiastic" comment. Here are additional refs from Mozilla Doc Center for toFixed() and for toPrecision(). Fortunately for all of us, MDC and w3schools agree with each other in this case.

For completeness, I should mention that toFixed() is equivalent to toFixed(0) and toPrecision() just returns the original number with no formatting.

Answer 4

I believe that the former gives you a fixed number of decimal places, whereas the latter gives you a fixed number of significant digits.

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

Furthermore, toPrecision will yield scientific notation if there are more integer digits in the number than the specified precision.

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

EDIT: Oh, and if you are new to JavaScript, I can highly recommend the book "JavaScript: The Good Parts" by Douglas Crockford.

Answer 5

Under certain circumstances, toPrecision() will return exponential notation, whereas toFixed() will not.

Answer 6

Examples speak clearly:

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