Что произойдет при сложении числа и строки?

Что произойдет при сложении числа и строки в JavaScript?

При сложении числа и строки в JavaScript происходит неявное преобразование типов (type coercion), и результатом всегда будет строка. Это поведение связано с тем, что оператор + в JavaScript выполняет две функции: сложение чисел и конкатенацию строк. Когда один из операндов является строкой, язык отдает приоритет операции конкатенации.

Механизм преобразования

JavaScript использует следующие шаги при выполнении операции число + строка:

1. Обнаружение строкового операнда: Если хотя бы один операнд — строка, + интерпретируется как оператор конкатенации.
2. Преобразование числа в строку: Числовой операнд неявно преобразуется в строковое представление.
3. Конкатенация: Две строки объединяются в новую строку.

console.log(5 + "10"); // "510"
console.log(12.5 + " apples"); // "12.5 apples"
console.log(-3 + "px"); // "-3px"

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

Случай с другими типами данных

Важно понимать, что это поведение распространяется не только на примитивные числа:

console.log(true + " answer"); // "true answer" (boolean преобразуется в строку)
console.log(null + " value"); // "null value"
console.log(undefined + " text"); // "undefined text"
console.log({} + " object"); // "[object Object] object"
console.log([1, 2] + " array"); // "1,2 array"

Особый случай: порядок операндов

Порядок операндов не имеет значения — результат всегда будет строкой:

console.log("Цена: " + 100); // "Цена: 100"
console.log(100 + " рублей"); // "100 рублей"

Отличие от других арифметических операторов

Важное исключение: другие арифметические операторы (-, *, /, %) работают иначе — они преобразуют строки в числа:

console.log("10" - 5); // 5 (строку "10" преобразует в число 10)
console.log("10" * 2); // 20
console.log("10" / 2); // 5
console.log("10" - "5"); // 5 (обе строки преобразуются в числа)

Почему это важно знать на практике

Понимание этого поведения критически важно для:

• Предотвращения ошибок в вычислениях, особенно при работе с пользовательским вводом или данными из API
• Осознанного выбора между явным и неявным преобразованием типов
• Оптимизации производительности (явное преобразование обычно более предсказуемо)

Рекомендации по избеганию неявных преобразований

Чтобы сделать код более предсказуемым и читаемым:

// Вместо неявного преобразования
let total = price + " рублей"; // Может привести к неожиданностям

// Используйте явное преобразование
let total1 = String(price) + " рублей";
let total2 = price.toString() + " рублей";
let total3 = `${price} рублей`; // Шаблонные строки (ES6)

// Для сложения чисел, полученных из строк
let sum = Number(str1) + Number(str2);
let sum2 = +str1 + +str2; // Унарный плюс для преобразования

Заключение

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