JavaScript中类型转换的一些骚操作

🥪 写在前面

由于JavaScript是弱类型脚本语言，只有在执行时才会确定其数据类型，从而运行时会根据使用情况来进行类型的转换。

JavaScript中的类型转换主要分为两种，分别是隐式类型转换和显式类型转换，显式类型转换其实就是JavaScript中提供的一些API，记住调用就好了，而隐式类型转换则需要在开发中注意一下了

🦋 隐式类型转换

所谓的隐式类型转换就是通过特定的表达式来实现从一个类型转换为另一个类型的。

🐬 转换为string类型

如果其他数据类型想要转换为string类型的话，在前面或者后面拼接一个空字符即可，拼接字符串使用的是加号(+)，示例代码如下：

var str1 = '' + true
console.log(typeof str1) // string
var str2 = '' + 100
console.log(typeof str2) // string 

这个拼接字符串对于数组转换字符串同样适用，例如：

[1, 2, 3] + '' // '1,2,3' 

这个其实与下面这段代码的返回结果是一样的：

[1, 2, 3].join(',')
// 相等
[1, 2, 3].toString() 

🍇 转换为boolean类型

将要将其他的数据类型转换为布尔类型的话，只需要在最前面增加两个感叹号(!!)即可。示例代码如下：

var str = 'this is string'

console.log(!!str) // true 

其他类型转换布尔值的转换规则如下：

数据类型	转换为 true 值	转换为 false 值
boolean类型	true	false
string类型	任何非空字符串	""（空字符串）
number类型	任何非零数字值（包括无穷大）	0、0.0 和 NaN
object类型	任何对象	null
undefined		undefined

🥭 转换为number类型

如果其他数据类型想要转换为number类型，只需要在前面增加一个加号(+)即可，示例代码如下：

/**
 * 如果将字符串转换为数字的话，如果转换失败的话会得到NaN
 */
console.log(+'10') // 10
console.log(+'str') // NaN 

/**
 * 布尔类型转换为数字的话，true = 1， false = 0
 */

console.log(+true) // 1
console.log(+false) // 0 

除此之外，在使用==时也会进行类型转换，比如：

[] == '' // ture 

这是因为在比较时会将空数组转换为字符串，然后进行比较，所以结果为ture。

🍓 显式类型转换

所谓显式类型转换，就是JavaScript对应的函数或者方法来完成数据类型之间的转换。

🌼 转换为string类型

JavaScript提供的将其他类型转换为string类型有两种，具体如下：

• String()函数
• Object对象提供的toString()方法

示例代码如下：

var bool = true
var num = 123

// 使用String()函数
var str1 = String(bool)
var str2 = String(num)

console.log(typeof str1) // string
console.log(typeof str2) // string

// 使用 Object.toString()方法

var str3 = Object.toString(bool)
var str4 = Object.toString(num)

console.log(typeof str3) // string
console.log(typeof str4) // string 

🍀 转换为boolean类型

显式的将其他数据类型转换为boolean类型，使用的是JavaScript提供的Boolean()函数，示例代码如下：

var str = '123'
var num = 1

var bool1 = Boolean(str)
var bool2 = Boolean(num)

console.log(typeof bool1) // boolean 
console.log(typeof bool2) // boolean 

🌻 转换为number类型

JavaScript提供的将其他类型转换为number类型有三种，具体如下：

• Number()函数，如果转换的变量无法转换为数字类型，结果则为NaN。
• parseInt()函数，该函数可以将string类型的值转换为一个整数或者NaN。
• parseFloat()函数，该函数可以将string类型的值转换为一个浮点数或者NaN（如果转换的是一个整数的话则会返回一个整数）。

示例代码如下：

var str1 = '10'
var str2 = 'str'

// 使用 Number
console.log(Number(str1)) // 10
console.log(Number(str2)) // NaN

// 使用parseInt
console.log(parseInt(str1)) // 10
console.log(parseInt(str2)) // NaN
// 如果转换的是一个浮点数，最终不会保留小数点
console.log(parseInt(10.5)) // 10

// 使用parseFloat
console.log(parseFloat(str1)) // 10
console.log(parseFloat(str2)) // NaN 
console.log(parseFloat(10.5)) // 10.5 

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取