JavaScript 数据类型转换详解

1. 内置类型

JavaScript 中有 7 中内置类型，分为基本类型和引用类型。

（1）基本类型

• null
• undefined
• boolean
• number
• string
• symbol

其中NaN属于number，但是NaN !== NaN。

基本类型的变量和值都保存在栈内存中。

（2）引用类型

• object

函数、对象、数组，都属于object。

引用类型，变量保存在栈内存中，值保存在堆内存中，通过指针来指向堆内存中对应的值。

2. 类型判断 typeof

（1）基本类型

除了null显示object，其他的类型都能正常显示自身的数据类型。

console.log(typeof null); // object
console.log(typeof undefined); // undefined
console.log(typeof true); // boolean
console.log(typeof 1); // number
console.log(typeof 'abc'); // string
console.log(typeof Symbol()); // symbol

（2）引用类型

除了函数显示function，其他的都能显示object。

console.log(typeof console.log); // function
console.log(typeof {}); // object
console.log(typeof []); // object

3. 类型转换

在 JavaScript 中，只有3种类型转换：

• 转为boolean
• 转为string
• 转为number

1. 直接转换

转换规则

原始值	转换目标	结果
number	boolean	0、+0、-0、NaN为false，其余为true
string	boolean	''为false，其余为true
null、undefined	boolean	false
引用类型	boolean	true
number	string	2 => '2'
boolean	string	true => 'true'
数组	string	[1, 2] => '1,2'
对象	string	'[object Object]'
string	number	'1' => 1、'a' => NaN
数组	number	[] => 0、只有一个数[2] => 2、其余NaN
null	number	0
除了数组的引用类型	number	NaN
symbol	number	Cannot convert a Symbol value to a number

常见转换举例

类型	值	to Boolean	to Number	to String
Boolean	true	true	1	"true"
Boolean	false	false	0	"false"
Number	123	true	123	"123"
Number	Infinity	true	Infinity	"Infinity"
Number	0	false	0	"0"
Number	NaN	false	NaN	"NaN"
String	""	false	0	""
String	"123"	true	123	"123"
String	"123abc"	true	NaN	"123abc"
String	"abc"	true	NaN	"abc"
Null	null	false	0	"null"
Undefined	undefined	false	NaN	"undefined"
Function	function() {}	true	NaN	"function(){}"
Object	{}	true	NaN	"[object Object]"
Array	[]	true	0	""
Array	["abc"]	true	NaN	"abc"
Array	["123"]	true	123	"123"
Array	["123", "abc"]	true	NaN	"123, abc"

2. 四则运算

（1）加法运算，一个是string，另一个也转为string。

（2）其他运算，一个是number，另一方也转为number。

console.log(2 + '3'); // 23
console.log(null + '3'); // null3
console.log('a' + +'b'); // aNaN
console.log(true + true); // 2
console.log(1 + [1, 2]); // 11,2

console.log(2 * '3'); // 6
console.log(2 - '3'); // -1

3. == 操作符

如果被比较的两个数据类型不一致，则会自动进行类型转换后再比较。

判断X == Y：

1. 判断两者类型是否相同。若相同，则比较值是否相等。

2. 若类型不相等，先进行类型转换。

3. 首先判断是否为null == undefined，若是，则返回true。

4. 判断是否为string === number，若是，将string转化为number后再判断两者值是否相等。

   '123' => 123

5. 判断是否出现boolean，若出现boolean，将boolean转化为number后再进行判断。

   true => 1，false => 0

6. 判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再判断。

   { name: 'jack' } => '[object Object]'

判断流程总结如下图所示：

4. 比较运算符

• 如果是对象，就通过toPrimitive转换对象
• 如果是字符串，就通过unicode字符索引来比较

---

📘📘欢迎在我的博客上访问：
https://lzxjack.top/