Справочник · JavaScript

parseInt(): строка в целое число

Редакция PraktumОбновлено 25 октября 20265 мин чтенияУровень: новичок

Функция parseInt(string, radix) читает строку слева направо и возвращает целое число из цифр в её начале. Остальное после первого нецифрового символа отбрасывается: parseInt('20px') вернёт 20. Если в начале нет цифр, результат — NaN. Второй аргумент — основание системы счисления, для обычных чисел это 10.

Минимальный пример

const input = document.querySelector('#qty');
const qty = parseInt(input.value, 10);

if (Number.isNaN(qty)) {
  showError('Введите число');
} else {
  updateTotal(qty);
}

Значения полей формы — всегда строки. Перед вычислениями их превращают в числа и проверяют результат: пустое поле или буквы дадут NaN.

Что возвращает parseInt

Главная разница: parseInt берёт начало строки и прощает мусор в конце, Number требует, чтобы вся строка была числом. Обрати внимание на пустую строку: Number('') возвращает 0, что легко пропустить при проверке формы.

Основание системы счисления

parseInt('ff', 16);     // 255
parseInt('1010', 2);    // 10
parseInt('08', 10);     // 8
parseInt('0x1A');       // 26 — префикс 0x распознаётся как шестнадцатеричный

Без второго аргумента строки с префиксом 0x читаются как шестнадцатеричные. Явное основание 10 убирает неоднозначность и требуется многими линтерами. Обратное преобразование — (255).toString(16).

Разбор CSS-значений

const style = getComputedStyle(box);
const width = parseFloat(style.width);     // '312.5px' → 312.5
const gap = parseInt(style.columnGap, 10);  // '16px' → 16

Вычисленные стили возвращаются строками с единицами. parseFloat сохраняет дробную часть — для размеров он точнее parseInt. Для размеров элемента без разбора строк есть getBoundingClientRect().

Проверка на NaN

const n = parseInt('abc', 10);

n === NaN;              // false — NaN не равен ничему, даже себе
Number.isNaN(n);        // true
isNaN('abc');           // true — старая функция, приводит аргумент к числу

Сравнение с NaN через === всегда ложно. Используй Number.isNaN: в отличие от глобальной isNaN, он не приводит аргумент и не путает строки с NaN. Для проверки «это конечное число» удобен Number.isFinite.

Ловушка с map

['1', '2', '3'].map(parseInt);     // [1, NaN, NaN]
['1', '2', '3'].map(Number);       // [1, 2, 3]
['1', '2', '3'].map((s) => parseInt(s, 10));  // [1, 2, 3]

map передаёт в функцию элемент и индекс. parseInt воспринимает индекс как основание: parseInt('2', 1) и parseInt('3', 2) дают NaN. Передавай Number или стрелочную функцию с явным основанием.

Number, parseFloat и плюс

Number('42.5');      // 42.5 — вся строка
parseFloat('42.5px'); // 42.5 — начало строки, с дробью
+'42';               // 42 — унарный плюс, как Number
Math.trunc(42.9);    // 42 — отбросить дробь у числа
input.valueAsNumber; // число из <input type="number">

Для поля type="number" удобно свойство valueAsNumber: оно сразу возвращает число или NaN. Для отбрасывания дробной части у числа используй Math.trunc, а не parseInt — тот сначала превращает число в строку, и на очень больших или маленьких числах даёт странные результаты.

parseInt или Number

Частые ошибки

• Не указывают основание 10.
• Передают parseInt прямо в map.
• Проверяют результат через === NaN.
• Используют parseInt для дробных чисел и теряют дробь.
• Отбрасывают дробь у числа через parseInt вместо Math.trunc.

Доступность

Если ввод не удалось разобрать, сообщи об этом текстом рядом с полем и свяжи сообщение через aria-describedby. Для числовых полей используй inputmode="numeric" или type="number", чтобы на телефоне открывалась цифровая клавиатура.

Поддержка браузерами

parseInt, parseFloat и Number работают во всех браузерах. Number.isNaN и Number.isFinite — во всех актуальных браузерах.

function parseQty(value) {
  const trimmed = value.trim();
  if (!/^\d+$/.test(trimmed)) return null;
  const n = Number(trimmed);
  return n >= 1 && n <= 99 ? n : null;
}

parseQty('5');      // 5
parseQty('3 шт.');  // null
parseQty('2.5');    // null
parseQty('');       // null