Преобразование типов и truthy / falsy
JavaScript умеет автоматически конвертировать одни типы в другие — это одна из самых важных и часто путающих особенностей языка. Разберём явное и неявное преобразование, а также концепцию truthy/falsy, которая пронизывает весь JS-код.
🔄 Явное преобразование типов
Явное преобразование — когда программист сам говорит JavaScript: «преобразуй это в такой-то тип». Это предсказуемо и понятно. Для явного преобразования есть специальные функции.
Number() — преобразовать в число
Попытается преобразовать значение в число. Если не получится — вернёт NaN.
console.log(Number("42")); // 42 (строка → число)
console.log(Number("3.14")); // 3.14
console.log(Number("")); // 0 (пустая строка → 0)
console.log(Number(" ")); // 0 (строка из пробелов → 0)
console.log(Number("abc")); // NaN (не число → NaN)
console.log(Number(true)); // 1 (true → 1)
console.log(Number(false)); // 0 (false → 0)
console.log(Number(null)); // 0 (null → 0)
console.log(Number(undefined)); // NaN (undefined → NaN)
parseInt() и parseFloat() — парсинг строк
parseInt читает строку слева направо и берёт целую часть числа, пока встречает цифры. parseFloat — то же, но берёт дробное число. Удобны когда строка содержит и число и текст.
console.log(parseInt("42px")); // 42 (читает "42", останавливается на "p")
console.log(parseInt("100abc")); // 100
console.log(parseInt("abc100")); // NaN (начинается не с цифры!)
console.log(parseInt("3.7")); // 3 (только целая часть)
console.log(parseFloat("3.14em")); // 3.14
console.log(parseFloat(" 5.5 ")); // 5.5 (пробелы игнорируются)
// parseInt принимает основание системы счисления вторым аргументом:
console.log(parseInt("FF", 16)); // 255 (шестнадцатеричное → десятичное)
String() — преобразовать в строку
Работает с любым значением и всегда возвращает строку. Эквивалентно вызову метода .toString().
console.log(String(42)); // "42"
console.log(String(3.14)); // "3.14"
console.log(String(true)); // "true"
console.log(String(false)); // "false"
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"
// Альтернатива — метод .toString():
console.log((255).toString(16)); // "ff" (в шестнадцатеричном виде!)
Boolean() — преобразовать в булево
Преобразует значение в true или false. Это напрямую связано с концепцией truthy/falsy, которую разберём далее.
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(1)); // true
console.log(Boolean("hello")); // true
console.log(Boolean([])); // true (пустой массив — truthy!)
console.log(Boolean({})); // true (пустой объект — truthy!)
🪄 Неявное преобразование (type coercion)
Неявное преобразование — когда JavaScript сам конвертирует типы за вас, не спрашивая. Это происходит в операциях, сравнениях, условиях. Понимание этого поведения критически важно, потому что оно часто удивляет.
// Оператор + со строкой даёт строку:
console.log("5" + 3); // "53" (не 8!) — число превращается в строку
console.log(3 + "5"); // "35"
// Другие операторы преобразуют строку в число:
console.log("5" - 3); // 2 (строка "5" → число 5)
console.log("6" / 2); // 3
console.log("4" * 2); // 8
// Условия — любое значение преобразуется в boolean:
if ("hello") {
console.log("Строка — это truthy!"); // выполнится
}
if (0) {
console.log("Это не выполнится"); // 0 — falsy
}
// Двойное равенство == делает неявное преобразование:
console.log("5" == 5); // true! (сравнивает по значению после конвертации)
console.log(null == undefined); // true!
// Тройное равенство === НЕ делает преобразование:
console.log("5" === 5); // false (разные типы)
console.log(null === undefined); // false
🚨 Важное правило: всегда используйте === (тройное равенство)
Оператор == сравнивает с неявным преобразованием типов и ведёт себя непредсказуемо. Тройное === сравнивает и тип, и значение без конвертации — результат всегда ожидаемый. Большинство современных стайл-гайдов запрещают ==.
// Странности двойного равенства == (поэтому его и избегают!):
console.log(false == 0); // true
console.log("" == 0); // true
console.log("" == false); // true
console.log(null == 0); // false (вот это сюрприз!)
console.log(null == false); // false (ещё один сюрприз!)
// С тройным === всё предсказуемо:
console.log(false === 0); // false
console.log("" === 0); // false
⚖️ Truthy и Falsy: истина и ложь в JavaScript
Когда JavaScript проверяет условие (в if, в while, в логических операторах), он преобразует любое значение в true или false. Значения, которые превращаются в false, называются falsy. Всё остальное — truthy.
false0"" (пустая строка)nullundefinedNaN- Любое ненулевое число:
1,-1,3.14,Infinity - Любая непустая строка:
"hello","0","false"(строка "false" — truthy!) - Массивы и объекты, даже пустые:
[],{} - Функции
// Truthy/falsy в условиях:
let username = ""; // пустая строка — falsy
if (username) {
console.log("Привет, " + username); // не выполнится
} else {
console.log("Имя не задано"); // выполнится
}
let count = 0; // 0 — falsy
if (count) {
console.log("Есть элементы"); // не выполнится
}
let items = []; // пустой массив — TRUTHY!
if (items) {
console.log("Массив существует"); // выполнится! (даже пустой)
}
// Чтобы проверить пустой массив, используйте:
if (items.length > 0) {
console.log("В массиве есть элементы");
}
Truthy/falsy активно используется в коде для коротких проверок:
// Значение по умолчанию с оператором || (ИЛИ):
function greet(name) {
let displayName = name || "Гость"; // если name — falsy (пустое, null, etc)
console.log(`Привет, ${displayName}!`);
}
greet("Иван"); // Привет, Иван!
greet(""); // Привет, Гость!
greet(null); // Привет, Гость!
greet(); // Привет, Гость!
// Современный способ — оператор ??(nullish coalescing):
// ?? выбирает правый операнд только если левый — null или undefined (не 0 или "")
let price = 0;
let display1 = price || "Бесплатно"; // "Бесплатно" (0 — falsy!)
let display2 = price ?? "Бесплатно"; // 0 (0 — не null/undefined)
🔑 Запомните: в JavaScript нет понятия «пустое значение», есть понятие «falsy». Пустая строка, ноль, null, undefined, NaN — всё это разные falsy-значения. Это не одно и то же, просто все они преобразуются в false в булевом контексте.
💼 Практические паттерны
Понимание truthy/falsy и преобразований открывает доступ к распространённым идиомам JavaScript-кода:
// 1. Проверка, что пользователь ввёл что-то:
const input = " Иван ".trim();
if (!input) {
console.log("Поле не может быть пустым");
}
// 2. Двойное отрицание !! — преобразовать в boolean:
console.log(!!"hello"); // true
console.log(!!0); // false
console.log(!!null); // false
// Это эквивалент Boolean(), но короче.
// 3. Получить число из пользовательского ввода:
const userInput = " 42 ";
const number = Number(userInput.trim()); // 42
if (Number.isNaN(number)) {
console.log("Введите корректное число");
}
// 4. Безопасное преобразование с проверкой:
function toNumber(value) {
const n = Number(value);
return Number.isNaN(n) ? 0 : n; // если не число — возвращаем 0
}
console.log(toNumber("42")); // 42
console.log(toNumber("abc")); // 0
✅ Итоги урока
- Явное преобразование:
Number(),String(),Boolean(),parseInt(),parseFloat() - Неявное преобразование — JavaScript конвертирует автоматически в операциях (в + со строкой — получается строка, в - / * — число)
- Всегда используйте
===(не==) — тройное равно не делает неявных преобразований - 6 falsy-значений:
false,0,"",null,undefined,NaN - Всё остальное — truthy, включая пустые массивы
[]и объекты{} - Оператор
||возвращает первый truthy или последний falsy — используется для значений по умолчанию - Оператор
??— только дляnull/undefined, не трогает 0 и пустую строку !!— двойное отрицание — короткий способ преобразовать в boolean
В следующем уроке разберём ошибки и отладку — как читать сообщения об ошибках и работать с консолью. 🚀
Тест: Преобразование типов и truthy/falsy
8 вопросов