一、前言

在等于运算符中,如果比较的内容包含对象类型数据,则会涉及隐式转换,那么就会调用toString()函数和valueOf()函数,下面我们将会了解到关于这两个函数的基本概念和使用场景。


二、toString() 函数

toString() 函数的作用是把一个逻辑值转换为字符串,并返回结果。

console.log((1).toString());//1
console.log((10).toString(2))//1010
console.log(("1").toString());//1
console.log((false).toString());//false
console.log(({p:1}).toString());//[object,object]
console.log((undefined).toString());//报错
console.log((null).toString());//报错
console.log((function(){}).toString());//function(){}
console.log([1,2,3,4].toString());//1,2,3,4
console.log((new Date()).toString())//Fri Jul 03 2020 17:20:11 GMT+0800 (中国标准时间)

在JavaScript中,Object,Array,Function,Date等类型都实现了自定义的toString()函数。

  • Object 类型数据的 toString() 函数默认的返回结果是 "[object Object]",当我们自定义新的类时,可以重写 toString() 函数,返回可读性更高的结果。
  • Array 的 toString() 函数返回值为以逗号分隔构成的数组成员字符串。数组也是对象,那么为什么数组返回的是对应的字符串而不是对象,其实数组覆盖了Object.toString方法,然后将连接数组并返回一个字符串,其中包含用逗号分隔的每个数组元素(相当于Array.join())
  • Function 的 toString() 函数返回值为函数的文本定义
  • Date 的 toString() 函数返回值为具有可读性的时间字符串

三、valueOf()函数

valueOf() 函数的作用是返回最适合引用类型的原始值,如果没有原始值,则会返回引用类型自身。

console.log((1).valueOf());//1
console.log((10).valueOf(2))//报错
console.log(("1").valueOf());//1
console.log((false).valueOf());//false
console.log(({p:1}).valueOf());//{p:1}
console.log((undefined).valueOf());//报错
console.log((null).valueOf());//报错
console.log((function(){}).valueOf());//function(){}
console.log([1,2,3,4].valueOf());//[1,2,3,4]
console.log((new Date()).valueOf());//1593767848260
  • Object 类型数据的valueOf()函数默认的返回结果是"{}",即一个空的对象字面量。
  • Array 的valueOf()函数返回的是数组本身
  • function 的valueOf()函数返回的是函数本身
  • Date 的valueOf()函数返回的是指定日期的时间戳

小结:

  • toString() 返回的是字符串,而 valueOf() 返回的是原始值,没有原始值返回对象本身
  • undefined 和 null 都没有 toString() 和 valueOf() 方法
  • Date 类型的 toString() 返回的表示时间的字符串;valueOf() 返回的是现在到1970年1月1日的毫秒数(时间戳)
  • Number 类型的 toString() 方法可以接收转换基数,返回不同进制的字符串形式的数值;而 valueOf()方 法无法接受转换基数

四、特殊情况

如果一个引用类型的值既存在 toString() 函数又存在 valueOf() 函数,那么在做隐式转换时,会调用哪个函数呢?这里我们可以概括成两种场景,分别是引用类型转换为 String 类型,以及引用类型转换为 Number 类型。

1、引用类型转换为 String 类型

一个引用类型的数据在转换为 String 类型时,一般是用于数据展示,转换时遵循以下规则:

  • 如果对象具有 toString() 函数,则会优先调用 toString() 函数。如果它返回的是一个原始值,则会直接将这个原始值转换为字符串表示,并返回该字符串。
  • 反之,则会再去调用 valueOf() 函数,如果 valueOf() 函数返回的结果是一个原始值,则会将这个结果转换为字符串表示,并返回该字符串。
  • 如果通过 toString() 函数或者 valueOf() 函数都无法获得一个原始值,则会直接抛出类型转换异常。

2、引用类型转换为 Number 类型

一个引用类型的数据在转换为 Number 类型时,一般是用于数据运算,转换时遵循以下规则:

  • 如果对象具有 valueOf() 函数,则会优先调用 valueOf() 函数,如果 valueOf() 函数返回一个原始值,则会直接将这个原始值转换为数字表示,并返回该数字。
  • 反之,则会再去调用 toString() 函数,如果 toString() 函数返回的结果是一个原始值,则会将这个结果转换为数字表示,并返回该数字。
  • 如果通过 toString() 函数或者 valueOf() 函数都无法获得一个原始值,则会直接抛出类型转换异常。

