JavaScript 中的类型转换机制？

一、类型转换的两种模式

1. 显式转换（手动翻译）

你主动告诉 JavaScript 如何转换类型，比如：

let num = Number("123"); // 字符串 → 数字：123
let str = String(123);   // 数字 → 字符串："123"
let bool = Boolean(0);   // 数字 → 布尔值：false

2. 隐式转换（自动翻译）

JavaScript 偷偷帮你转换，但规则可能反直觉，比如：

"5" + 3 = "53"   // 数字3被转成字符串拼接
"5" - 3 = 2      // 字符串"5"被转成数字计算

---

二、隐式转换的核心规则

场景1：算术运算（+、-、*、/）

• + 运算：只要有一个是字符串，全部转字符串拼接。

  "5" + 3 → "53"   // 3被转成"3"
  5 + "3" → "53"  
  

• -、*、/ 运算：全部转数字计算。

  "5" - 3 → 2      // "5"转成5
  "10" / "2" → 5   // 都转成数字
  

场景2：比较运算（==、>、<）

• == 的奇怪规则：

  0 == false     // true（false转成0）
  "" == false    // true（""和false都转成0）
  null == undefined  // true（特殊规定）
  [] == ""       // true（数组转成空字符串）
  

• === 严格相等：不转换类型，直接比较值和类型。

  0 === false    // false（类型不同）
  

场景3：逻辑运算（if、&&、||）

• 非布尔值转布尔：

  if ("hello") { ... }  // "hello"转成true
  if (0) { ... }        // 0转成false
  

---

三、常见转换表（一看就懂）

转数字（Number()）

原始值	转换结果	例子
"123"	123	Number("123") → 123
"12.3"	12.3	Number("12.3") → 12.3
"123abc"	NaN	Number("123abc") → NaN
""（空字符串）	0	Number("") → 0
null	0	Number(null) → 0
undefined	NaN	Number(undefined) → NaN
true/false	1/0	Number(true) → 1

转布尔（Boolean()）

原始值	转换结果	规则
0、-0	false	所有假值：
""（空字符串）	false	0, "", null,
null	false	undefined, NaN,
undefined	false	false → 全转false
NaN	false	其他值都转true
"abc"、123	true

---

四、坑点避雷指南

1. parseInt vs Number

• parseInt：从字符串开头解析数字，忽略非数字后缀。

  parseInt("123px") → 123   // 忽略"px"
  parseInt("abc") → NaN     // 开头不是数字
  

• Number：整个字符串必须是有效数字，否则返回 NaN。

  Number("123px") → NaN
  

2. 对象转基本类型

对象（如数组、函数）会先调用 valueOf() 或 toString() 转成基本类型：

[] + {} → "[object Object]"  
// 解释：[]转成""，{}转成"[object Object]"，拼接成结果
{} + [] → 0  
// 解释：开头的{}被当作空代码块，+[]转成0

3. 避免隐式转换的骚操作

• 使用 === 代替 ==。
• 用 Number()、String() 显式转换。
• 使用 !! 快速转布尔：

  let isTrue = !!value; // 等价于 Boolean(value)
  

---

总结

JavaScript 类型转换就像“自动翻译”，方便但容易出错：

• 显式转换：主动控制，减少意外。
• 隐式转换：记住核心规则，多用 ===。
• 工具辅助：使用 TypeScript 增强类型检查。