JavaScript Number Methods

Numbers on the page are text

A heading, an input, and textContent all hold strings. When you show a price you convert a number to text. When you read a form you convert text back to a number. These methods do that work.

toString

value.toString() returns the decimal digits as a string. An optional base argument prints binary (2), octal (8), or hex (16).

const n = 255;
console.log(n.toString());
console.log(n.toString(2));
console.log(n.toString(16));
console.log(typeof n.toString());

document.body.textContent =
  n.toString() + " " + n.toString(2) + " " + n.toString(16);

toFixed

value.toFixed(digits) rounds to that many places after the decimal and returns a string. Prices and percentages almost always want this. (0.1 + 0.2).toFixed(2) is "0.30".

The original number is not changed. You get a new string. If you need a number again, wrap the result inNumber(...).

const price = 19.956;
console.log(price.toFixed(2));
console.log(price.toFixed(0));
console.log(typeof price.toFixed(2));
console.log((0.1 + 0.2).toFixed(2));

document.body.textContent = "$" + price.toFixed(2);

parseInt and parseFloat

parseInt(text, 10) reads an integer from the start of a string. Always pass 10 as the radix so "08" is not treated as octal in older engines. Parsing stops at the first non-digit: parseInt("42px", 10) is 42.

parseFloat(text) keeps the decimal part. There is no radix argument. Both returnNaN when the string does not start with a number.

console.log(parseInt("42", 10));
console.log(parseInt("42px", 10));
console.log(parseInt("px42", 10));
console.log(parseFloat("3.14"));
console.log(parseFloat("3.14em"));

document.body.textContent =
  parseInt("42px", 10) + " " + parseFloat("3.14em");

Number() compared with parse

Number(text) converts the whole string. Extra characters make NaN:Number("42px") is NaN, while parseInt("42px", 10) is 42. Empty string becomes 0 with Number("").

Number.isNaN and Number.isFinite

After a conversion, check the result before you use it. Number.isNaN(x) is true only whenx is actually NaN. Number.isFinite(x) is true for ordinary numbers, not NaN or Infinity.

const raw = "19.99";
const amount = Number(raw);

console.log(Number.isNaN(amount));
console.log(Number.isFinite(amount));
console.log(Number.isNaN(Number("wait")));
console.log(Number.isFinite(1 / 0));

document.body.textContent = amount.toFixed(2);

What to remember

• toString and toFixed return strings.
• parseInt(text, 10) and parseFloat read from the start of a string.
• Number(text) needs a clean numeric string.
• Guard results with Number.isFinite before you compute.

Next: arrays — ordered lists with an index and a length.