toString()函数与valueOf()函数的更多相关文章

  1. javascript之toString()和valueOf()函数

    1.我们为什么要了解这两种方法 众所周知,toString()函数和valueOf函数,这两个函数是Object类的对象生来就拥有的,而且他们还可以允许我们重写,那么,这两个函数到底有什么用呢? 从名 ...

  2. JavaScript中valueOf函数与toString方法

    基本上,所有JS数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下   JavaScrip ...

  3. 10分钟搞懂toString和valueOf函数(详细版)

    首先要说明的是这两种方法是toPrimitive抽象操作里会经常用到的. 默认情况下,执行这个抽象操作时会先执行valueOf方法,如果返回的不是原始值,会继续执行toString方法,如果返回的还不 ...

  4. JavaScript valueOf() 函数详解

    valueOf()函数用于返回指定对象的原始值. 该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法. 所有主流浏 ...

  5. js valueOf()函数用于返回指定对象的原始值

    valueOf()函数用于返回指定对象的原始值. 该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法. 对象 返回 ...

  6. JS中函数参数和函数返回值的理解

    函数本质就是功能的集合 JS中函数是对象,因此,函数名实际上仅仅是一个指向函数对象的指针,不会与某个函数绑定,所以,JS中没有重载(重载就是通过传递不同类型的参数,使两个相同函数名的函数执行不同的功能 ...

  7. Js基础知识5-函数返回值、函数参数、函数属性、函数方法

    函数返回值 所有函数都有返回值,没有return语句时,默认返回内容为undefined,和其他面向对象的编程语言一样,return语句不会阻止finally子句的执行. function testF ...

  8. toString方法和valueof()方法的区别

    JavaScript引用类型之Array数组的toString()和valueof()方法的区别   一.转换方法 1.在JavaScript中几乎所有对象都具有toLocaleString().to ...

  9. 引用类型--Function类型(函数声明与函数表达式、arguments.callee、caller、apply、call、bind)

    在ECMAScript中函数实际上是对象.每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法.由于函数是对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定 ...

随机推荐

  1. 5月8日 python学习总结 mysql 建表操作

    一 .创建表的完整语法 create table 表名( 字段名1 类型[(宽度) 约束条件],字段名2 类型[(宽度) 约束条件],字段名3 类型[(宽度) 约束条件]); 解释: 类型:使用限制字 ...

  2. CodeUp Problem D: More is better

    根据题目意思,输入的每一对A.B都是直接朋友,并且最后只会得到一个集合,该集合就是Mr Wang选择的男孩. 因此很容易写出代码,甚至不需要自己构建一个并查集,只需要使用C++的set模板,每次读入一 ...

  3. 羽夏看Win系统内核——消息机制篇

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...

  4. 对原型链的理解?prototype上都有哪些属性?

    在js里,继承机制是原型继承.继承的起点是 对象的原型(Object prototype). 一切皆为对象,只要是对象,就会有 proto 属性,该属性存储了指向其构造的指针. Object prot ...

  5. React优点?

    声明式, 组件化, 一次学习, 随处编写. 灵活, 丰富, 轻巧, 高效

  6. 什么是Spring的依赖注入?

    依赖注入,是IOC的一个方面,是个通常的概念,它有多种解释.这概念是说你不用创建对象,而只需要描述它如何被创建.你不在代码里直接组装你的组件和服务,但是要在配置文件里描述哪些组件需要哪些服务,之后一个 ...

  7. 为什么要用 Spring Boot?

    Spring Boot 优点非常多,如:独立运行简化配置自动配置无代码生成和XML配置应用监控上手容易Spring Boot 集这么多优点于一身,还有理由不使用它呢?

  8. ClassNotFoundException: org.springframework.web.context.ContextLoadServlet

    web.xml中配置 <!-- 配置spring核心监听器,默认会以 /WEB-INF/applicationContext.xml作为配置文件 --> <listener> ...

  9. CI_CD 简单了解

  10. 转:C++初始化成员列表

    转载至:https://blog.csdn.net/zlintokyo/article/details/6524185 C++初始化成员列表和新机制初始化表达式列表有几种用法: 1.如果类存在继承关系 ...