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

Что такое преобразование типов
Явное и автоматическое преобразование
Преобразование в строку
Преобразование в число
prompt() и числа
Преобразование в boolean
Автоматическое преобразование
NaN при преобразовании
Частые ошибки

Преобразование типов - это изменение значения из одного типа данных в другой. Например, строку ‘25’ можно преобразовать в число 25, число 10 в строку ‘10’, а любое значение проверить как true или false.

let age = '25';
let numberAge = Number(age);

console.log(typeof age);
console.log(typeof numberAge);

В консоли будет:

string
number

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

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

У каждого значения в JavaScript есть тип данных: строка, число, boolean, null, undefined и другие.

Иногда для работы нужно изменить тип значения. Например, пользователь вводит возраст через prompt(). На экране это выглядит как число, но JavaScript получает строку.

let age = prompt('Сколько вам лет?');

console.log(typeof age);

Если пользователь введет 25, результат все равно будет:

string

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

Явное и автоматическое преобразование

Преобразование типов бывает явным и автоматическим.

Явное преобразование - это когда мы сами говорим JavaScript, в какой тип нужно привести значение.

let value = '10';
let numberValue = Number(value);

Мы явно использовали Number(), поэтому понятно, что хотим получить число.

Автоматическое преобразование - это когда JavaScript сам меняет тип во время выполнения кода.

console.log('10' * 2);

Результат:

Строка ‘10’ была автоматически преобразована в число, потому что оператор умножения работает с числами.

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

Преобразование в строку

Чтобы преобразовать значение в строку, можно использовать String().

let value = 25;
let textValue = String(value);

console.log(textValue);
console.log(typeof textValue);

В консоли будет:

25
string

Число 25 превратилось в строку ‘25’.

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

console.log(String(true));
console.log(String(false));
console.log(String(null));
console.log(String(undefined));

Результат:

true
false
null
undefined

Все эти значения стали строками. То есть на экране они выглядят привычно, но тип у них уже string.

Преобразование в число

Чтобы преобразовать значение в число, используют Number().

let value = '100';
let numberValue = Number(value);

console.log(numberValue);
console.log(typeof numberValue);

Результат:

100
number

Если строка содержит обычное число, преобразование пройдет ожидаемо.

console.log(Number('10'));
console.log(Number('10.5'));
console.log(Number(''));
console.log(Number('   '));

Результат:

Пустая строка и строка из пробелов при преобразовании в число дают 0. Это может выглядеть неожиданно, поэтому такие случаи лучше проверять отдельно.

Если строку нельзя превратить в число, получится NaN.

console.log(Number('JavaScript'));

Результат:

NaN

prompt() и числа

prompt() всегда возвращает строку. Это одна из самых частых причин ошибок в первых задачах.

let first = prompt('Введите первое число');
let second = prompt('Введите второе число');

console.log(first + second);

Если пользователь введет 10 и 5, результатом будет:

JavaScript объединил две строки, а не сложил два числа.

Исправим код с помощью Number():

let first = Number(prompt('Введите первое число'));
let second = Number(prompt('Введите второе число'));

console.log(first + second);

Теперь результат будет:

Такой вариант уже подходит для простых вычислений.

Преобразование в boolean

Чтобы преобразовать значение в логический тип, используют Boolean().

console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean('JavaScript'));
console.log(Boolean(''));

Результат:

true
false
true
false

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

false;
0;
пустая строка ”;
null;
undefined;
NaN.

Остальные значения чаще всего дают true.

console.log(Boolean('false'));
console.log(Boolean('0'));
console.log(Boolean(' '));

Результат:

true
true
true

Строки ‘false’, ‘0’ и строка с пробелом не пустые, поэтому они преобразуются в true.

Автоматическое преобразование

JavaScript может преобразовывать типы автоматически. Иногда это удобно, но иногда дает неожиданный результат.

Например, при умножении строка с числом преобразуется в число:

console.log('10' * 2);

Результат:

Но при сложении срабатывает объединение строк:

console.log('10' + 2);

Результат:

Оператор + умеет и складывать числа, и объединять строки. Если рядом есть строка, JavaScript часто выбирает строковое объединение.

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

let value = '10';

console.log(Number(value) + 2);

Результат:

NaN при преобразовании

NaN появляется, когда JavaScript пытался получить число, но не смог.

let value = Number('урок');

console.log(value);

Результат:

NaN

Строка ‘урок’ не является числом, поэтому получить нормальное числовое значение не получилось.

То же самое может произойти при вычислениях:

console.log('JavaScript' * 2);

Результат:

NaN

На следующих уроках мы отдельно разберем проверки isNaN() и Number.isNaN(). Они помогают понимать, получилось ли нормальное число.

Частые ошибки

Первая ошибка - забывать, что prompt() возвращает строку.

let age = prompt('Сколько вам лет?');

console.log(age + 1);

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

Вторая ошибка - ждать от Number() чуда.

console.log(Number('10px'));

Результат:

NaN

Number() требует, чтобы вся строка была похожа на число. Для строк вроде ‘10px’ позже разберем parseInt() и parseFloat().

Третья ошибка - думать, что строка ‘false’ превращается в false.

console.log(Boolean('false'));

Результат:

true

Это непустая строка, поэтому она дает true.

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

Что дальше

Мы разобрали, как значения преобразуются в строки, числа и boolean, чем явное преобразование отличается от автоматического и почему prompt() часто становится причиной ошибок.

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