Explicit conversion

A number that a person types into a field on a page reaches the program as a string. The string "42" looks like a number but stays a string, and "42" === 42 gives false. To calculate with such a value, you turn it into a number:

const text = "42";
console.log(typeof text); // string
console.log(typeof Number(text)); // number
console.log(Number(text) === 42); // true

Let's walk through the program line by line:

1. typeof text prints string: the variable holds text of two characters.
2. typeof Number(text) prints number: the call already returned a number.
3. Number(text) === 42 gives true, because now both the type and the value match.

The call Number(text) returned the number 42, while the variable text itself stayed a string. When a change of type is written in the code, it is called explicit conversion.

Remember the exchange office from the lesson on comparison. Explicit conversion is like walking up to the exchange counter: you ask to change a string into a number yourself and get the result in your hands. The analogy differs from life in one thing. At an exchange office you hand over the banknote, while here the string text stays with you, and a new value appears next to it.

The Number function

Number(x) turns a value of any type into a number. With strings it works like this:

• it skips spaces at the edges of a string: Number(" 42 ") gives 42;
• an empty string gives 0;
• it understands a fraction too: Number("3.5") is 3.5;
• if the string holds anything besides a number, the result is NaN.

true gives 1, null gives 0, and undefined gives NaN.

console.log(Number(" 42 "), Number(""), Number("12px")); // 42 0 NaN
console.log(Number(true), Number(null), Number(undefined)); // 1 0 NaN
console.log(+"3.5", +""); // 3.5 0

The last line uses unary plus: a + sign in front of a single value. +x does the same as Number(x), only shorter.

A NaN result says the string was not a number. The comparison Number(text) === NaN will not show it: NaN is not equal even to itself.

The parseInt function

The parseInt function reads digits from the start of a string and stops at the first character that is not a digit. It skips leading spaces and reads a - sign before the digits: parseInt("-12px") gives -12.

A handy picture is a cashier counting a stack of banknotes. The cashier counts until reaching a stray slip of paper, and nothing after it is counted.

What follows from it:

• parseInt("12px") gives 12, although Number("12px") gives NaN;
• parseInt drops the fraction: the dot is not a digit to it either;
• a string with no digits at its start gives NaN.

An optional second argument names the number system of the digits, as in parseInt(text, 10): 10 is ordinary decimal.

Number or parseInt

Of the two functions, Number is stricter. It fits when the whole string must be a number. parseInt is handy when units follow the number, as in "12px".

Interviewers often ask about the difference between them. In short: Number checks the whole string, while parseInt takes the digits from the start and silently drops the rest.

The String function

The reverse conversion is String(x): String(5) is the string "5", and String(null) is the string "null".

console.log(parseInt("12px"), parseInt("3.9"), parseInt("px12")); // 12 3 NaN
console.log(typeof String(5), String(5) === "5"); // string true

Line by line:

1. The first line repeats the rules of parseInt: 12 from "12px", 3 from "3.9", and NaN for a string that does not start with a digit.
2. The second line shows that String(5) is a value of type string equal to "5".

Common mistake

A fraction is written in a string with a comma, as is usual in Russian text:

const price = Number("1,5"); // ✗
console.log(price); // NaN

Number understands only a dot: the comma is a foreign character to it, so the result is NaN. The function parseInt("1,5") would return 1 and silently lose the fraction. A fraction in a string is written with a dot: Number("1.5") gives 1.5.

Key points

• Number(x) turns the whole string into a number and gives NaN when there are extra characters; +x does the same.
• parseInt reads digits from the start of a string up to the first stray character and drops the fraction.
• String(x) turns a value into a string.
• NaN cannot be checked with ===: it is not equal even to itself.