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

В этой статье вы узнаете о преобразовании типов в JavaScript и разберете разные виды приведения на примерах.

Приведение типов — это процесс преобразования данных одного типа в другой. Например, преобразование строковых данных в числовые.

В JavaScript существует два типа приведения типов:

Неявное преобразование — происходит автоматически.
Явное преобразование — нужно делать вручную.

Неявное преобразование в JavaScript

JavaScript умеет автоматически преобразовать один тип данных в другой — это неявное преобразование.

Неявное преобразование в строку (String)

// когда строка используется с оператором +, 
// оба операнда автоматически преобразовываются в строковый тип

let result;

result = '3' + 2; 
console.log(result) // "32"

result = '3' + true; 
console.log(result); // "3true"

result = '3' + undefined; 
console.log(result); // "3undefined"

result = '3' + null; 
console.log(result); // "3null"

Примечание. Обратите внимание, что когда число добавляется к строке, JavaScript преобразует число в строку перед конкатенацией.

Неявное преобразование в число (Number)

// когда строки используются с операторами - , / , * 
// оба операнда автоматически преобразовываются в числовой тип

let result;

result = '4' - '2'; 
console.log(result); // 2

result = '4' - 2;
console.log(result); // 2

result = '4' * 2;
console.log(result); // 8

result = '4' / 2;
console.log(result); // 2

Неявное преобразование нечисловой строки в NaN

// когда строки, которые нельзя преобразовать в число, 
// используются с операторами - , / , *
// они преобразовываются в тип NaN

let result;

result = 'привет' - 'мир';
console.log(result); // NaN

result = '4' - 'привет';
console.log(result); // NaN

Неявное преобразование логического значения в число (Number)

// при преобразовании логического значения
// true преобразуется в 1, false в 0

let result;

result = '4' - true;
console.log(result); // 3

result = 4 + true;
console.log(result); // 5

result = 4 + false;
console.log(result); // 4

Примечание. JavaScript считает 0 как false, а все ненулевые числа как true. И если true преобразуется в число, результатом всегда будет 1.

Неявное преобразование значения null в число (Number)

// null преобразуется 0, когда используется с числами

let result;

result = 4 + null;
console.log(result);  // 4

result = 4 - null;
console.log(result);  // 4

Значение undefined с числами, логическими значениями и null

// при использовании математических операций с undefined 
// и числами, логическими значениями или значением null,
// возвращается NaN

let result;

result = 4 + undefined;
console.log(result);  // NaN

result = 4 - undefined;
console.log(result);  // NaN

result = true + undefined;
console.log(result);  // NaN

result = null + undefined;
console.log(result);  // NaN

Явное преобразование JavaScript

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

Явное преобразование в число (Number)

Для преобразования числовых строк и булевых значений в числа используют метод Number().

let result;

// строка → число
result = Number('324');
console.log(result); // 324

result = Number('324e-1')  
console.log(result); // 32.4

// логическое значение → число
result = Number(true);
console.log(result); // 1

result = Number(false);
console.log(result); // 0

Пустая строка или null при преобразовании вернет 0.

let result;
result = Number(null);
console.log(result);  // 0

let result = Number(' ')
console.log(result);  // 0

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

let result;
result = Number("привет");
console.log(result); // NaN

result = Number(undefined);
console.log(result); // NaN

result = Number(NaN);
console.log(result); // NaN

Числа также можно получать из строк используя функции parseInt(), parseFloat(), унарный оператор + и Math.floor().

let result;
result = parseInt("20.01");
console.log(result); // 20

result = parseFloat("20.01");
console.log(result); // 20.01

result = +"20.01";
console.log(result); // 20.01

result = Math.floor("20.01");
console.log(result); // 20

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

Чтобы преобразовать другие типы данных в строки используют либо String(), либо toString().

// число → строка

let result;
result = String(324);
console.log(result);  // "324"

result = String(2 + 4);
console.log(result); // "6"

// другие типы данных → строка
result = String(null);
console.log(result); // "null"

result = String(undefined);
console.log(result); // "undefined"

result = String(NaN);
console.log(result); // "NaN"

result = String(true);
console.log(result); // "true"

result = String(false);
console.log(result); // "false"

// использование toString()
result = (324).toString();
console.log(result); // "324"

result = true.toString();
console.log(result); // "true"

Примечание. String() преобразовывает null и undefined в строку. toString() при попытке преобразовать null выдаст ошибку.

Явное преобразование в логический тип (Boolean)

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

Значения undefined, null, 0, NaN, '' преобразуются в false.

let result;
result = Boolean('');
console.log(result); // false

result = Boolean(0);
console.log(result); // false

result = Boolean(undefined);
console.log(result); // false

result = Boolean(null);
console.log(result); // false

result = Boolean(NaN);
console.log(result); // false

Все остальные значения — в true.

result = Boolean(324);
console.log(result); // true

result = Boolean("привет");
console.log(result); // true

result = Boolean(' ');
console.log(result); // true

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

Вот шпаргалка по преобразованиям типов в типы String, Number и Boolean.

Значение	→ String	→ Number	→ Boolean
1	"1"	1	true
0	"0"	0	false
"1"	"1"	1	true
"0"	"0"	0	true
"десять"	"десять"	NaN	true
true	"true"	1	true
false	"false"	0	false
null	"null"	0	false
undefined	"undefined"	NaN	false
''	""	0	false
' '	" "	0	true