详解JavaScript对象转原始值

更新时间：2021年12月10日 15:43:34 作者：周晓风

这篇文章主要为大家介绍了vue组件通信的几种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

Object.prototype.valueOf()

对象的valueOf旨在返回对象的原始值，会在需要将对象转换成原始值的地方自动执行。详细点这里。

Object.prototype.toString()

toString()方法会返回表示该对象的字符串，会在对象预期要被转换成字符串的地方自动执行。对象默认的toString()方法会返回[object type]，这个type就是对象构造函数的名称。详细点这里。

Symbol.toPrimitive

Symbol.toPrimitive(hint)方法作用同valueOf()一样，但是优先级要高于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类型为numbe

除法：

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

这一点有点意外，原以为像这种情况预期转换的类型应该是数字类型，但事实上却是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()方法；

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

vue中使用cropperjs的方法
这篇文章给大家总结了在.vue文件里cropperjs的使用方法和经验教训，感兴趣的朋友跟随脚本之家小编学习吧
2018-03-03
JSON字符串转JSON对象
本文给大家分享的是如何使用javascript实现JSON字符串转JSON对象的方法，这里记录下来，有需要的小伙伴可以参考下。
2015-07-07
JavaScript位置与大小（1）之正确理解和运用与尺寸大小相关的DOM属性
这篇文章主要介绍了JavaScript位置与大小（1）——正确理解和运用与尺寸大小相关的DOM属性的相关资料,需要的朋友可以参考下
2015-12-12
document.body.scrollTop 值总为0的解决方法比较常见的标准问题
页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。
2009-11-11
微信小程序实现列表条件筛选
这篇文章主要为大家详细介绍了微信小程序实现列表条件筛选，筛选框的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
js获取url参数值的几种方式详解
这篇文章为大家主要介绍了js获取url参数值的几种方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
2023-07-07
移动端网页开发调试神器Eruda的介绍与使用技巧
在日常的移动端开发时，一般都是试用chrome浏览器的移动端模式进行开发和调试，只有在chrome调试完成，而最近发现了一个新的调试方法，所以这篇文章主要给大家介绍了关于移动端网页开发调试神器Eruda的基本资料，以及其使用的一些技巧，需要的朋友可以参考下。
2017-10-10
js生成二维码的示例代码
这篇文章主要介绍了js生成二维码的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-03-03
js实现验证码功能
这篇文章主要为大家详细介绍了js实现验证码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-07-07
拖拉表格的JS函数
拉表格，一个函数调用即可
2008-11-11