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

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

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

Давайте разберем самые популярные и надежные подходы. Они используются в реальных проектах и поддерживаются всеми браузерами и версиями Node.js.

Функция Number()

Number() — это самый простой и понятный способ. Функция преобразует весь строковый аргумент в число целиком. Если хотя бы один символ не является цифрой (кроме пробелов в начале и конце), вернется NaN.

Этот метод идеален, когда вы ожидаете получить строго числовое значение без лишних символов. Например, при обработке данных из текстовых полей формы, которые должны содержать только цифры.

const str = "123";
const num = Number(str); // 123

Number("42"); // 42
Number(" 100 "); // 100 (пробелы игнорируются)
Number("3.14"); // 3.14 (работает с дробными числами)
Number("42abc"); // NaN (текст приводит к ошибке)
Number("abc"); // NaN

Основные характеристики:

• Преимущества: простота, поддержка дробных чисел, работает с пробелами в начале и конце
• Недостатки: вернет NaN при любом нецифровом символе в строке, требует дополнительной проверки результата
• Когда использовать: когда нужна точная конвертация чистой числовой строки

Унарный оператор “+”

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

Несмотря на краткость, этот способ полностью эквивалентен функции Number() по поведению и результатам. Выбор между ними — дело вкуса и контекста проекта.

const str = "123";
const num = +str; // 123

+"42"; // 42
+" 100 "; // 100
+"3.14"; // 3.14
+"42abc"; // NaN

Характеристики унарного плюса:

• Преимущества: очень краткий синтаксис, идентичное поведение Number()
• Недостатки: менее читаемый код для новичков, все равно вернет NaN при ошибке
• Когда использовать: в коротких выражениях, при работе с чистыми числовыми строками

Функция parseInt()

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

Это особенно полезно, когда у вас есть строки вроде “42px” или “100 пикселей”. parseInt() вытащит число и проигнорирует остальное.

parseInt("123"); // 123
parseInt("42px"); // 42 (игнорирует текст после цифр)
parseInt(" 100 таблеток"); // 100
parseInt("3.14"); // 3 (отбросит дробную часть)
parseInt("abc"); // NaN (нет цифр в начале)

Функция parseInt() принимает второй аргумент — основание системы счисления (от 2 до 36). Это полезно для работы с шестнадцатеричными, двоичными и другими числами:

parseInt("FF", 16); // 255 (шестнадцатеричное число)
parseInt("1010", 2); // 10 (двоичное число)
parseInt("42", 10); // 42 (десятичное, явно указано)

Когда parseInt() пригодится:

• Извлечение чисел из смешанных строк: “50% скидка”, “200px”, “42 дня”
• Работа с разными системами счисления: hex, binary, octal
• Получение только целой части: не нужно округлять отдельно
• Игнорирование символов после первого числа: строка “2024-02-19” вернет 2024

Особенности parseInt():

• Преимущества: гибкий парсинг, поддержка систем счисления, игнорирует текст после числа
• Недостатки: отбрасывает дробную часть, требует явного указания основания (рекомендуется)
• Когда использовать: при работе с CSS-значениями, смешанным контентом, конверсией между системами счисления

Сравнение методов преобразования

Давайте наглядно посмотрим, как каждый метод обрабатывает разные входные данные:

Из таблицы видно, что Number() и унарный плюс идентичны — они либо полностью конвертируют строку, либо возвращают NaN. parseInt() же более толерантен — извлекает начальные цифры и игнорирует остальное.

Умножение на число

Есть еще один хитрый способ — умножить строку на 1 (или на любое число). JavaScript автоматически приведет строку к числовому типу перед операцией.

"345" * 1; // 345
"3.14" * 1; // 3.14
" 4 " * 1; // 4
"42px" * 1; // NaN
" " * 1; // 0 (пустая строка становится нулем!)

Внимание на последний пример — пустая строка преобразуется в 0, а не в NaN. Это может быть источником ошибок, если вы не учли этот случай.

Характеристики метода:

• Преимущества: иногда полезен в математических выражениях, очень краткий
• Недостатки: неочевидный синтаксис, непредсказуемое поведение с пустыми строками
• Когда использовать: редко, в основном как трюк в коде опытных разработчиков

Работа с некорректными данными

В реальных проектах важно правильно обрабатывать ошибки и NaN. Давайте разберемся, как это делать.

Проверка на NaN

Когда преобразование не удается, функции вернут значение NaN (Not-a-Number). Это специальное значение, которое нельзя сравнивать обычным способом:

