Превращаем строку в число в JavaScript: полный гайд для новичков

Онлайн-тренажер Python для начинающих

Изучайте Python легко и без перегрузки теорией. Решайте практические задачи с автоматической проверкой, получайте подсказки на русском языке и пишите код прямо в браузере — без необходимости что-либо устанавливать.

Начать курс

Введение: почему это важно?

Представьте ситуацию: вы пишете калькулятор чаевых на JavaScript. Пользователь вводит сумму счета в поле ввода, нажимает кнопку — и получает... undefined или, что еще хуже, строку "10010" вместо числа 110. Знакомо? Если вы только начинаете свой путь в программировании, проблема преобразования строки в число в JavaScript — одна из тех "граблей", на которые наступают абсолютно все.

На Stack Overflow вопрос "How can I convert a string to an integer in JavaScript?" собрал тысячи просмотров и сотни ответов. Это значит, что даже опытные разработчики иногда путаются в нюансах. Сегодня мы раз и навсегда разберемся, как правильно конвертировать строку в число в JavaScript, какие методы работают, а какие — нет, и почему результат иногда бывает неожиданным.

Готовы? Тогда поехали!

Зачем вообще преобразовывать строку в число?

JavaScript — язык с динамической типизацией. Это круто, потому что вы можете не думать о типах данных… пока не столкнетесь с багом. Проблема в том, что данные из prompt(), input полей форм, URL-параметров или API всегда приходят в виде строк. Даже если пользователь ввел "42", JavaScript видит не число, а набор символов.

Попробуйте сложить две строки:

let a = "10";
let b = "20";
console.log(a + b); // "1020"

Видите? Вместо суммы 30 вы получили конкатенацию. Чтобы этого избежать, нужно явно указать JavaScript: "Эй, это числа, работай с ними как с числами!".

Метод №1: parseInt() — классика жанра

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

Синтаксис и примеры

let str = "42";
let num = parseInt(str);
console.log(num); // 42 (число)

// Работает даже с "мусором" после цифр
console.log(parseInt("123px"));    // 123
console.log(parseInt("10.99"));    // 10 (отбрасывает дробную часть)

// А вот если строка начинается не с цифры...
console.log(parseInt("abc123"));   // NaN
console.log(parseInt("  7"));      // 7 (пробелы в начале игнорируются)

Важно: parseInt() останавливается на первом нечисловом символе. Если строка начинается с буквы — получите NaN (Not a Number).

Второй аргумент — система счисления

Мало кто знает, но у parseInt() есть второй параметр — radix (основание системы счисления). Это спасает от багов с восьмеричными числами:

// Без radix может быть путаница
console.log(parseInt("010")); // 10 (в старых IE могло быть 8)

// Всегда указывайте 10 для десятичной системы
console.log(parseInt("010", 10)); // 10
console.log(parseInt("FF", 16));  // 255 (шестнадцатеричная)

Совет от профи: всегда передавайте второй аргумент 10, если работаете с десятичными числами. Это делает код понятнее и безопаснее.

Метод №2: Number() — строгий, но честный

Функция Number() — это более строгий способ конвертировать строку в число в JavaScript. В отличие от parseInt(), она не терпит никаких посторонних символов.

console.log(Number("42"));     // 42
console.log(Number("10.99"));  // 10.99 (сохраняет дробную часть)
console.log(Number("123px"));  // NaN (строка содержит лишние символы)
console.log(Number(""));       // 0 (пустая строка = 0)
console.log(Number(" "));      // 0

Когда использовать: если вы на 100% уверены, что строка содержит только число (например, после валидации формы). Для пользовательского ввода лучше parseInt() или parseFloat().

Метод №3: Унарный плюс (+) — короткий и быстрый

Самый лаконичный способ преобразования строки в число в JavaScript — поставить перед ней плюс. Это оператор унарного плюса, и он работает аналогично Number().

let str = "42";
let num = +str;
console.log(num); // 42

// Другие примеры
console.log(+"10.99");   // 10.99
console.log(+"123px");   // NaN
console.log(+"");        // 0
console.log(+true);      // 1 (да, это тоже работает)

// Используется в реальном коде часто:
let total = +price + +tax; // быстрое преобразование двух строк

Плюсы: коротко, читаемо (для тех, кто знает этот трюк). Минусы: новички могут не понять, что происходит. Используйте, если пишете код для себя или в команде, где все знают этот прием.

Метод №4: Math.floor() и другие математические трюки

Иногда программисты используют математические операции для конвертации строки в число в JavaScript. Это работает, но выглядит как хак:

let str = "42";
console.log(str * 1);      // 42 (умножение на 1)
console.log(str / 1);      // 42
console.log(str - 0);      // 42
console.log(Math.floor(str)); // 42 (только для целых)

Почему это работает? Любая математическая операция заставляет JavaScript преобразовать строку в число. Но будьте осторожны: Math.floor() округляет вниз и работает только с числами.

Стоит ли использовать? Лучше нет. Это неочевидный код, который может сбить с толку других разработчиков. Придерживайтесь явных методов.