Преобразование типов в JavaScript

1. Зачем вообще нужны преобразования типов?

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

Есть два варианта:
- Явное преобразование (explicit): когда вы сами явно говорите, что и во что хотите превратить.
- Неявное преобразование (implicit): когда JavaScript сам решает, что и как преобразовать, исходя из контекста.

Если вы когда-нибудь видели что-то вроде:

console.log("5" + 2); // "52"
console.log("5" - 2); // 3

— поздравляю, вы уже сталкивались с неявным преобразованием типов!

2. Неявное преобразование типов: черная магия JavaScript

Как это работает?

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

Примеры неявного преобразования

console.log("10" + 5); // "105"
console.log("10" - 5); // 5
console.log(1 + true); // 2
console.log("5" * "2"); // 10
console.log("abc" * 2); // NaN

Почему так?
- При сложении (+), если один из операндов — строка, второй тоже превращается в строку, и происходит конкатенация.
- При вычитании (-), умножении (*), делении (/) оба операнда превращаются в числа.
- true становится 1, false — 0.
- Если строку невозможно превратить в число ("abc"), результат — NaN (Not a Number).

Аналогия:
Представьте, что JavaScript — это официант, который всегда старается угодить: "Ой, вы хотите сложить яблоко и банан? Ну, я попробую сделать из них салат...".

Особенности сравнения

console.log("5" == 5); // true (нестрогое сравнение — преобразует типы)
console.log("5" === 5); // false (строгое сравнение — типы не совпадают)

3. Явное преобразование типов

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

Преобразование в число: Number(), parseInt(), parseFloat()

• Number(value) — превращает значение (любого типа) в число.
• parseInt(value, radix) — превращает строку в целое число.
• parseFloat(value) — превращает строку в число с плавающей запятой.

Примеры:

console.log(Number("42")); // 42
console.log(Number("42abc")); // NaN
console.log(parseInt("42abc")); // 42
console.log(parseFloat("3.14abc")); // 3.14
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number("")); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN

Важный момент:
Number() — очень строгий, если строка не полностью число, вы получите NaN.
parseInt() и parseFloat() — "терпимее": они читают число до первого неподходящего символа.

Преобразование в строку: String(), .toString()

• String(value) — превращает любое значение в строку.
• value.toString() — метод большинства типов (но не null и undefined).

Примеры:

console.log(String(123)); // "123"
console.log((123).toString()); // "123"
console.log(String(true)); // "true"
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"

Преобразование в boolean: Boolean()

• Boolean(value) — превращает значение в true или false по определённым правилам.

Примеры:

console.log(Boolean(0)); // false
console.log(Boolean(1)); // true
console.log(Boolean("")); // false
console.log(Boolean("hello")); // true
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean([])); // true (даже пустой массив — true!)
console.log(Boolean({})); // true (и пустой объект — true!)

Запомните:
- "Пустота" (0, "", null, undefined, NaN, false) — это false.
- Всё остальное — true.

4. Быстрые трюки для преобразования типов

Иногда в коде можно встретить "магические" способы преобразования:

• +value — превращает в число (унарный плюс).
• !!value — двойное отрицание, превращает в boolean.

Примеры:

let str = "123";
console.log(+str); // 123
console.log(+"abc"); // NaN

let val = "hello";
console.log(!!val); // true

let empty = "";
console.log(!!empty); // false

Внимание:
Такие приемы экономят место, но не всегда делают код понятнее для новичков. Используйте их осознанно!

5. Практика: применяем преобразование типов в вашем приложении

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

Пример: суммируем числа, введённые пользователем

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

let sum = 0;
let input;

while (true) {
    input = prompt("Введите число (отрицательное — для выхода):");
    if (input === null) break; // пользователь нажал "Отмена"
    let number = Number(input); // Явно преобразуем строку в число!
    if (isNaN(number)) {
        alert("Это не число! Попробуйте снова.");
        continue;
    }
    if (number < 0) break;
    sum += number;
}

alert("Сумма введённых чисел: " + sum);

На что обратить внимание:
- prompt всегда возвращает строку, даже если пользователь ввёл число.
- Мы явно преобразуем ввод в число с помощью Number().
- Проверяем, не получилось ли NaN.
- Складываем только если число неотрицательное.

6. Таблица: Как разные значения преобразуются в число, строку, boolean

7. Подробности и подводные камни

Почему "5" + 2 — это "52", а "5" - 2 — это 3?

• Оператор + в JavaScript используется и для сложения, и для склеивания строк. Если хотя бы один операнд — строка, второй тоже преобразуется в строку, и происходит конкатенация.
• Операторы -, *, / всегда сначала пытаются преобразовать оба операнда в числа.

Как работает преобразование к boolean в условиях?

В условиях (if, while, for) любое выражение автоматически преобразуется к boolean. Поэтому такие конструкции, как:

if ("") { ... } // не выполнится
if ("abc") { ... } // выполнится
if (0) { ... } // не выполнится
if ([]) { ... } // выполнится!

— работают именно так, потому что пустая строка и 0 — это "ложь", а непустая строка и даже пустой массив — "истина".

8. Практика: преобразования в нашем приложении

Пример: проверка ввода пользователя

Допустим, мы хотим попросить пользователя ввести возраст и убедиться, что это корректное число:

let ageStr = prompt("Введите ваш возраст:");
let age = Number(ageStr);

if (isNaN(age) || age <= 0) {
    alert("Возраст должен быть положительным числом!");
} else {
    alert("Вам " + age + " лет.");
}

Пример: преобразование к boolean

Вы хотите узнать, ввёл ли пользователь какое-то значение (не пустую строку):

let name = prompt("Введите ваше имя:");
if (!!name) {
    alert("Привет, " + name + "!");
} else {
    alert("Вы не ввели имя :(");
}

9. Типичные ошибки при преобразовании типов

Ошибка №1: Ожидание автоматического преобразования там, где его нет

Многие новички думают, что если написать if (input), то это сработает только для чисел. Но если input = "0", то условие выполнится, потому что непустая строка считается true.

Ошибка №2: Использование нестрогого сравнения (==)

Нестрогое сравнение (==) может привести к неожиданным результатам из-за неявного преобразования типов:

console.log(false == 0); // true
console.log("" == 0); // true
console.log(null == undefined); // true
console.log(" \t\n" == 0); // true

Лучше использовать строгое сравнение (===), чтобы избежать сюрпризов.

Ошибка №3: Преобразование к числу с помощью parseInt без указания системы счисления

console.log(parseInt("08")); // 8 в современных браузерах, но в старых — 0!
console.log(parseInt("08", 10)); // 8 всегда

Ошибка №4: Попытка вызвать .toString() на null или undefined

let x = null;
console.log(x.toString()); // Ошибка! Нельзя вызвать метод у null

Используйте String(x) — это безопаснее.

Ошибка №5: Ожидание, что Boolean([]) или Boolean({}) дадут false

В JavaScript пустой массив и пустой объект — это true! Не путайте с Python и некоторыми другими языками.