js类型转换

js中时长发生着各种类型转换，有显式的有隐式的。
本文总结了js中的类型转换的场景和类型。

js中的数据类型

js中的数据类型可以分为：基本数据类型和引用数据类型。

基本数据类型：

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

引用数据类型：

• object
• Array
• Date
• RegExp
• Math
• Error
• Number
• String
• Boolean
• function

类型之间的转换

类型转换分为显式转换和隐式转换。

显式转换：代码中使用函数进行类型转换。
隐式转换：不同数据类型之间使用运算符的时候，js自动的进行了类型转换。

类型转换最终只会转换成三种数据类型：

• Number: Number(), parseInt(), parseFloat()
• String: String(), toString()
• Boolean: Boolean()

转换为布尔型

显式转换： Boolean(2)

隐式转换：逻辑运算时触发， if(2){} , !!2 , 2&&true

只有以下会被转为 false ，其余的都是 true ：

• 0
• NaN
• ""
• null
• undefined

转换为字符串

显式转换： String([1, 2, 3]) , String({})

1 + '2'
// '12'

1 + {}
// 1[object Object]

隐式转换：使用 + 连接一个string的时候触发，或者使用 + 连接一个bject的时候触发。

转换为数字

显式转换： Number() 。

Number('')
// 0

Number('10px')
// NaN

Number('10')
// 10

Number(true)
// 1

Number(false)
// 0

Number(null)
// 0

Number(undefined)
// NaN

Number(Symbol())
// 报错

Number(12312412321312312n)
// 12312412321312312

隐式转换：在比较运算符、按位操作、算术运算以及 + 触发。

==转换规则

== 运算符如果两边类型不同会进行类型转换。

• 对象==字符串：会将对象转换为字符串。
• 对象==对象：比较指针。

最佳实践

Q:
let result = 100 + true + 21.2 + null + undefined + "Tencent" + [] + null + 9 + false; 结果是什么？

A:
100 + true
101 , 加号两边存在数字则将另一个转为数组

101 + 21.2
122.2 , 数字加数字

122.2 + null
122.2 , 加号两边存在数字则将另一个转为数字

122.2 + undefined
NaN , 加号两边存在数字则将 undefined 转为 NaN ，结果仍为 NaN

NaN + "Tencent"
"NaNTencent" , 加号两边存在字符串则将另一个转为字符串

"NaNTencent" + []
"NaNTencent" , 加号两边存在字符串则将另一个 [] 转为字符串 ""

"NaNTencent" + null
"NaNTencentnull" , null 转为字符串为 null

"NaNTencentnull" + 9
"NaNTencentnull9" , 两边存在字符串，将 9 转为字符串

"NaNTencentnull9" + false
"NaNTencentnull9false" , 同上