Преобразование типов в JavaScript: явное и неявное приведение с примерами

Преобразование типов в JavaScript — одна из базовых тем, без которой сложно уверенно писать даже простые скрипты. Вы можете получить число из поля формы, сложить его с другим значением и внезапно увидеть не 30, а строку 1020. В этой статье разберём явное и неявное преобразование типов в JavaScript на практических примерах.

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

Преобразование типов — это перевод значения из одного типа в другой: строки в число, числа в строку, значения в boolean и так далее. В JavaScript это происходит двумя способами:

Главная рекомендация: в важной логике лучше преобразовывать типы явно. Так код легче читать и проще отлаживать.

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

Если нужно получить строковое представление значения, используйте String(value). Это самый понятный и безопасный способ.

const age = 25;
const isAdmin = false;
const emptyValue = null;

console.log(String(age));        // '25'
console.log(String(isAdmin));    // 'false'
console.log(String(emptyValue)); // 'null'

Часто строка получается неявно при использовании оператора +, если один из операндов — строка:

console.log('Возраст: ' + 25); // 'Возраст: 25'
console.log('10' + 20);        // '1020'

Во втором примере JavaScript не складывает числа, а склеивает строки. Это одна из самых частых ошибок при работе с данными из форм.

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

Для строгого преобразования значения в число используйте Number().

console.log(Number('42'));     // 42
console.log(Number('3.14'));   // 3.14
console.log(Number(''));       // 0
console.log(Number('  '));     // 0
console.log(Number('10px'));   // NaN
console.log(Number(true));     // 1
console.log(Number(false));    // 0
console.log(Number(null));     // 0
console.log(Number(undefined)); // NaN

Если строка содержит число и дополнительные символы, могут пригодиться parseInt() и parseFloat():

console.log(parseInt('10px', 10));   // 10
console.log(parseFloat('12.5em'));   // 12.5
console.log(parseInt('px10', 10));   // NaN

Важно: Number('10px') вернёт NaN, потому что вся строка должна быть числом. А parseInt('10px', 10) прочитает число до первого неподходящего символа.

Практический пример: данные из input

Значение из HTML-поля почти всегда приходит как строка. Поэтому перед математическими операциями его нужно преобразовать.

const priceInput = '1500';
const countInput = '3';

const total = Number(priceInput) * Number(countInput);

console.log(total); // 4500

Если забыть преобразование, умножение всё равно может сработать из-за неявного приведения. Но полагаться на это не стоит:

console.log('1500' * '3'); // 4500
console.log('1500' + '3'); // '15003'

Оператор * ожидает числа, поэтому JavaScript пытается преобразовать строки в числа. А оператор + используется и для сложения, и для склеивания строк, поэтому результат может удивить.

Как проверять NaN правильно

NaN означает «Not a Number» — результат неудачного числового преобразования. Проверять его через обычное сравнение нельзя:

const value = Number('abc');

console.log(value);        // NaN
console.log(value === NaN); // false

Используйте Number.isNaN():

const value = Number('abc');

if (Number.isNaN(value)) {
  console.log('Введите корректное число');
}

Для проверки, что значение является конечным числом, полезен Number.isFinite():

function parsePrice(value) {
  const number = Number(value);

  if (!Number.isFinite(number)) {
    return null;
  }

  return number;
}

console.log(parsePrice('999')); // 999
console.log(parsePrice('abc')); // null

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

В JavaScript любое значение можно преобразовать к логическому типу. Есть значения, которые становятся false:

Остальные значения становятся true, включая пустые массивы и объекты.

console.log(Boolean('hello')); // true
console.log(Boolean(''));      // false
console.log(Boolean(0));       // false
console.log(Boolean(1));       // true
console.log(Boolean([]));      // true
console.log(Boolean({}));      // true

Это часто используется в условиях:

const username = '';

if (!username) {
  console.log('Имя пользователя не заполнено');
}

Двойное отрицание !!

Короткий способ преобразовать значение в boolean — двойное отрицание !!. Оно часто встречается в реальном коде, но новичкам может быть неочевидно.

const email = 'user@example.com';
const hasEmail = !!email;

console.log(hasEmail); // true

Для учебного и командного кода Boolean(email) обычно читается лучше, чем !!email.

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

JavaScript автоматически приводит типы во многих ситуациях. Иногда это удобно, но в бизнес-логике может привести к ошибкам.

console.log('5' - 2); // 3
console.log('5' * 2); // 10
console.log('5' / 2); // 2.5
console.log('5' + 2); // '52'

Обратите внимание: почти все арифметические операторы пытаются получить числа, но + при наличии строки выполняет конкатенацию.

Мини-памятка по безопасному коду

Практическая функция для формы

Допустим, пользователь вводит цену и скидку. Напишем функцию, которая безопасно преобразует данные и возвращает итоговую цену.

function calculateDiscountPrice(priceValue, discountValue) {
  const price = Number(priceValue);
  const discount = Number(discountValue);

  if (!Number.isFinite(price) || !Number.isFinite(discount)) {
    return 'Ошибка: цена и скидка должны быть числами';
  }

  if (price < 0 || discount < 0 || discount > 100) {
    return 'Ошибка: проверьте диапазон значений';
  }

  const result = price - price * discount / 100;
  return result.toFixed(2);
}

console.log(calculateDiscountPrice('1000', '15')); // '850.00'
console.log(calculateDiscountPrice('1000px', '15')); // ошибка

Такой подход лучше, чем надеяться, что JavaScript «сам всё поймёт». Вы явно описываете правила и сразу обрабатываете некорректный ввод.

Что изучать дальше

Преобразование типов связано с переменными, операторами, условиями, функциями и работой с DOM. Если хотите не просто запомнить отдельные примеры, а системно освоить язык на практике, посмотрите курс «JavaScript с Нуля до Гуру 2.0» — пошаговый путь к уверенной разработке.

Вывод

Преобразование типов в JavaScript нужно понимать с первых шагов. Используйте String(), Number() и Boolean(), проверяйте результаты числового ввода и будьте осторожны с оператором +. Чем меньше в коде неявной магии, тем проще его поддерживать и тем меньше неожиданных ошибок вы получите.

Источник