类型转换

JS 没有严格的数据类型，所以可以互相转换

• 显示类型转换：Number(), String(), Boolean()
• 隐式类型转换：四则运算，判断语句，Native 调用，JSON 方法

显示转换

1. Number()

简单数据类型

• 数字：转换后还是原来的值
• 字符串：如果能被解析成数字，就得到数字，否则就是 NaN，空字符串为0
• 布尔值：true 转为1，false 转为0
• undefined: 转为 NaN
• null：转为0 引用类型转换

console.log(Number(1)) // 1
console.log(Number("1")) // 1
console.log(Number("1a")) // NaN
console.log(Number(true)) // 1
console.log(Number(undefined)) // NaN
console.log(Number(null)) // 0
console.log(Number({a:1})) // NaN 原因往下看

复杂数据类型

先调用对象自身的 valueOf 方法，如果该方法返回原始类型的值(数值、字符串和布尔值)，则直接对该值使用 Number 方法，不再继续

如果 valueOf 方法返回复合类型的值，再调用对象自身的 toString 方法，如果 toString 方法返回原始类型的值，则对该值使用 Number 方法，不再继续

如果 toString 方法返回的还是复合类型的值，则报错

let a = {a:1}
console.log(Number(a)) // NaN
// 原理
a.valueOf() // {a:1}
a.toString() // "[object Object]"
Number("[object Object]") // NaN

2. String()

简单数据类型

• 数字：转换成相应字符串
• 字符串：转换后还是原来的值
• 布尔值：true 转为”true”，false 转为”false”
• undefined: 转为”undefined”
• null：转为”null” 引用类型转换

console.log(String(1)) // "1"
console.log(String("1")) // "1"
console.log(String(true)) // "true"
console.log(String(undefined)) // "undefined"
console.log(String(null)) // "null"
console.log(String({b:1})) // "[object Object]" 原因往下看

复杂数据类型

先调用 toString 方法，如果 toString 方法返回的是原始类型的值，则对该值使用 String 方法，不再继续

如果 toString 方法返回的是复合类型的值，再调用 valueOf 方法，如果 valueOf 方法返回的是原始类型的值，则对该值使用 String 方法，不再继续

如果 valueOf 方法返回的是复合类型的值，则报错

let b = {b:1}
console.log(String(b)) // "[object Object]"
// 原理
b.toString() // "[object Object]"
// b.valueOf() 由于返回的不是复合类型所以没有调valueOf()
String("[object Object]") // "[object Object]"

3. Boolean()

简单数据类型

• 0
• -0
• “”
• null
• undefined
• NaN

以上统一转为false，其他一律为true

console.log(Boolean(0)) // false
console.log(Boolean(-0)) // false
console.log(Boolean("")) // false
console.log(Boolean(null)) // false
console.log(Boolean(undefined)) // false
console.log(Boolean(NaN)) // false

复杂数据类型

都转为 true

let obj1 = {a:1}
let obj2 = {}
console.log(Boolean(obj1))	// true
console.log(Boolean(obj2))	// true

隐式转换

// 四则运算  如把String隐式转换成Number
console.log(+'1' === 1) // true

// 判断语句  如把String隐式转为Boolean
if ('1') console.log(true) // true

// Native调用  如把Object隐式转为String
alert({a:1}) // "[object Object]"
console.log(([][[]]+[])[+!![]]+([]+{})[!+[]+!![]]) // "nb"

// JSON方法 如把String隐式转为Object
console.log(JSON.parse("{a:1}")) // {a:1}

几道隐式转换题

console.log( true+true  ) // 2                   解：true相加是用四则运算隐式转换Number 就是1+1
console.log(  1+{a:1}   ) // "1[object Object]"  解：上面说了Native调用{a:1}为"[object Object]"  数字1+字符串直接拼接
console.log(   []+[]    ) // ""                  解：String([]) =》 [].toString() = "" =》 ""+"" =》 ""
console.log(   []+{}    ) // "[object Object]"   解："" + String({}) =》 "" + {}.toString() = "" + "[object Object]" =》 "[object Object]"
console.log(   {}+{}    ) // "[object Object][object Object]" 和上面同理

参考

本文大部分内容来自于这篇文章 https://juejin.cn/post/6995591618371780622