Как исправить сложение строк вместо чисел в JavaScript

Быстрый ответ

let sum = +input1.value + +input2.value;

Для того чтобы гарантированно преобразовать строку в число, избегая конкатенации, используйте унарный плюс + к значениям полей ввода.

Точное преобразование типов

В JavaScript значения, полученные из форм, по умолчанию интерпретируются как строки. Чтобы обрабатывать введенные данные как числа, требуется выполнить явное преобразование типов.

let number = Number(input); 
// Подсказка: Краткая запись через унарный плюс +input также действенна.

Справляемся с целыми числами при помощи parseInt

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

let integer = parseInt(string, 10); 
// Забудьте про подводные камни октальной системы и бинарные приколы.

Плывем по волнам float с помощью parseFloat

Если работа ведется с дробными числами, на помощь придет parseFloat(). Эта функция сохраняет число как число с плавающей точкой, не теряя его десятичной части.

let float = parseFloat(string); 
// Навигация по морю чисел становится возможной благодаря parseFloat.

Некорректные входные данные? Не беда!

Когда пользовательский ввод непредсказуем и может включать в себя нечисленные значения, хорошим решением станет использование выражения parseInt(input, 10) || 0. Благодаря этому приему любые ошибки ввода будут автоматически обнуляться, обеспечивая стабильность расчетов.

Визуализация

Представьте, что каждое число — это отдельный цвет:

1️⃣ (красный) + 2️⃣ (синий) => 🟣 (фиолетовый)
// В результате сложения чисел мы ожидаем получить новый цвет (сумму цветов).

Однако JavaScript без корректной обработки типов действует иначе:

"1️⃣" (тюбик красной краски) + "2️⃣" (тюбик синей краски) => "12️⃣" (красно-синий тюбик)
// Вместо смешивания красок, они оказываются по соседству.

Только после правильного смешивания красок получится нужный результат:

parseInt("1️⃣", 10) + parseInt("2️⃣", 10) => 3️⃣ (фиолетовый)
// Так добавление чисел приводит к рождению нового цвета!

Особенности сложения в JavaScript

У + есть свои нюансы!

В JavaScript символ + может функционировать по-разному, ведь он перегружен. Если он сталкивается со строкой, он предпочитает конкатенацию строк. Будьте внимательны к типам данных при его использовании.

Подробнее об этом расскажет наш спикер на видео

Хорошие новости: строки не вечны

HTML-поля ввода по умолчанию работают с текстом, но мы можем преобразовать их в числа, используя функции Number() или parseFloat().

Проверка ввода

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

Возможные проблемы и их решение

Нежданная конкатенация

Если результаты сложения больше похожи на соединение строк, возможно, вы пропустили явное преобразование типов. Проверьте код на точность.

Округление десятичных чисел до целых

При использовании parseInt() с десятичными числами, дробная часть теряется. Если требуется сохранить десятичные дроби, используйте parseFloat().

Неправильное основание в parseInt

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

Полезные материалы

1. Выражения и операторы — JavaScript | MDN — подробное изучение арифметических выражений и операторов JavaScript.
2. parseInt() — JavaScript | MDN — освоение функции parseInt в JavaScript.
3. Метод JavaScript parseFloat() — нюансы корректного преобразования строк в числовые значения.
4. Создание HTML-формы — W3Schools Try It Yourself — пример построения простейшей HTML-формы для выполнения операций сложения.
5. Метод JavaScript toFixed() — использование метода toFixed() для форматирования десятичных чисел в JavaScript.
6. Типы входных данных HTML — обзор различных типов HTML-ввода, необходимых при работе с формами и данными пользователя.
7. Руководство по обработке событий | MDN — подробное ознакомление с обработкой событий в JavaScript для интерактивных веб-приложений.