Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Numbers & Math

JavaScript Number Methods

Written by Published

Number methods format and convert numbers, always returning a new value.

toFixed is the one you will use most, for money.

Be aware that it returns a string, not a number.

Example

Example

javascript

const price = 19.567;

console.log(price.toFixed(2));
console.log(typeof price.toFixed(2));

The output is 19.57 then string.

The Main Methods

toFixed(n) rounds to n decimal places and returns a string.

toString() converts to a string, optionally in another base.

toPrecision(n) keeps n significant digits.

Syntax

Syntax

javascript

number.toFixed(2);
number.toString();

These are called on the number itself.

Money Formatting

toFixed(2) keeps trailing zeros, which prices need.

Example

Example

javascript

console.log((5).toFixed(2));
console.log((5.1).toFixed(2));
console.log((5.456).toFixed(2));

The output is 5.00, 5.10, 5.46.

It Returns a String

This catches people out when they carry on doing arithmetic.

Convert back with Number if you need to.

Example

Example

javascript

const price = 19.567;
const rounded = price.toFixed(2);

console.log(rounded + 1);
console.log(Number(rounded) + 1);

The first joined the values; the second added them.

Converting to Other Bases

toString takes an optional base from 2 to 36.

Example

Example

javascript

const n = 255;

console.log(n.toString());
console.log(n.toString(2));
console.log(n.toString(16));

The output is 255, 11111111, ff.

Significant Digits

toPrecision counts all digits, not just the decimals.

Example

Example

javascript

const n = 123.456;

console.log(n.toPrecision(4));
console.log(n.toPrecision(2));

The output is 123.5 then 1.2e+2.

Calling on a Literal

A dot straight after a whole number is read as a decimal point.

Brackets or a variable avoid the problem.

Example

Example

javascript

const n = 5;

console.log(n.toFixed(2));
console.log((5).toFixed(2));
console.log(5..toFixed(2));

All three work; the first two are the readable ones.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Number Methods</title>
</head>
<body>

  <h1>Number Methods</h1>

  <p id="out"></p>

  <script>
    const price = 19.567;
    const total = price * 3;

    document.getElementById("out").innerHTML =
      "Price: " + price.toFixed(2) +
      "<br>Total: " + total.toFixed(2) +
      "<br>In binary: " + (255).toString(2) +
      "<br>In hex: " + (255).toString(16);
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try more decimals:

Change toFixed(2) to toFixed(4) and compare.

Important Points

  • toFixed rounds to a number of decimal places.
  • It returns a string, not a number.
  • toString(base) converts to binary, hex and others.
  • toPrecision counts significant digits.
  • Wrap a number literal in brackets before calling a method.

Conclusion

toFixed is the everyday tool for displaying money.

Remembering that it returns a string avoids a classic bug.

For proper currency display, the formatting lesson has a better option.

PreviousJavaScript NumbersNextJavaScript parseInt and parseFloat