JavaScript对象转原始值：valueOf、toString与Symbol.toPrimitive详解

Object.prototype.valueOf()

对象的valueOf方法旨在返回对象的原始值，当环境需要将对象转换为原始值时会自动调用。具体机制可参考相关文档。

Object.prototype.toString()

toString()方法返回表示该对象的字符串，在预期将对象转换为字符串的上下文中自动执行。默认实现返回[object type]，其中type为对象构造函数的名称。更多细节请参阅相关文档。

Symbol.toPrimitive

Symbol.toPrimitive(hint)方法的作用与valueOf()类似，但优先级更高。该方法接收一个hint参数，用于指定期望转换的原始值类型，包括以下几种情况：

number：数字类型
string：字符串类型
default：默认类型


let obj = {
  [Symbol.toPrimitive](hint) {
    switch (hint) {
      case 'number':
        return 123;
      case 'string':
        return 'str';
      case 'default':
        return 'default';
      default:
        throw new Error();
     }
   }
};
2 * obj // 246
3 + obj // '3default'
obj == 'default' // true
String(obj) // 'str'

对象转换原始值

上述三种方法均在对象被预期转换为某种原始值时触发。

1. 预期被转换成字符串类型

对应的hint类型为string

涉及输出的场景，例如调用alert()函数

调用String(obj)函数


let a = {
  toString () {
    return '2'
  }
}
console.log(String(a)) // 2

执行字符串连接（+）操作


let a = {
  toString () {
    return '2'
  }
}
console.log(a + 'vv')

使用模板字符串


let a = {
  [Symbol.toPrimitive] (hint) {
    console.log(hint) // string
    return 2
  }
}
console.log(`你是老${a}？`) // 你是老2？

2. 预期被转换成数字类型

对应的hint类型为number

执行除法运算：


let a = {
  valueOf () {
    return 2
  }
}
console.log(2 / a, a / 2) // 1  1

调用Number(obj)构造函数：


let a = {
  [Symbol.toPrimitive] (hint) {
    console.log(hint) // number
    return 2
  }
}
console.log(Number(a)) // 2

使用正负号（注意区分于加减运算）：


let a = {
  [Symbol.toPrimitive] (hint) {
    console.log(hint) // number
    return 2
  }
}
console.log(+a) // 2
console.log(-a) // -2

3. 预期被转换成默认类型（其他）

对应的hint类型为default

执行数字加法（即与对象相加的操作数为数字类型）：


let a = {
  [Symbol.toPrimitive] (hint) {
    console.log(hint) // default
    return 2
  }
}
console.log(1 + a) // 3

这一行为可能出乎意料，通常认为此类场景应转换为数字类型，但实际上hint为default；

执行布尔运算：所有对象均转换为true；


let a = {
  [Symbol.toPrimitive] (hint) {
    console.log(hint) // 没有触发
    return false
  }
}
console.log(Boolean(a), a && 123) // true 123

布尔运算包括==比较

三种方法触发的顺序

首先检查对象是否包含Symbol.toPrimitive(hint)方法，若存在则执行该方法，否则继续后续步骤；

若预期转换为字符串类型，则优先执行toString()方法；

若预期转换为默认类型或数字类型，则优先执行valueOf()方法：

注：若对象未定义valueOf()方法但定义了toString()方法，则执行toString()方法；

总结

本文到此结束，希望能为读者提供帮助，欢迎持续关注本站以获取更多技术内容！

详解JavaScript对象转原始值