JavaScript Numbers & Math
JavaScript Number Methods
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
toFixedrounds to a number of decimal places.- It returns a string, not a number.
toString(base)converts to binary, hex and others.toPrecisioncounts 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.