JavaScript Type Conversion: Number(), String(), Boolean(), parseInt and Coercion

Values often arrive as the wrong type. Text typed into a form is always a string, even when it looks like a number. JavaScript can convert between types explicitly (when you ask) and implicitly (automatically, sometimes surprisingly).

The problem#

const quantityFromForm = "3";   // form values are strings
console.log(quantityFromForm + 2);
console.log(quantityFromForm * 2);

32
6

+ with a string joins text, so "3" + 2 is "32". * only works on numbers, so JavaScript converts "3" to 3 first. To avoid this confusion, convert explicitly.

To a number#

console.log(Number("42"));
console.log(Number("3.75"));
console.log(Number(""));
console.log(Number("  12  "));
console.log(Number("12px"));
console.log(Number(true), Number(false), Number(null), Number(undefined));

42
3.75
0
12
NaN
1 0 0 NaN

Number() converts the whole string. Anything that is not a valid number gives NaN, but note that an empty string becomes 0, which can hide a missing value.

parseInt and parseFloat#

These read a number from the start of a string and stop at the first invalid character:

console.log(parseInt("12px", 10));
console.log(parseFloat("3.5kg"));
console.log(parseInt("42.9", 10));
console.log(parseInt("abc", 10));
console.log(parseInt("ff", 16));

12
3.5
42
NaN
255

Always pass the radix (base) 10 to parseInt to be explicit. Use parseInt/parseFloat for strings with units like "12px"; use Number when the whole string must be a number.

The unary plus +value is a short way to write Number(value): +"42" is 42.

Checking the result#

const input = "twelve";
const n = Number(input);
if (Number.isNaN(n)) {
  console.log(`"${input}" is not a number`);
}

"twelve" is not a number

To a string#

const n = 255;
console.log(String(n));
console.log(n.toString());
console.log(n.toString(2));
console.log(`${n}`);
console.log(String(null), String(undefined), String([1, 2]));

255
255
11111111
255
null undefined 1,2

toString(2) converts to binary (base 2). String() also works on null and undefined, where calling .toString() would throw an error.

To a boolean#

Boolean(value) (or !!value) converts any value to true or false:

console.log(Boolean(1), Boolean(0));
console.log(Boolean("hi"), Boolean(""));
console.log(Boolean(null), Boolean(undefined), Boolean(NaN));
console.log(Boolean([]), Boolean({}), Boolean("0"));

true false
true false
false false false
true true true

The values that become false are called falsy; everything else is truthy. The full list is in Comparisons, Truthy and Falsy. Note that empty arrays, empty objects and the string "0" are truthy.

Implicit coercion#

JavaScript converts types automatically in some operations:

console.log("5" + 1);
console.log("5" - 1);
console.log("5" * "2");
console.log(true + 1);
console.log([] + []);
console.log(1 + null);

51
4
10
2

1

• + with any string joins as text.
• -, *, / and % convert both sides to numbers.
• true becomes 1 and null becomes 0 in arithmetic.
• [] + [] is an empty string (both arrays become "").

These rules are why JavaScript has a reputation for strange results. The fix is simple: convert explicitly, and compare with ===, which never converts.

Practice#

const a = "12.5";
const b = "7.5";

const sum = Number(a) + Number(b);
console.log(sum);
console.log(`Total: ${sum}`);
console.log(a + b);

20
Total: 20
12.57.5

Key takeaway#