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

Hi~，我是一碗周，一个在舒适区垂死挣扎的前端，如果写的文章有幸可以得到你的青睐，万分有幸~~

🥪 写在前面

由于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

🐙 写在最后

这篇文章简单总结了JavaScript中隐式类型转换和显式类型转换，值得注意的就是数组转换字符串的一些内容。