Явное приведение

Число, которое человек вводит в поле на странице, приходит в программу строкой. Строка "42" выглядит как число, но остаётся строкой, и "42" === 42 даёт false. Чтобы вычислять с таким значением, его превращают в число:

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

Давайте разберём программу по строкам:

1. typeof text печатает string: в переменной текст из двух символов.
2. typeof Number(text) печатает number: вызов вернул уже число.
3. Number(text) === 42 даёт true, потому что теперь совпадают и тип, и значение.

Вызов Number(text) вернул число 42, а сама переменная text осталась строкой. Когда смену типа записывают в коде, её называют явным приведением.

Вспомните обменный пункт из урока о сравнении. Явное приведение похоже на поход к окошку обменника: вы сами просите обменять строку на число и получаете результат в руки. Аналогия расходится с жизнью в одном. В обменнике купюру отдают, а здесь строка text остаётся у вас, и рядом появляется новое значение.

Функция Number

Number(x) превращает в число значение любого типа. Со строками она поступает так:

• пробелы по краям строки пропускает: Number(" 42 ") даёт 42;
• пустая строка даёт 0;
• дробную строку тоже понимает: Number("3.5") — это 3.5;
• если в строке есть что-то кроме числа, результат — NaN.

Из true получается 1, из null — 0, из undefined — 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

В последней строке стоит унарный плюс: знак + перед одним значением. Запись +x делает то же, что Number(x), только короче.

Результат NaN говорит, что строка не была числом. Сравнение Number(text) === NaN этого не покажет: NaN не равен даже самому себе.

Функция parseInt

Функция parseInt читает цифры с начала строки и останавливается на первом символе, который не цифра. Пробелы в начале она пропускает, а знак - перед цифрами читает: parseInt("-12px") даёт -12.

Её удобно представить как кассира, который пересчитывает пачку купюр. Он считает, пока не наткнётся на постороннюю бумажку, и всё, что лежит после неё, не засчитывает.

Что из этого следует:

• parseInt("12px") даёт 12, хотя Number("12px") даёт NaN;
• дробную часть parseInt отбрасывает: точка для неё тоже не цифра;
• строка без цифр в начале даёт NaN.

Вторым аргументом можно указать, в какой системе счисления записаны цифры, например parseInt(text, 10): 10 — обычная десятичная.

Number или parseInt

Из двух функций Number строже. Она подходит, когда вся строка должна быть числом. А parseInt удобна, когда после числа идут единицы измерения, как в "12px".

Разницу между ними часто спрашивают на собеседовании. Коротко: Number проверяет всю строку целиком, а parseInt берёт цифры из начала и молча отбрасывает остальное.

Функция String

Обратное приведение делает String(x): String(5) — это строка "5", а String(null) — строка "null".

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

Разберём по строкам:

1. Первая строка повторяет правила parseInt: 12 из "12px", 3 из "3.9" и NaN для строки, которая начинается не с цифры.
2. Вторая строка показывает, что String(5) — значение типа string, равное "5".

Частая ошибка

Дробное число записывают в строке через запятую, как принято в русском тексте:

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

Number понимает только точку: запятая для неё — посторонний символ, поэтому получается NaN. Функция parseInt("1,5") вернула бы 1 и молча потеряла бы дробную часть. Дробь в строке пишут через точку: Number("1.5") даёт 1.5.

Главное

• Number(x) превращает в число всю строку, а при лишних символах даёт NaN; +x делает то же.
• parseInt читает цифры с начала строки до первого постороннего символа и отбрасывает дробь.
• String(x) превращает значение в строку.
• NaN не проверить через ===: он не равен даже самому себе.