1. 前言
JavaScript 是动态语言,变量类型灵活多变!但运算符们可是有"小脾气"的------它们对数据类型有要求。如果遇到"不对付"的类型,JS 就会悄悄进行类型转换 。本文将带你理清类型转换的规则,先讲手动转换 ,再讲自动转换。
1.1 必备小知识 🔑
Object.prototype.valueOf()
它的作用是返回对象的值。默认直接返回对象本身。
JS
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 对象都"偷偷"改写了这个方法:
JS
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 |
JS
Number(324); // 324
Number("324"); // 324
Number("324abc"); // NaN 🤔
Number(""); // 0
Number(true); // 1 ✅
Number(false); // 0 ✅
Number(undefined); // NaN
Number(null); // 0
📦 引用类型值(对象、数组等)
规则三步走:
- 先调用对象的
valueOf()
方法。如果返回原始值 ,就用Number()
转它。 - 如果
valueOf()
返回对象 ,再调用toString()
方法。如果返回原始值 ,就用Number()
转它。 - 如果
toString()
也返回对象,报错!❌
简单记: Number(对象)
通常返回 NaN
,除非是只含一个数字的数组(如 Number([5]) // 5
)。
🤔 Number()
vs parseInt()
vs parseFloat()
函数 | Number() |
parseInt(string, radix) |
parseFloat(string) |
---|---|---|---|
功能 | 严格转数字 | 从字符串开头解析整数 | 从字符串开头解析浮点数 |
特点 | 整体转换 | 遇到非数字(除开头±)就停,返回已解析部分 | 遇到非数字(除开头±或第一个小数点)就停 |
空字符串 | ➡️ 0 |
➡️ NaN |
➡️ NaN |
忽略空格 | ✅ | ✅ | ✅ |
支持进制 | 自动识别十进制 | ✅ (通过 radix 参数) |
❌ (只认十进制) |
JS
Number("123abc"); // NaN (整体不能转)
parseInt("123abc"); // 123 (解析到字母停)
parseFloat("12.3.4"); // 12.3 (遇到第二个小数点停)
2.2 String()
➡️ 转字符串
📜 原始类型值
类型 | 转换结果 |
---|---|
数字 | 变成对应数字字符串 |
字符串 | 原样返回 |
布尔值 | true ➡️ "true" ;false ➡️ "false" |
undefined |
➡️ "undefined" |
null |
➡️ "null" |
📦 引用类型值(对象、数组等)
规则三步走 (和 Number
类似):
- 先调用
toString()
方法。返回原始值 ➡️ 转字符串。 - 如果
toString()
返回对象 ,再调用valueOf()
。返回原始值 ➡️ 转字符串。 - 如果
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 本身 ✅ |
JS
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 在需要特定类型 但遇到其他类型时,会自动触发转换。主要发生在:
- 不同类型数据运算时 ➕➖✖️➗
- 需要布尔值的场景 (如
if
条件)- 使用一元运算符时 (
+
,-
)
3.1 自动转布尔值 ✨
当 JS 期待一个布尔值时(比如 if
语句的条件、&&
、||
、!
、三元表达式 ? :
),它会偷偷调用 Boolean()
。
只有那 6 个假值会转成 false
,其他都是 true
!
JS
if ('hello') { // Boolean('hello') => true, 执行!
console.log('Hi! 👋');
}
// 这两种写法本质也是调 Boolean()
let isValid = !!someValue; // 双叹号转布尔
let result = condition ? true : false;
3.2 自动转字符串 📣
主要发生在 加号 +
运算 且 其中一个操作数是字符串 时!另一个操作数会被悄悄转成字符串再拼接。
JS
'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)。其他数学运算则倾向于转数字!
JS
// 数学运算 (-, *, /) 触发转数字
'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 类型转换看似复杂,记住核心规则和常见场景就能轻松拿捏~ 多练习,多观察,你也能成为转换小达人!💪