JavaScript - 类型转换
你好，有抱负的JavaScript开发者们！今天，我们将深入探索JavaScript中的类型转换这个迷人的世界。如果你是编程新手，不用担心；我会像多年来指导无数学生一样，一步步引导你完成这次旅程。所以，拿起一杯咖啡（或者你最喜欢的饮料），让我们一起开始吧！
JavaScript 类型转换
在我们深入细节之前，先来了解一下类型转换的含义。想象你有一盒乐高积木，但有些部件是木制的。为了建造你的乐高城堡，你需要将这些木制部件转换成乐高积木。这在JavaScript中基本上就是类型转换——将数据从一种类型转换为另一种类型。
在JavaScript中，我们有两种主要的转换类型：
- 隐式转换（也称为类型强制转换）
- 显式转换（也称为类型转换）
让我们详细探索每一种。
隐式类型转换
隐式转换发生在JavaScript尝试对不同类型的值进行操作时，它会自动进行。就像JavaScript在说：“别担心，我来处理！”然后在幕后转换类型。
转换为字符串（隐式转换）
JavaScript在将东西转换为字符串方面非常友好。它就像那种能和任何人都能聊天的朋友！
let num = 5;
let str = "数字是: " + num;
console.log(str); // 输出: "数字是: 5"
console.log(typeof str); // 输出: "string"在这个例子中，当我们使用+操作符将数字5与一个字符串相加时，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("这将运行，因为'Hello'是真值");
}
if (0) {
console.log("这不会运行，因为0是假值");
}在这些例子中，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。
显式类型转换
显式转换是当我们，作为程序员，接管控制权并告诉JavaScript我们想要的确切类型。这就像你是戏剧的导演，告诉你的演员们要扮演的确切角色。
转换为字符串（显式转换）
我们有一些方法可以将值转换为字符串：
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()更明确地表达了我们的意图。
转换为数字（显式转换）
对于数字转换，我们有相似的选择：
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 numberNumber()和parseInt()更清楚地表达了我们的意图，而一元+是某些开发者使用的快捷方式。
转换为布尔值（显式转换）
布尔值转换非常直接：
let str = "Hello";
let bool1 = Boolean(str);
let bool2 = !!str;
console.log(bool1, typeof bool1); // 输出: true boolean
console.log(bool2, typeof bool2); // 输出: true booleanBoolean()函数清晰且易于阅读。双否定(!!)是某些开发者使用的快捷方式，但初学者可能会感到困惑。
日期转换为字符串/数字
日期在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 (协调世界时)"
console.log(dateNumber); // 输出: 1684154096000 (自1970年1月1日以来的毫秒数)将日期转换为字符串会给我们一个人类可读的格式，而转换为数字会给我们自Unix纪元以来的毫秒数。
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类型转换的土地。记住，熟能生巧，所以不要害怕用这些概念进行实验。谁知道呢？你甚至可能会发现自己在享受将乐高积木变成木块再变回来的过程！
未来的JavaScript大师们，祝你们编程愉快！
Credits: Image by storyset