Как парсить числа в JavaScript

Когда вы считываете значение из поля формы, параметра URL или ответа JSON API, оно почти всегда приходит в виде строки. Прежде чем выполнять с ним какие-либо математические операции, необходимо преобразовать его в число. JavaScript предоставляет несколько способов сделать это, и они ведут себя достаточно по-разному, чтобы выбор неправильного метода приводил к неочевидным ошибкам. Эта статья охватывает основные методы, когда использовать каждый из них, и граничные случаи, которые чаще всего ставят разработчиков в тупик.

Быстрое сравнение: методы преобразования строки в число в JavaScript

parseInt(): частичный парсинг для целых чисел

parseInt(string, radix) читает символы слева направо и останавливается в момент, когда встречает что-то, что не может распарсить. Это делает его полезным для строк вроде "24px" или "10rem", где число идёт первым.

parseInt("24px", 10)   // 24
parseInt("3.99", 10)   // 3  (десятичная точка останавливает парсинг)
parseInt("abc", 10)    // NaN (первый символ недопустим)

Всегда передавайте radix. Без него parseInt обрабатывает строки, начинающиеся с 0x, как шестнадцатеричные, а в остальных случаях парсит в основании 10. Хотя современные движки по умолчанию используют основание 10, пропуск radix является известным источником ошибок и делает ваши намерения неясными.

parseInt("0xFF", 16)   // 255 — явный парсинг hex
parseInt("011", 10)    // 11  — radix предотвращает неоднозначность

Одно неочевидное поведение: parseInt останавливается на десятичной точке в "6.022e23", поэтому parseInt("6.022e23", 10) возвращает 6, а не 602200000000000000000000. Не используйте parseInt для усечения больших чисел с плавающей точкой. Вместо этого используйте Math.trunc().

parseFloat(): частичный парсинг для десятичных чисел

parseFloat() работает так же, как parseInt, но сохраняет десятичную часть. У него нет параметра radix, и он всегда парсит в основании 10.

parseFloat("3.14rem")  // 3.14
parseFloat("1e3")      // 1000 — понимает научную нотацию
parseFloat("px10")     // NaN  — первый символ недопустим

Используйте parseFloat, когда входные данные могут содержать десятичное значение, и вы хотите его сохранить.

Number() и унарный +: строгое преобразование

И Number(), и унарный оператор + требуют, чтобы вся строка была валидным числом. Если какая-либо её часть таковой не является, вы получите NaN. Эта строгость является преимуществом при работе с ответами API или валидированными данными форм, где частичный парсинг был бы скрытой ошибкой.

Number("42")     // 42
Number("3.14")   // 3.14
Number("42px")   // NaN — строже, чем parseInt
Number("")       // 0   — обратите внимание на это
+"42"            // 42  — идентичное поведение, более короткий синтаксис

Граничный случай с пустой строкой важен при обработке форм. Number("") возвращает 0, а не NaN, что может скрыть отсутствующее значение. Всегда проверяйте пустой ввод перед преобразованием.

Числовые разделители не работают во время выполнения

Исходный код JavaScript допускает 1_000_000 как числовой литерал, но этот синтаксис не переносится на парсинг строк.

parseInt("1_000", 10)   // 1 — парсинг останавливается на подчёркивании
Number("1_000")         // NaN

Если ваш API или пользовательский ввод использует подчёркивания как разделители тысяч, сначала удалите их с помощью str.replace(/_/g, "").

BigInt(): парсинг больших целых чисел

Тип Number в JavaScript теряет точность за пределами Number.MAX_SAFE_INTEGER (2⁵³ − 1). Для значений больше этого — ID баз данных, криптографические значения, финансовые целые числа — используйте BigInt().

BigInt("9007199254740993")   // 9007199254740993n — точное значение
Number("9007199254740993")   // 9007199254740992  — ошибка на единицу

Передавайте строку напрямую в BigInt(). Не пропускайте её сначала через parseInt, потому что точность уже теряется на этом этапе. Обратите внимание, что значения BigInt нельзя смешивать с обычными значениями Number в арифметических операциях без явного преобразования.

Парсинг с учётом локали

В JavaScript нет встроенной функции для парсинга чисел в локальном формате, таких как "1.234,56" (распространено в немецкой или испанской локалях). Вам нужно вручную нормализовать строку перед парсингом:

const raw = "1.234,56"
const normalized = raw.replace(/\./g, "").replace(",", ".")
parseFloat(normalized) // 1234.56

Какой метод следует использовать?

• Пользовательский ввод или CSS-значения с единицами измерения → parseInt(str, 10) или parseFloat()
• Ответы API или строго валидированные данные → Number() или унарный +
• Целые числа за пределами 2⁵³ − 1 → BigInt()
• Всегда проверяйте, что результат не является NaN, перед его использованием:

const qty = parseInt(input, 10)
if (Number.isNaN(qty)) {
  // обработка недопустимого ввода
}

Используйте Number.isNaN(), а не глобальный isNaN(). Глобальная версия сначала приводит свой аргумент к типу, что означает, что isNaN("") возвращает false, хотя "" не является числом.

Заключение

Правильный метод парсинга чисел в JavaScript зависит от того, что вы знаете о своих входных данных. Используйте parseInt или parseFloat, когда частичный парсинг приемлем и ожидаем. Используйте Number() или унарный +, когда вся строка должна быть валидным числом. Обращайтесь к BigInt(), когда точность важна для больших целых чисел. Во всех случаях проверяйте на NaN перед использованием результата.

Часто задаваемые вопросы

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.