【JavaScript】✨0、1与"true"的恋爱物语：JS类型转换大揭秘

1. 前言

JavaScript 是动态语言，变量类型灵活多变！但运算符们可是有"小脾气"的------它们对数据类型有要求。如果遇到"不对付"的类型，JS 就会悄悄进行类型转换 。本文将带你理清类型转换的规则，先讲手动转换 ，再讲自动转换。

1.1 必备小知识 🔑

Object.prototype.valueOf()

它的作用是返回对象的值。默认直接返回对象本身。

const obj = { a: 1, b: 2 };
console.log(obj.valueOf()); // { a: 1, b: 2 } 
console.log(obj === obj.valueOf()); // true ✅

const arr = [1, 2, 3];
console.log(arr.valueOf()); // [1, 2, 3]
console.log(arr === arr.valueOf()); // true ✅

Object.prototype.toString()

它的作用是返回对象的字符串形式。默认返回类型字符串。但注意啦！数组、字符串、函数、Date 对象都"偷偷"改写了这个方法：

const obj = { a: 1, b: 2 };
const arr = [1, 2, 3];
const str = '123';
function test() { return 123; }
const date = new Date();

console.log(obj.toString()); // "[object Object]" 
console.log(arr.toString()); // "1,2,3" 
console.log(str.toString()); // "123" 
console.log(test.toString()); // "function test() { return 123; }" 
console.log(date.toString()); // "Wed Jul 09 2025 11:42:37 GMT+0800 (中国标准时间)"

---

2. 手动转换（显式转换）

2.1 Number() ➡️ 转数字

用它可以把任意值变成数字，分两种情况：

🔢 原始类型值

类型	转换结果
数字	原样返回
字符串	能转数字 ➡️ 数字；不能 ➡️ NaN；空串 ➡️ 0
布尔值	true ➡️ 1；false ➡️ 0
undefined	➡️ NaN
null	➡️ 0

Number(324);        // 324
Number("324");      // 324
Number("324abc");   // NaN 🤔
Number("");         // 0 

Number(true);       // 1 ✅
Number(false);      // 0 ✅

Number(undefined);  // NaN
Number(null);       // 0

📦 引用类型值（对象、数组等）

规则三步走：

1. 先调用对象的 valueOf() 方法。如果返回原始值 ，就用 Number() 转它。
2. 如果 valueOf() 返回对象 ，再调用 toString() 方法。如果返回原始值 ，就用 Number() 转它。
3. 如果 toString() 也返回对象，报错！❌

简单记： Number(对象) 通常返回 NaN，除非是只含一个数字的数组（如 Number([5]) // 5）。

🤔 Number() vs parseInt() vs parseFloat()

函数	Number()	parseInt(string, radix)	parseFloat(string)
功能	严格转数字	从字符串开头解析整数	从字符串开头解析浮点数
特点	整体转换	遇到非数字(除开头±)就停，返回已解析部分	遇到非数字(除开头±或第一个小数点)就停
空字符串	➡️ 0	➡️ NaN	➡️ NaN
忽略空格	✅	✅	✅
支持进制	自动识别十进制	✅ (通过 radix 参数)	❌ (只认十进制)

Number("123abc");   // NaN (整体不能转)
parseInt("123abc"); // 123 (解析到字母停)
parseFloat("12.3.4"); // 12.3 (遇到第二个小数点停)

---

2.2 String() ➡️ 转字符串

📜 原始类型值

类型	转换结果
数字	变成对应数字字符串
字符串	原样返回
布尔值	true ➡️ "true"；false ➡️ "false"
undefined	➡️ "undefined"
null	➡️ "null"

📦 引用类型值（对象、数组等）

规则三步走 (和 Number 类似)：

1. 先调用 toString() 方法。返回原始值 ➡️ 转字符串。
2. 如果 toString() 返回对象 ，再调用 valueOf()。返回原始值 ➡️ 转字符串。
3. 如果 valueOf() 也返回对象，报错！❌

简单记：

• String({}) ➡️ "[object Object]"
• String([1, 2]) ➡️ "1,2"
• String(function(){}) ➡️ 函数源码字符串

---

2.3 Boolean() ➡️ 转布尔值

规则超简单！只有 6 个值 会转成 false (假值)，其他统统是 true (真值)：

假值 (false)	真值 (true)
undefined	任何对象 (包括 {}, [])
null	非空字符串 ("hi")
0 (数字零)	非零数字 (42, -1)
NaN	true 本身 ✅
'' (空字符串)	new Boolean(false) 😮 (它也是对象!)
false 本身 ✅

Boolean(undefined); // false
Boolean(null);      // false
Boolean(0);         // false
Boolean(NaN);       // false
Boolean('');        // false
Boolean(false);     // false

// 其他都是 true!
Boolean({});        // true ✅
Boolean([]);        // true ✅
Boolean(' ');       // true ✅ (空格不是空串)
Boolean(new Boolean(false)); // true ✅ (对象！)

---

3. 悄悄发生的转换（隐式转换）

隐式转换基于显式规则！JS 在需要特定类型 但遇到其他类型时，会自动触发转换。主要发生在：

1. 不同类型数据运算时 ➕➖✖️➗
2. 需要布尔值的场景 (如 if 条件)
3. 使用一元运算符时 (+, -)

3.1 自动转布尔值 ✨

当 JS 期待一个布尔值时（比如 if 语句的条件、&&、||、!、三元表达式 ? :），它会偷偷调用 Boolean()。

只有那 6 个假值会转成 false，其他都是 true！

if ('hello') { // Boolean('hello') => true, 执行！
  console.log('Hi! 👋');
}

// 这两种写法本质也是调 Boolean()
let isValid = !!someValue; // 双叹号转布尔
let result = condition ? true : false;

3.2 自动转字符串 📣

主要发生在 加号 + 运算 且 其中一个操作数是字符串 时！另一个操作数会被悄悄转成字符串再拼接。

'5' + 1;          // "51" (1 被转成 "1")
'5' + true;       // "5true"
'5' + false;      // "5false"
'5' + {};         // "5[object Object]" ({}.toString())
'5' + [];         // "5" ([].toString() => "")
'5' + function(){}; // "5function(){}"
'5' + undefined;  // "5undefined"
'5' + null;       // "5null"

3.3 自动转数字 🔢

发生在 大多数数学运算符 (-, *, /, %)、比较运算符 (>, <, >=, <=, == - 注意 === 不转换！)、以及 一元 +/- 操作时。

重要提示： 加号 + 比较特殊，它更倾向于字符串拼接（见 3.2）。其他数学运算则倾向于转数字！

// 数学运算 (-, *, /) 触发转数字
'5' - '2';   // 3 (5 - 2)
'5' * '2';   // 10
true - 1;    // 0 (1 - 1)
false - 1;   // -1 (0 - 1)
'1' - 1;     // 0
'5' * [];    // 0 ([] 转数字 => 0)
false / '5'; // 0 (0 / 5)
'abc' - 1;   // NaN (Number('abc') 是 NaN)

// 一元 +/- 也触发转数字
+'42';      // 42 (Number('42'))
-'42';      // -42
+true;      // 1
+false;     // 0
+'abc';     // NaN
+[];        // 0 ([] 转数字 => 0)
+null;      // 0
+undefined; // NaN

---

🎉 结语

搞定！JS 类型转换看似复杂，记住核心规则和常见场景就能轻松拿捏~ 多练习，多观察，你也能成为转换小达人！💪