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

Здравствуйте, будущие разработчики JavaScript! Сегодня мы окунемся в fascинирующий мир преобразований типов в JavaScript. Не волнуйтесь, если вы новички в программировании; я буду вести вас по этому пути шаг за шагом, как я делал это для countless студентов на протяжении многих лет моего преподавания. Так что возьмите杯 кофе (или ваш любимый напиток) и давайте начнем!

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

Прежде чем мы углубимся в детали, давайте поймем, что такое преобразование типов. Представьте, что у вас есть коробка с Lego, но некоторые детали сделаны из дерева. Чтобы построить ваш замок Lego, вам нужно преобразовать эти деревянные детали в Lego кирпичи. Это Essentially то, что такое преобразование типов в JavaScript - изменение данных с одного типа на другой.

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

1. Неявное преобразование (также называемое типовой коercией)
2. Явное преобразование (также называемое типовым преобразованием)

Давайте рассмотрим каждый из них подробнее.

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

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

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

JavaScript довольно友好, когда дело доходит до преобразования вещей в строки. Это как тот друг, который может завязать разговор с кем угодно!

let num = 5;
let str = "The number is: " + num;
console.log(str); // Вывод: "The number is: 5"
console.log(typeof str); // Вывод: "string"

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

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

Когда дело доходит до чисел, JavaScript старается сделать все, чтобы это имело смысл, как будто учитель математики расшифровывает неряшливый почерк студента.

let str = "10";
let num = str - 5;
console.log(num); // Вывод: 5
console.log(typeof num); // Вывод: "number"

Здесь JavaScript увидел оператор - и подумал: "Ага! Мы должны делать математику!" Так что он преобразовал строку "10" в число 10 перед вычитанием 5.

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

JavaScript имеет простое правило для преобразования в булевы значения: некоторые значения считаются "истинными" (truthy), а другие "ложными" (falsy). Это похоже на то, как студенты делятся на "присутствующие" и "отсутствующие".

if ("Hello") {
console.log("This will run because 'Hello' is truthy");
}

if (0) {
console.log("This won't run because 0 is falsy");
}

В этих примерах JavaScript неявно преобразует "Hello" в true и 0 в false.

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

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

let x = null;
console.log(+x); // Вывод: 0

Унарный оператор + пытается преобразовать null в число, что结果是 0.

Undefined с числом и булевым значением (Неявное преобразование)

Undefined еще сложнее. Это как тот студент, который не только не сдал домашнее задание, но и не был даже в списке класса!

let x;
console.log(+x); // Вывод: NaN (Не число)
console.log(Boolean(x)); // Вывод: false

При преобразовании в число undefined становится NaN. При преобразовании в булево значение он становится false.

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

Явное преобразование occurs, когда мы, программисты, берем под контроль и говорим JavaScript exactly какой тип мы хотим. Это как быть режиссером спектакля и говорить актерам precisely какие роли они должны играть.

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

У нас есть несколько методов для преобразования в строку:

let num = 123;
let str1 = String(num);
let str2 = num.toString();
let str3 = num + "";

console.log(str1, typeof str1); // Вывод: "123" string
console.log(str2, typeof str2); // Вывод: "123" string
console.log(str3, typeof str3); // Вывод: "123" string

Все эти методы достигают того же результата, но String() и toString() более explicit о наших намерениях.

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

Для преобразования в число у нас есть аналогичные варианты:

let str = "456";
let num1 = Number(str);
let num2 = parseInt(str);
let num3 = +str;

console.log(num1, typeof num1); // Вывод: 456 number
console.log(num2, typeof num2); // Вывод: 456 number
console.log(num3, typeof num3); // Вывод: 456 number

Number() и parseInt() clearer о том, что мы пытаемся сделать, в то время как унарный + - это сокращение, которое некоторые разработчики используют.

Преобразование в булево значение (Явное преобразование)

Преобразование в булево значение很简单:

let str = "Hello";
let bool1 = Boolean(str);
let bool2 = !!str;

console.log(bool1, typeof bool1); // Вывод: true boolean
console.log(bool2, typeof bool2); // Вывод: true boolean

Функция Boolean() clear и читаема. Двойное отрицание (!!) - это сокращение, которое некоторые разработчики используют, но оно может быть запутанным для новичков.

Преобразование даты в строку/число

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

let date = new Date();
let dateString = String(date);
let dateNumber = Number(date);

console.log(dateString); // Вывод: "Mon May 15 2023 12:34:56 GMT+0000 (Coordinated Universal Time)"
console.log(dateNumber); // Вывод: 1684154096000 (миллисекунды с 1 января 1970 года)

Преобразование даты в строку gives us a human-readable format, а преобразование в число gives us the milliseconds since the Unix epoch.

Таблица преобразований в JavaScript

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

Исходное значение	в строку	в число	в булево значение
false	"false"	0	false
true	"true"	1	true
0	"0"	0	false
1	"1"	1	true
"0"	"0"	0	true
"1"	"1"	1	true
NaN	"NaN"	NaN	false
Infinity	"Infinity"	Infinity	true
-Infinity	"-Infinity"	-Infinity	true
""	""	0	false
"20"	"20"	20	true
[ ]	""	0	true
[20]	"20"	20	true
[10,20]	"10,20"	NaN	true
["twenty"]	"twenty"	NaN	true
["ten","twenty"]	"ten,twenty"	NaN	true
function(){}	"function(){}"	NaN	true
{ }	"[object Object]"	NaN	true
null	"null"	0	false
undefined	"undefined"	NaN	false

И вот мы и прошли через страну преобразований типов в JavaScript. Помните, что практика делает perfect, так что не бойтесь экспериментировать с этими концепциями. Кто знает? Вы даже можете обнаружить, что вам нравится процесс превращения Lego кирпичей в деревянные блоки и обратно!

Счастливого кодирования, будущие мастера JavaScript!

Credits: Image by storyset