一文搞懂JS类型转换!!!
javascript数据类型分为基本类型和引用类型,**基本类型(原始类型)**包括string
,number
,boolean
,null
,undefined
,symbol
,bigint
引用类型 包括Object
(Array
,Function
,Date
,RegExp
等)
==
和===
的区别
js
console.log(1 == '1'); // true
console.log(1 === '1'); // false
==
会发生隐式类型转换,只判断值是否相等。===
不会发生隐式类型转换,值和类型都要相等才为true。
==
转换规则
null
==undefined
// truenull
和undefined
与其他值比较时不转换为数字NaN
与任何值比较都是false
(包括NaN
本身)- 对象与原始值比较 →
ToPrimitive
后再比较
js
[] == 0 // true ([] → "" → 0)
[] == false // true ([] → "" → 0, false → 0)
[1] == 1 // true ([1] → "1" → 1)
NaN == NaN // false
NaN !== NaN // true
isNaN('foo') // true (因为 'foo' → NaN)
Number.isNaN('foo') // false (不会隐式转换)
{} == 0 //false // ({} → "[object Object]" → NaN) NaN == 0 false
类型转换两大方式
显式类型转换
显式调用一些方法/函数手动将一个值转换为另一种类型
- 转字符串:
String(value)
,value.toString() (null/undefined调用会报错)
,JSON.stringify(value)
- 转数字:
Number(value)
,parseInt(value)/parseFloat(value)(只对字符串有用,遇到非数字字符停止解析)
- 转布尔值:
Boolean(value)
,!!value
js
console.log(String(456)); // '456'
console.log(Number('123')); // 123
console.log(Number(undefined)); // NaN
console.log(Boolean(0)); // false
console.log(parseInt('')) //NaN 只能解析数字字符串
console.log(parseInt(null)) //NaN
隐式类型转换
由运算符或上下文自动触发,不需要你手动调用。
- 字符串拼接:
'a' + 1 // 'a1'
- 算术运算:
'5' - 2 // 3
(* / % 同理将字符串转换为数字)
- 比较运算:
==
会进行类型转换,===
不会 - 条件判断:
if (value)
会将 value 转为布尔值 - 对象参与运算时调用
ToPrimitive
(valueOf
→toString
)
基本类型和引用类型转换
1、基本类型转基本类型
- 直接用
Boolean(x)
、Number(x)
、String(x)
即可。
2、引用类型转基本类型
- 转布尔:任何对象转布尔都为
true
- 转字符串:
String(obj)
会调用ToPrimitive(obj, String)
- 转数字:
Number(obj)
会调用ToPrimitive(obj, Number)
ToPrimitive原理
ToPrimitive(obj,hint)
这里hint
有三种:
-
string
→ 优先调用toString()
,失败再调用valueOf()
-
number
→ 优先调用valueOf()
,失败再调用toString()
-
default
→ 大部分对象的行为和number
相同(优先valueOf()
),但Date
是个特例(默认走string
)
以上转换完成之后仍不是基本类型则抛出异常
js
let obj = {
valueOf() { return 42; },
toString() { return "hello"; }
};
console.log(String(obj)); // "hello" (hint="string")
console.log(Number(obj)); // 42 (hint="number")
console.log(obj + 1); // 43 (hint="default"≈number, valueOf优先)
console.log(obj + ''); // "42" (hint="default"≈number, valueOf优先)
console.log(new Date() + ''); // 类似 "Tue Aug 19 2025 ..." (hint="default"≈string, toString优先)
!!!注意点:
对象调用valueOf()默认返回对象本身this,并不会自动将对象转换为原始类型,取决于这个对象有没有重写valueOf方法
let obj = {};
console.log(obj.valueOf() === obj); // true
口诀
- String 转换 → toString 优先
- Number 转换 → valueOf 优先
- 加号运算 → 默认走 valueOf 优先 (除了
Date
)
ToString
null
→'null'
undefined
→'undefined'
- 布尔值
true
→'true'
,false
→'false'
- 数字转字符串
- 对象→调用
toString()
,默认[object Object]
ToNumber
null
→0
undefined
→NaN
- 布尔值
true
→1,false
→0 - 字符串→按规则解析(空字符串为0,非数字为
NaN
) - 对象→先
ToPrimitive
再ToNumber
ToBoolean
假值(falsy)有8种:false
,0
,-0
,0n(BigInt零)
,''(空字符串)
,null
,undefined
,NaN
其余都为真值(truthy)
js
Boolean({}) // true
Boolean([]) // true