Как преобразовать строку в число в JavaScript — parseInt или Number?
Беру значение из input, оно строка "42", а мне нужно число, чтобы посчитать. Складываю — получается склейка "4210" вместо суммы. Как преобразовать строку в число правильно, и чем отличаются parseInt и Number?
2 ответа
Значения из input.value — всегда строки, поэтому + их склеивает, а не складывает. Нужно явно превратить в число.
Number(str) — преобразует строку целиком. Если в ней есть лишние символы — вернёт NaN:
Number('42'); // 42
Number('42.5'); // 42.5
Number('42px'); // NaN — мешает 'px'
Number(''); // 0
parseInt(str) — выдёргивает целое число с начала строки, игнорируя «хвост». Дробную часть отбрасывает:
parseInt('42'); // 42
parseInt('42.9'); // 42 — дробь отброшена
parseInt('42px'); // 42 — 'px' проигнорирован
parseInt('px42'); // NaN — в начале не цифра
parseFloat — как parseInt, но сохраняет дробную часть: parseFloat('42.5px') → 42.5.
Унарный плюс +str — короткий аналог Number:
const n = +'42'; // 42
Что выбрать:
- Строгое преобразование «всё или ничего» →
Number(или+). - Достать число из строки с единицами вроде
'30px'→parseInt/parseFloat.
Важно для parseInt — указывай систему счисления (10):
parseInt('08', 10); // 8 — надёжно
И всегда проверяй результат на NaN через Number.isNaN(n), иначе дальше расчёт сломается.
Самая частая боль — именно сумма из двух полей. Вот рабочий шаблон:
const a = Number(document.querySelector('#a').value);
const b = Number(document.querySelector('#b').value);
console.log(a + b); // теперь сумма, а не склейка строк
Если поле могло остаться пустым или с буквами, подстрахуйся:
const a = Number(input.value) || 0;
Тут || 0 подставит ноль, если получился NaN (NaN — ложное значение).