Руководство по преобразованию строк в целые числа в JavaScript

JavaScript предлагает несколько методов для преобразования строк в целые числа, среди которых parseInt(), конструктор Number() и унарный плюс (+) являются наиболее распространенными подходами. Каждый метод ведет себя по-разному в плане поведения при парсинге, обработки ошибок и крайних случаев, поэтому важно понимать их различия для правильного использования.

Содержание

• Метод parseInt()
• Конструктор Number()
• Унарный плюс
• Сравнение и лучшие практики
• Обработка ошибок и крайние случаи
• Практические примеры
• Когда использовать каждый метод

Метод parseInt()

parseInt() — это встроенная функция JavaScript, которая анализирует строковый аргумент и возвращает целое число указанной системы счисления (основание в математических системах счисления).

Базовый синтаксис

parseInt(string, radix)

Как это работает

• Функция parseInt() считывает строку слева направо
• Она прекращает парсинг при встрече символа, который не является цифрой в указанной системе счисления
• Если первый символ нельзя преобразовать в число, функция возвращает NaN
• Параметр radix указывает основание системы счисления (2-36)

Примеры

parseInt("123") // 123 (по умолчанию radix 10)
parseInt("123", 10) // 123 (явно указан radix 10)
parseInt("123abc") // 123 (останавливается на нецифровом символе)
parseInt("abc123") // NaN (начинается с нецифрового символа)
parseInt("1010", 2) // 10 (двоичная система)
parseInt("FF", 16) // 255 (шестнадцатеричная система)

Важные замечания

• Параметр radix важен: Всегда указывайте параметр radix, чтобы избежать непредвиденного поведения
• Пробелы в начале и в конце: parseInt() игнорирует пробелы в начале, но не в конце строки
• Отрицательные числа: Корректно обрабатывает знак минуса
• Дробные числа: Отсекает дробную часть вместо округления

Конструктор Number()

Конструктор Number() преобразует свой аргумент в число, возвращая числовое значение или NaN, если преобразование не удалось.

Базовый синтаксис

Number(string)

Как это работает

• Пытается преобразовать всю строку в число
• Возвращает NaN, если какой-либо символ нельзя преобразовать
• Обрабатывает десятичные точки и научную нотацию
• Более строг, чем parseInt() в отношении того, что constitutes допустимое число

Примеры

Number("123") // 123
Number("123.45") // 123.45 (сохраняет дробную часть)
Number("123abc") // NaN (любой нечисловой символ)
Number("  123  ") // 123 (обрабатывает пробелы)
Number("-123") // -123 (обрабатывает отрицательные числа)
Number("1e3") // 1000 (научная нотация)
Number("Infinity") // Infinity

Важные замечания

• Нет параметра radix: В отличие от parseInt(), он не поддерживает разные системы счисления
• Строгий парсинг: Неудача, если любая часть строки не является допустимым числом
• Поведение с булевыми значениями: Возвращает 1 для true и 0 для false
• Null/undefined: Возвращает 0 для null, NaN для undefined

Унарный плюс

Унарный плюс (+) — это лаконичный способ преобразования строк в числа в JavaScript.

Базовый синтаксис

+string

Как это работает

• Пытается преобразовать операнд в число
• Возвращает NaN, если преобразование не удалось
• Следует тем же правилам преобразования, что и конструктор Number()
• Более эффективен для простых преобразований

Примеры

+"123" // 123
+"123.45" // 123.45
+"123abc" // NaN
+"  123  " // 123 (обрабатывает пробелы)
+"-123" // -123
+"1e3" // 1000

Важные замечания

• Наиболее эффективен: Обычно самый быстрый метод для простых преобразований
• То же поведение: Следует идентичным правилам, что и конструктор Number()
• Читаемость: Некоторые разработчики предпочитают parseInt() для ясности
• Приведение типов: Можно использовать в сложных выражениях

Сравнение и лучшие практики

Сравнение производительности

Ключевые различия

• Точность: parseInt() отсекает дробные части, в то время как Number() и + сохраняют их
• Гибкость: parseInt() может обрабатывать разные системы счисления
• Строгость: Number() и + более строги в отношении допустимых форматов чисел
• Тип возвращаемого значения: Все возвращают числа, но parseInt() явно возвращает целые числа

Лучшие практики

// Для простого преобразования в целое число
const num = +stringValue; // Предпочтительно для производительности

// Для конкретной системы счисления
const binary = parseInt("1010", 2); // 10

