JavaScript 类型转换：那些你不知道的秘密（和笑料）
大家好！我是老码，今天咱们不聊高大上的架构，也不谈深奥的算法，咱们聊点接地气的——JavaScript 的类型转换。 类型转换，或者说“类型强制转换”，听起来好像很官方，但其实它就像 JavaScript 这位老兄的“变脸术”，一会儿变成数字，一会儿变成字符串，让人摸不着头脑。
别担心，今天老码就带你扒一扒 JavaScript 类型转换的底裤，让你彻底搞明白它背后的逻辑，以后再遇到 “1 + ‘1’” 这种问题，保证你不再一脸懵逼。
一、啥是类型转换？
简单来说，类型转换就是 JavaScript 在不同类型的值之间自动或手动地进行转换。 就像变形金刚一样，一个变量可以根据需要，从汽车变成机器人，或者从机器人变成飞机。
在 JavaScript 中，数据类型主要分为以下几种：
-
基本类型：
String（字符串）： 用单引号或双引号包裹的文本，比如"hello"、'world'。Number（数字）： 可以是整数，也可以是浮点数，比如10、3.14。Boolean（布尔值）： 只有两个值，true（真）和false（假）。Null（空）： 表示一个空值，只有一个值null。Undefined（未定义）： 表示变量未被赋值，只有一个值undefined。Symbol(ES6 新增): 表示唯一标识符。BigInt(ES2020 新增)： 用于表示任意精度的整数。
-
引用类型：
Object（对象）： 包含属性和方法的集合，比如{ name: '老码', age: 30 }。Array（数组）： 存储有序数据的集合，比如[1, 2, 3]。Function（函数）： 可执行的代码块。
类型转换可以分为两种：
- 隐式转换（Implicit Coercion）： JavaScript 自动进行的类型转换。这是我们今天主要聊的部分，也是最容易让人困惑的地方。
- 显式转换（Explicit Coercion）： 使用 JavaScript 内置的函数或方法进行的类型转换，比如
Number(),String(),Boolean()等。
二、隐式转换：JavaScript 的 “变脸术”
隐式转换是 JavaScript 最令人头疼的地方，也是最能体现 JavaScript 灵活性的地方（或者说，是“任性”的地方）。 让我们看看， JavaScript 在哪些情况下会偷偷摸摸地进行类型转换：
-
字符串连接符
+：当
+运算符连接字符串和其他类型的值时，JavaScript 会将其他类型的值转换为字符串，然后进行字符串连接。console.log(1 + "2"); // 输出 "12" (数字 1 被转换为字符串 "1") console.log(true + "3"); // 输出 "true3" (布尔值 true 被转换为字符串 "true") console.log(null + "4"); // 输出 "null4" (null 被转换为字符串 "null") console.log(undefined + "5");// 输出 "undefined5" (undefined 被转换为字符串 "undefined") console.log([1,2] + '6'); // 输出 "1,26" (数组 [1,2] 被转换为字符串 "1,2") console.log({a:1} + '7'); // 输出 "[object Object]7" (对象 {a:1} 被转换为字符串 "[object Object]")看到了吗？ 只要
+旁边站着一个字符串，其他的值就会乖乖地变成字符串，然后手拉手组成一个新的字符串。 -
*算术运算符
-, `,/,%`：**当这些运算符用于非数字类型的值时，JavaScript 会尝试将这些值转换为数字，然后进行算术运算。 如果转换失败，则会得到
NaN(Not a Number)。console.log("5" - 2); // 输出 3 (字符串 "5" 被转换为数字 5) console.log("10" * "2"); // 输出 20 (字符串 "10" 和 "2" 被转换为数字 10 和 2) console.log("20" / 5); // 输出 4 (字符串 "20" 被转换为数字 20) console.log("hello" * 2); // 输出 NaN (字符串 "hello" 无法转换为数字) console.log(null * 5); // 输出 0 (null 被转换为数字 0) console.log(undefined * 5); // 输出 NaN (undefined 被转换为数字 NaN) console.log(true * 2); // 输出 2 (true 被转换为数字 1) console.log(false * 2); // 输出 0 (false 被转换为数字 0)记住，这些运算符更喜欢数字，所以会尽可能地把其他类型的值变成数字。 如果实在变不成，那就只能无奈地返回
NaN了。 -
比较运算符
==,!=,>,<,>=,<=：比较运算符的类型转换规则比较复杂，但总的来说，JavaScript 会尝试将不同类型的值转换为相同的类型，然后再进行比较。
-
==和!=(宽松相等和宽松不等)：这两个运算符会先进行类型转换，然后再比较值是否相等。 类型转换的规则比较复杂，但可以简单总结为：
- 如果比较的两个值类型相同，则直接比较值是否相等。
- 如果比较的两个值类型不同，则 JavaScript 会尝试将它们转换为相同的类型，然后再进行比较。
console.log(1 == "1"); // 输出 true (字符串 "1" 被转换为数字 1) console.log(true == 1); // 输出 true (布尔值 true 被转换为数字 1) console.log(false == 0); // 输出 true (布尔值 false 被转换为数字 0) console.log(null == undefined); // 输出 true (null 和 undefined 在宽松相等比较中被认为是相等的) console.log("" == 0); // 输出 true (空字符串 "" 被转换为数字 0) console.log([] == false); // 输出 true (空数组 [] 被转换为 false) console.log({} == false); // 输出 false (对象 {} 不等于 false)注意：
==运算符的类型转换规则非常混乱，容易导致意想不到的结果。 因此，强烈建议使用===(严格相等) 运算符，它不会进行类型转换，直接比较值和类型是否都相等。 -
>、<、>=、<=(关系运算符)：这些运算符也会进行类型转换，但规则与
==和!=略有不同。- 如果比较的两个值都是字符串，则按照 Unicode 编码进行比较。
- 如果比较的两个值不是字符串，则 JavaScript 会尝试将它们转换为数字，然后再进行比较。
- 如果其中一个值无法转换为数字，则结果可能难以预测。
console.log("2" > 1); // 输出 true (字符串 "2" 被转换为数字 2) console.log("abc" > 1); // 输出 false (字符串 "abc" 被转换为 NaN，NaN 与任何数字比较都返回 false) console.log("a" > "b"); // 输出 false (按照 Unicode 编码比较，"a" 的编码小于 "b") console.log(null > 0); // 输出 false (null 被转换为数字 0) console.log(null >= 0); // 输出 true (null 被转换为数字 0) console.log(undefined > 0);// 输出 false (undefined 被转换为 NaN) console.log(undefined < 0);// 输出 false (undefined 被转换为 NaN)注意： 关系运算符的类型转换规则也比较复杂，容易导致错误。 因此，在进行比较时，最好确保比较的值是相同类型的，或者使用显式转换进行类型转换。
-
-
逻辑运算符
&&,||,!：逻辑运算符也会进行类型转换，但它们主要关注的是值的真假性 (truthiness and falsiness)。
&&(逻辑与)： 返回第一个假值（falsy value），如果所有值都是真值（truthy value），则返回最后一个值。||(逻辑或)： 返回第一个真值（truthy value），如果所有值都是假值（falsy value），则返回最后一个值。!(逻辑非)： 将值转换为布尔值，然后取反。
在 JavaScript 中，以下值被认为是假值 (falsy value)：
false0(数字零)""(空字符串)nullundefinedNaN
除了以上值，其他所有值都被认为是真值 (truthy value)。
console.log(1 && 2); // 输出 2 (1 和 2 都是真值，返回最后一个值 2) console.log(0 && 2); // 输出 0 (0 是假值，返回第一个假值 0) console.log(1 || 2); // 输出 1 (1 是真值，返回第一个真值 1) console.log(0 || 2); // 输出 2 (0 是假值，2 是真值，返回第一个真值 2) console.log(!0); // 输出 true (0 是假值，取反后为 true) console.log(!"hello"); // 输出 false ("hello" 是真值，取反后为 false)逻辑运算符的类型转换主要用于判断值的真假性，而不是进行数值或字符串的比较。
-
if语句、while循环等：在
if语句、while循环等条件判断语句中，JavaScript 会将条件表达式的值转换为布尔值，然后根据布尔值来决定是否执行相应的代码块。if (1) { console.log("This will be executed."); // 输出 "This will be executed." (1 被转换为 true) } if (0) { console.log("This will not be executed."); // 不会执行 (0 被转换为 false) } let i = 5; while (i) { console.log(i); i--; } // 输出 5, 4, 3, 2, 1 (当 i 变为 0 时，循环结束)这些语句的类型转换规则与逻辑运算符类似，主要关注的是值的真假性。
三、显式转换：掌控你的类型
隐式转换虽然方便，但也容易出错。 为了避免不必要的麻烦，我们可以使用显式转换，明确地告诉 JavaScript 我们想要将一个值转换为哪种类型。
-
Number()： 将值转换为数字。console.log(Number("123")); // 输出 123 console.log(Number("3.14")); // 输出 3.14 console.log(Number("hello")); // 输出 NaN console.log(Number(true)); // 输出 1 console.log(Number(false)); // 输出 0 console.log(Number(null)); // 输出 0 console.log(Number(undefined)); // 输出 NaN console.log(Number([])); // 输出 0 console.log(Number([1])); // 输出 1 console.log(Number([1,2])); // 输出 NaN console.log(Number({})); // 输出 NaN -
String()： 将值转换为字符串。console.log(String(123)); // 输出 "123" console.log(String(3.14)); // 输出 "3.14" console.log(String(true)); // 输出 "true" console.log(String(false)); // 输出 "false" console.log(String(null)); // 输出 "null" console.log(String(undefined)); // 输出 "undefined" console.log(String([1,2,3])); // 输出 "1,2,3" console.log(String({ name: '老码' })); // 输出 "[object Object]" -
Boolean()： 将值转换为布尔值。console.log(Boolean(1)); // 输出 true console.log(Boolean(0)); // 输出 false console.log(Boolean("hello")); // 输出 true console.log(Boolean("")); // 输出 false console.log(Boolean(null)); // 输出 false console.log(Boolean(undefined)); // 输出 false console.log(Boolean([])); // 输出 true (空数组是真值) console.log(Boolean({})); // 输出 true (空对象是真值) -
其他方法：
除了以上三个函数，还有一些其他的方法可以进行类型转换，比如：
parseInt()： 将字符串转换为整数。parseFloat()： 将字符串转换为浮点数。toString()： 将值转换为字符串。
console.log(parseInt("123")); // 输出 123 console.log(parseFloat("3.14")); // 输出 3.14 console.log((123).toString()); // 输出 "123" console.log((true).toString()); // 输出 "true"
四、一些常见的坑和笑话
类型转换是 JavaScript 中最容易出错的地方之一，也是面试官最喜欢问的问题之一。 让我们来看几个常见的坑和笑话：
-
[] + []和[] + {}：console.log([] + []); // 输出 "" (空字符串) console.log([] + {}); // 输出 "[object Object]" (不同的浏览器可能输出不同的结果) console.log({} + []); // 输出 0 (不同的浏览器可能输出不同的结果) console.log({} + {}); // 输出 "[object Object][object Object]"这是因为 JavaScript 在处理
+运算符时，会根据操作数的类型进行不同的处理。 当+运算符连接两个数组时，会将它们转换为字符串，然后进行字符串连接。 当+运算符连接一个数组和一个对象时，会将它们都转换为字符串，然后进行字符串连接。但是，当
{}出现在表达式的开头时，JavaScript 可能会将其解析为一个代码块，而不是一个对象。 这会导致不同的浏览器输出不同的结果。 -
0.1 + 0.2 !== 0.3：console.log(0.1 + 0.2); // 输出 0.30000000000000004 console.log(0.1 + 0.2 === 0.3); // 输出 false这是因为 JavaScript 使用 IEEE 754 标准来表示浮点数，而浮点数在计算机中是以二进制形式存储的，这会导致一些精度问题。 因此，在进行浮点数比较时，最好使用一些误差范围来判断它们是否相等。
-
NaN === NaN：console.log(NaN === NaN); // 输出 falseNaN(Not a Number) 表示一个非数字的值。 在 JavaScript 中，NaN与任何值都不相等，包括它自己。 要判断一个值是否为NaN，可以使用isNaN()函数。console.log(isNaN(NaN)); // 输出 true
五、总结和建议
JavaScript 的类型转换是一把双刃剑。 它可以让我们的代码更加简洁灵活，但也容易导致一些意想不到的错误。 为了更好地掌握类型转换，老码给大家一些建议：
- 理解隐式转换的规则： 了解 JavaScript 在不同情况下会如何进行类型转换，避免踩坑。
- 尽量使用显式转换： 明确地告诉 JavaScript 我们想要将一个值转换为哪种类型，避免不必要的麻烦。
- 使用
===(严格相等) 运算符： 避免==运算符的类型转换带来的问题。 - 注意浮点数的精度问题： 在进行浮点数比较时，使用一些误差范围来判断它们是否相等。
- 多做实验，多踩坑： 通过实践来加深对类型转换的理解。
好了，今天的讲座就到这里。 希望大家通过今天的学习，能够更好地理解 JavaScript 的类型转换，写出更加健壮的代码。 记住，类型转换就像 JavaScript 的 “变脸术”， 只要掌握了它的规律，就能轻松驾驭它，让它为我们所用。
下次再见！ 祝大家编程愉快！