Как превратить строку в число в JavaScript — и не споткнуться о запятую

Пользователь вводит в калькулятор ремонта площадь: 3,5. Код честно переводит строку в число и получает… 3. Полметра пропало. Никакой ошибки, никакого красного текста. Просто неправильная смета.

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

Почему это вообще нужно

Всё, что пришло из формы, адресной строки или localStorage, приходит текстом. Даже если выглядит как число. Мы подробно разобрали это в статье что такое строка. Пока ты не превратил текст в число, "100" + "200" будет "100200", а не 300.

Пошагово: как перевести строку в число

1. Убедись, что у тебя правда строка.

Добавь в код одну строчку и посмотри в консоль:

console.log(typeof price, price)

string "1500" — значит, переводить надо. number 1500 — всё уже в порядке, ищи ошибку в другом месте.

2. Выбери инструмент под задачу.

В JavaScript три основных способа, и они ведут себя по-разному:

Number("42")       // 42
Number("12px")     // NaN — строгий: мусор в строке = провал
parseInt("12px")   // 12 — читает цифры, пока не наткнётся на букву
parseFloat("3.5")  // 3.5 — то же, но с дробной частью

Правило простое. Для ввода пользователя бери Number — он строгий и не пропустит мусор. parseInt и parseFloat бери, когда число заведомо «приклеено» к тексту: "12px", "250 ₽".

Ещё одна ловушка parseInt: parseInt("1e3") даёт 1, а Number("1e3") — 1000. parseInt не понимает научную запись.

3. Почисти строку перед переводом.

Люди пишут числа по-человечески, а не по-компьютерному:

Number("1 200")   // NaN — пробел внутри
Number("3,5")     // NaN — запятая вместо точки
parseFloat("3,5") // 3 — ещё хуже: тихо отрезал дробь

Русская запятая — главный подвох для наших пользователей. parseFloat не падает, а молча читает до запятой. Поэтому сначала чистим:

const clean = raw.trim().replace(/\s/g, "").replace(",", ".")
const value = Number(clean)   // "1 200,5" → 1200.5

4. Отдельно обработай пустое поле.

Сюрприз: Number("") возвращает 0. Не ошибку — ноль. Пользователь ничего не ввёл, а в расчёт ушёл ноль, и итог выглядит правдоподобно.

if (clean === "") {
  showError("Введи площадь")
  return
}

5. Проверь результат на NaN.

Если строку не удалось прочитать, получится NaN — «не число». Проверяй его специальной командой:

if (Number.isNaN(value)) {
  showError("Похоже, это не число")
  return
}

Не пропускай этот шаг: NaN заразен и превращает в NaN всё, до чего дотронется. Как его выслеживать, если он уже пролез, — в статье почему получается NaN.

6. Переводи один раз — на входе.

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

Как попросить об этом ИИ

Если форму для тебя пишет ИИ, он почти всегда сделает parseFloat(input.value) и пойдёт дальше. Одно предложение в промпте закрывает все дыры сразу:

Что получится

Калькулятор, который понимает 3,5, 1 200 и 4 с пробелами. На пустое поле он просит ввести значение, на «три метра» — вежливо говорит, что это не число. А главное — в расчёт больше не проникает тихий ноль или тихий NaN.

Что лучше: Number или унарный плюс?

+"42" делает ровно то же, что Number("42"), только короче. ИИ часто пишет плюс. Но Number(...) читается понятнее, особенно когда код будешь разбирать через месяц.

Почему input type="number" всё равно отдаёт строку?

Так устроены формы в браузере: значение поля — всегда текст. У такого поля есть свойство valueAsNumber, оно сразу отдаёт число. Но на пустом поле оно даёт NaN, так что проверка всё равно нужна.

А в Python как?

Там int("42") и float("3.5"). Разница в характере: на мусоре Python не молчит, а падает с ошибкой ValueError. Запятую он тоже не понимает — чистить строку придётся так же.