JS 中的类型转换

参考: winter 的重学前端

字符串到数字

使用 Number() 转换

Number() 支持十进制、二进制、八进制和十六进制，和科学计数法

Number('123') // 123    十进制
Number('0b111') // 7    二进制
Number('0o13') // 11    八进制
Number('0xc') // 12     十六进制
Number('2e3') // 2000   科学计数法
Number('123ab') // NaN  出现非数字字符

parseInt() 和 Number() 的区别

parseInt 和 parseFloat 并不使用上述转换规则，所以支持的语法跟这里不尽相同。在不传入第二个参数的情况下，parseInt只支持16进制前缀“0x”，而且会忽略非数字字符，也不支持科学计数法。多数情况下 Number 是比 parseInt 和 parseFloat更好的选择。

数字到字符串

在较小的范围内，数字到字符串的转换是完全符合你直觉的十进制表示。
Number绝对值较大或者较小时，字符串表示则是使用科学计数法表示。(可能是避免产生的字符串太长)

基本类型装箱转换为对象

每一种基本类型Number、String、Boolean、Symbol在对象中都有对应的类。所谓装箱转换，正是把基本类型转换为对应的对象。

怎么显式转换呢？

直接使用 new 对应的类。之后就能使用对应的方法了。

new Number(123) // Number {123}
new String("abc") // String {"abc"}
new Boolean(true) // Boolean {true}

使用 `.` 运算符产生临时对象

// . 运算符 产生一个临时对象，使得 "123" 能够使用对象的方法
"123".length // 3

上面的示例中，. 运算符的作用大致相当于 new String()

var strObj = new String("123")
strObj.length // 3

特殊的 Symbol

Symbol 对象不能直接 new 出来。但可以使用内置的 Object 函数，我们可以在JavaScript代码中显式调用装箱能力。

  var symbolObject = Object(Symbol("a"))
  typeof symbolObject // "object"

判别装箱转换后的对象对应的基本类型

每一类装箱对象皆有私有的 Class 属性，这些属性可以用 Object.prototype.toString 获取

var strObj = new String('abc') // strObj 是一个对象
var symObj = Object(Symbol('sym')) // symObj 是一个对象
Object.prototype.toString.call(strObj) // "[object String]"     
Object.prototype.toString.call(symObj) // "[object Symbol]"

在 JavaScript 中，没有任何方法可以更改私有的 Class 属性，因此Object.prototype.toString是可以准确识别对象对应的基本类型的方法，它比 instanceof 更加准确。

对象拆箱转换为基本类型

在JavaScript标准中，规定了 ToPrimitive 函数，它是对象类型到基本类型的转换（即，拆箱转换）。

对象到 String 和 Number 的转换都遵循“先拆箱再转换”的规则。通过拆箱转换，把对象变成基本类型，再从基本类型转换为对应的 String 或者 Number。

拆箱转换过程

拆箱转换会尝试调用 valueOf 和 toString 来获得拆箱后的基本类型。如果 valueOf 和 toString 都不存在，或者没有返回基本类型，则会产生类型错误 TypeError。默认先调用 valueOf ，如果valueOf 返回的值不对再调用toString，依然不对就会报错。

var o = {
        valueOf : () => {console.log("valueOf"); return {} },
        toString : () => {console.log("toString"); return {} },
}
o * 2  // valueOf  // toString  // TypeError

覆盖拆箱转换默认行为

通过显式指定对象的 toPrimitive Symbol来覆盖原有的行为。

o[Symbol.toPrimitive] = () => {
    console.log("toPrimitive")
    return "hello"
}
o + '' // 'hello'

typeof 结果与运行时类型对比

typeof结果与运行时类型对比.png

永远不用隐式转换

规则复杂，不要浪费宝贵的精力去记忆这种东西。需要转换的时候，应该用显式转换，不要省这点功夫。
真要用，用的时候再上网查