// Когда нужна строгая валидация
if (!isNaN(Number(input))) {
  // Допустимое число
}

// Для извлечения чисел из текста
const extracted = parseInt("123 долларов", 10); // 123

Обработка ошибок и крайние случаи

Распространенные ловушки

// parseInt() без radix (опасно)
parseInt("08") // 8 в некоторых браузерах, 0 в других
parseInt("010") // 10 в некоторых браузерах, 8 в других

// Пустая строка
parseInt("") // NaN
Number("") // 0
+"" // 0

// Пробелы
parseInt("  123  ") // 123
Number("  123  ") // 123

// Нечисловые строки
parseInt("abc") // NaN
Number("abc") // NaN
+"abc" // NaN

Функция безопасного преобразования

function safeStringToInt(str, radix = 10) {
  const parsed = parseInt(str, radix);
  return isNaN(parsed) ? 0 : parsed;
}

function safeStringToNumber(str) {
  const num = Number(str);
  return isNaN(num) ? 0 : num;
}

Практические примеры

Обработка ввода в формах

// Получение целого числа из ввода в форме
const ageInput = document.getElementById("age").value;
const age = +ageInput; // Простое преобразование

// Более надежно с валидацией
const age = parseInt(ageInput, 10) || 0;

// Ввод валюты (с десятичной частью)
const priceInput = "19.99";
const price = Number(priceInput); // 19.99

Парсинг конфигурации

// Преобразование ответа API
const config = {
  maxItems: "100",
  timeout: "30.5",
  enabled: "true"
};

const parsedConfig = {
  maxItems: +config.maxItems, // 100
  timeout: Number(config.timeout), // 30.5
  enabled: config.enabled === "true" // Преобразование в булево значение
};

Очистка данных

// Извлечение чисел из смешанных строк
const text = "Пользователи: 1234, Товары: 56, Доход: $7890";
const numbers = text.match(/\d+/g).map(n => +n); // [1234, 56, 7890]

// Альтернатива с parseInt
const numbers = text.match(/\d+/g).map(n => parseInt(n, 10));

Когда использовать каждый метод

Используйте parseInt(), когда:

• Вам нужно преобразовывать строки с конкретными системами счисления (двоичная, шестнадцатеричная и т.д.)
• Вы хотите извлекать числа из смешанного содержимого (например, “123px”)
• Вам явно нужно усечение целых чисел (без округления)
• Вы работаете с устаревшим кодом, который требует параметр radix

Используйте Number(), когда:

• Вам нужна строгая валидация полных строк чисел
• Вы хотите точно обрабатывать дробные числа
• Вам нужно преобразовывать научную нотацию
• Вы предпочитаете явное преобразование типов для читаемости

Используйте унарный плюс (+), когда:

• Вам нужно наиболее производительное преобразование
• Вы работаете с известными корректными строками чисел
• Вы предпочитаете лаконичный синтаксис
• Вы находитесь в контекстах, где приведение типов допустимо

Соображения производительности

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

// Приблизительные результаты бенчмарка
// Унарный плюс: ~10M операций/секунду
// Number(): ~8M операций/секунду
// parseInt(): ~2M операций/секунду

Заключение

JavaScript предоставляет три основных метода для преобразования строк в целые числа, каждый со своими конкретными случаями использования и характеристиками. Унарный плюс (+) предлагает лучшую производительность для простых преобразований, Number() обеспечивает строгий и всесторонний парсинг чисел, в то время как parseInt() отлично справляется с разными системами счисления и извлечением чисел из смешанных строк.

Ключевые рекомендации:

• Всегда указывайте параметр radix при использовании parseInt(), чтобы избежать несоответствий между браузерами
• Используйте унарный плюс (+) для наиболее эффективных простых преобразований целых чисел
• Выбирайте Number(), когда вам нужна строгая валидация полных строк чисел
• Реализуйте правильную обработку ошибок для пользовательского ввода и валидации данных
• Рассмотрите возможность создания утилитарных функций для последовательного поведения преобразований в вашем приложении

Понимание этих методов преобразования и их различий поможет вам писать более надежный и эффективный JavaScript-код, корректно обрабатывающий преобразования строк в целые числа в различных сценариях.

Источники

1. MDN Web Docs - parseInt()
2. MDN Web Docs - Number()
3. ECMAScript Specification - Numeric Type Conversion
4. JavaScript.info - Type Conversions
5. Google JavaScript Style Guide - Numeric Types