const result = Number("abc");
console.log(result === NaN); // false! это не сработает

Для проверки используйте isNaN() или Number.isNaN():

const result = Number("abc");

if (isNaN(result)) {
  console.log("Ошибка: строка не содержит числа");
}

// или более современный способ
if (Number.isNaN(result)) {
  console.log("Не удалось преобразовать в число");
}

Разница: Number.isNaN() более строгая проверка (не преобразует тип), а isNaN() может давать неожиданные результаты.

Валидация пользовательского ввода

Когда берете значения из формы, всегда проверяйте результат:

const userInput = document.getElementById("price").value; // "50" или "abc"?
const price = Number(userInput);

if (!Number.isNaN(price) && price > 0) {
  // Число корректно и положительное
  console.log("Цена:", price);
} else {
  // Показываем ошибку пользователю
  alert("Пожалуйста, введите корректную цену");
}

Использование parseInt() с обработкой ошибок

интересный случай с parseInt() — если строка вообще не начинается с цифры:

parseInt("abc123"); // NaN (текст в начале)
parseInt("123abc"); // 123 (текст в конце игнорируется)

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

parseInt("10"); // в разных контекстах может быть 10 или даже 8
parseInt("10", 10); // всегда 10 (десятичная система)

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

Давайте посмотрим, как применить эти знания в реальном коде.

Пример 1: Обработка CSS-значений

Нередко нужно извлечь числовое значение из CSS-величины:

const width = "200px";
const height = "50.5em";
const opacity = "0.8";

// parseInt() для целых пикселей
const widthValue = parseInt(width); // 200

// parseFloat() для дробных чисел
const heightValue = parseFloat(height); // 50.5
const opacityValue = parseFloat(opacity); // 0.8

Пример 2: Обработка данных из API

Сервер иногда возвращает числа как строки в JSON:

const apiResponse = {
  userId: "12345",
  balance: "1000.50",
  age: "28"
};

const userId = Number(apiResponse.userId); // 12345
const balance = parseFloat(apiResponse.balance); // 1000.50
const age = parseInt(apiResponse.age, 10); // 28

Пример 3: Валидация и преобразование в одно действие

function safeConvert(value, fallback = 0) {
  const num = Number(value);
  return Number.isNaN(num) ? fallback : num;
}

console.log(safeConvert("100")); // 100
console.log(safeConvert("abc")); // 0 (значение по умолчанию)
console.log(safeConvert("xyz", -1)); // -1 (кастомное значение по умолчанию)

Выбор метода: практический гайд

Как не запутаться и выбрать правильный инструмент для каждой ситуации?

Используйте Number(), если:

• Ожидаете чистую числовую строку без лишних символов
• Нужна поддержка дробных чисел
• Хотите самый явный и читаемый код

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

• Пишете краткое выражение в одну строку
• Работаете с чистыми числовыми значениями
• Проект допускает компактный синтаксис

Используйте parseInt(), если:

• Строка содержит число и текст вместе (“42px”, “100 дней”)
• Нужна только целая часть
• Работаете с разными системами счисления
• Хотите извлечь число из начала строки

Используйте parseInt() с parseFloat(), если:

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

const value = "3.14 радиана";
const num = parseFloat(value); // 3.14

Что стоит помнить о типах данных

Преобразование строк в числа — это только половина дела. Важно понимать, что происходит под капотом при различных операциях.

В JavaScript есть автоматическое приведение типов (type coercion), которое может вводить в заблуждение. Например, при делении или вычитании строки автоматически преобразуются в числа:

"6" / "2"; // 3 (строки преобразовались автоматически)
"10" - "3"; // 7
"10" + "3"; // "103" (а здесь произойдет конкатенация, не сложение!)

Так что явное преобразование всегда безопаснее неявного. Это делает код понятнее и снижает количество ошибок.

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

Заключение: выбор инструмента по ситуации

Преобразование строк в числа — это фундаментальный навык в JavaScript. Теперь вы знаете все основные методы: от простых Number() и унарного плюса до более гибкого parseInt() и работы с ошибками через проверку NaN.

Главное правило: выбирайте метод в зависимости от данных, которые вы ожидаете получить. Чистые числовые строки — берите Number(). Смешанные данные с CSS или значениями — parseInt(). И всегда проверяйте результат, особенно когда это пользовательский ввод. Код, который хорошо обрабатывает ошибки и некорректные данные, — это код, который заслуживает доверия.