JavaScript 类型转换

JavaScript 是一种动态类型语言，变量的类型可以在运行时改变。这种灵活性带来了便利，但也容易引发意料之外的行为。理解 类型转换 和 类型强制 是编写可靠代码的关键。

学习目标

区分显式类型转换（手动）与隐式类型强制（自动）
掌握常用类型转换方法（Number()、String()、Boolean()）
理解 JavaScript 在运算和比较中如何自动转换类型
避免因类型强制导致的常见陷阱
掌握最佳实践以提升代码健壮性

类型转换

显式转换

类型转换是由程序员主动、明确地将一个数据类型转换为另一个类型，也称为显式类型转换。

特点

由开发者控制
使用内置函数如 Number()、String()、Boolean()
行为可预测，减少意外

字符串转数字

使用 Number()、parseInt() 或 parseFloat()：

let s = "123";
let n1 = Number(s);        // 123（数字）
let n2 = parseInt("42px"); // 42（忽略非数字部分）
let n3 = parseFloat("3.14abc"); // 3.14

console.log(n1, typeof n1); // 123 "number"

注意：
Number("abc") → NaN
parseInt("10", 2) 可指定进制（二进制）

数字转字符串

使用 String() 或拼接空字符串：

let n = 123;
let s1 = String(n);   // "123"
let s2 = n + "";      // "123"（利用 + 的字符串拼接特性）

console.log(s1, typeof s1); // "123" "string"

布尔值转数字

let bool = true;
let n = Number(bool); // true → 1, false → 0
console.log(n);       // 1

布尔转字符串

let bool = true;
let s = String(bool); // "true"
console.log(s);       // "true"

强制类型转换

隐式转换

强制类型转换是 JavaScript 引擎在特定上下文中自动将一种类型转换为另一种类型，也称为隐式类型转换。

特点：

由 JavaScript 自动执行
常见于算术运算、比较、逻辑判断
可能导致难以预料的结果

字符串 + 数

字符串拼接

let n = 5;
let s = "5";
let res = n + s; // 数字被转为字符串
console.log(res);        // "55"
console.log(typeof res); // "string"

原因：+ 运算符在任一操作数为字符串时，会触发字符串拼接。

布尔值 + 数字

数值运算

let bool = true;
let n = 10;
let res = bool + n; // true → 1
console.log(res);   // 11

规则：在算术运算中，true → 1，false → 0

不同类型的比较

使用 ==

let s = "10";
let n = 10;
console.log(s == n); // true（字符串 "10" 被转为数字 10）

但使用 === 则不会转换：
console.log(s === n); // false（类型不同）

类型转换 vs 类型强制

特性	类型转换（显式）	类型强制（隐式）
执行者	程序员	JavaScript 引擎
方式	手动调用函数（如 `Number()`）	自动发生
可控性	完全可控	不可控，依赖上下文
示例	`Number("5") → 5`	`"5" - 2 → 3`（减法触发数字转换）
安全性	高	低（易出错）

小技巧：
"5" + 2 → "52"（字符串拼接）
"5" - 2 → 3（减法强制转为数字）
同样的操作数，不同运算符，结果完全不同！

常见陷阱

为什么 [] == ![] 返回 true？

console.log([] == ![]); // true

解析步骤：

![] → false（空数组是 truthy，取反为 false）
[] == false → 触发类型强制
[] 转为原始值：[].toString() → ""
"" == false → 两边都转为数字：0 == 0 → true

结论：避免使用 ==，改用 === 可完全规避此类问题。

为什么 "0" == false 是 true？

console.log("0" == false); // true

"0" → 数字 0
false → 数字 0
0 == 0 → true

但：

console.log(Boolean("0")); // true（非空字符串是 truthy！）

这正是类型强制的“双面性”：在比较中 "0" 被视为 0，但在 if 中被视为 true。

最佳实践

优先使用 === 和 !==
避免隐式类型转换带来的不确定性。

显式转换输入数据
尤其是来自用户输入或 API 的数据：

const age = Number(userInputAge);
if (!isNaN(age)) { /* 处理有效数字 */ }

避免混合类型运算
如需拼接，明确使用字符串；如需计算，确保都是数字。
使用 typeof 或 Array.isArray() 检查类型
```
if (typeof value === 'string') { ... }
```

类型强制规则

操作	转换规则
`+`（加法）	若任一操作数为字符串 → 全部转为字符串拼接
`-`, `*`, `/`, `%`	所有操作数转为数字
`==`	复杂规则（建议避免）
`if (x)`	`x` 转为布尔值（falsy/truthy）
`!!x`	显式将 `x` 转为布尔值

重点总结

类型转换 = 手动（安全、可控）
类型强制 = 自动（方便但危险）
永远优先使用 ===
字符串 "0" 是 truthy，但 "0" == false 为 true —— 这就是为什么不能混用 ==
空数组 [] 和空对象 {} 都是 truthy

思考题

以下表达式的结果分别是什么？为什么？

console.log(+"");        // ?
console.log(+"0");       // ?
console.log(!!"0");      // ?
console.log([] + []);    // ?
console.log({} + []);    // ?

如何安全地将用户输入的字符串 " 42 " 转换为整数？
为什么 NaN == NaN 是 false，但 [NaN] == [NaN] 也是 false？两者原因相同吗？