Javascript中的valueOf与toString的对比介绍(代码示例)

本篇文章给大家带来的内容是关于javascript中的valueof与tostring的对比介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

+{ a: 1, toString: function() { return '10' }, valueOf: function() { return '100' } }

登录后复制

以上引申出对象数据的转换的问题:
所有对象继承了两个转换方法:

toString(): 它的作用是返回一个反映这个对象的字符串

valueOf():它的作用是返回它相应的原始值

toString()

立即学习“Java免费学习笔记(深入)”;

toString()函数的作用是返回object的字符串表示。
JavaScript中object默认的toString()方法返回字符串”[object Object]“。定义类时可以实现新的toString()方法,从而返回更加具有可读性的结果。
JavaScript对于数组对象、函数对象、正则表达式对象以及Date日期对象均定义了更加具有可读性的toString()方法:

Array的toString()方法将返回以逗号分隔的数组成员。

var arr = [1, 2, 3]arr.toString() // "1,2,3"

登录后复制

Function的toString()方法将返回函数的文本定义。

var fun = function() { return 'fun' }fun.toString() // "function() { return 'fun' }"

登录后复制

RegExp的toString()方法与Function的toString()方法类似,将返回正则表达式的文本定义。

var reg = /d+/greg.toString() // "/d+/g"

登录后复制

Date的toString()方法将返回一个具有可读性的日期时间字符串。

var date = new Date()date.toString() // "Tue Feb 12 2019 14:04:36 GMT+0800 (中国标准时间)"

登录后复制

如果Boolean值是true,则返回 “true”。否则,返回 “false”。

var boolean = trueboolean.toString() // "true"

登录后复制

valueOf()

valueOf()函数的作用是返回该object自身。
与toString()一样,定义类时可以实现新的valueOf()方法,从而返回需要的结果。
JavaScript对于Date对象定义了更加具有可读性的valueOf()方法:

Date的valueOf()方法将返回一个时间戳数值,该数值为Date对象与1970年1月1日零时的时间差(以毫秒为单位)。

var date = new Date()date.valueOf() // 1549951476233

登录后复制

其他一律返回对象本身。

示例

var colors = ["red", "blue", "green"] // 创建一个包含3 个字符串的数组 alert(colors.toString()) // red,blue,green alert(colors.valueOf()) // red,blue,green alert(colors) // red,blue,green

登录后复制

三个输出全部一样,那么toString()和valueOf()区别到底是什么?看下一个我写的例子:

var arr = [1,2,3]alert(Array.isArray(arr.valueOf())) // truealert(Array.isArray(arr.toString())) // false

登录后复制

结果是第一个是true而第二个是false,为什么呢,其实valueOf()调用完以后还是返回一个数组。这个数组被alert的时候会调用toString()函数,所以不是valueOf()和toString()函数相同,而是间接的调用了toString()函数!
进一步测试下:

var arr = [1,2,3] arr.toString = function () {   alert("调用了toString函数");} alert(arr.valueOf()) // "调用了toString函数"

登录后复制

结果就是我们会看到“调用了`toString函数”。
验证如下代码:

var test = {   value: 10,   toString: function() {     console.log('toString')    return this.value  },   valueOf: function() {     console.log('valueOf')    return this.value  } } alert(test) // 10 toString alert(+test) // 10 valueOf alert('' + test) // 10 valueOf alert(String(test)) // 10 toString alert(Number(test)) // 10 valueOf alert(test == '10') // true valueOf alert(test === '10') // false

登录后复制

valueOf的意思是返回最适合该对象类型的原始值,而toString则是将在该对象类型的原始值以字符串形式返回。

示例1

alert(test) // 10 toString

登录后复制

这里我们的alert函数需要是的字符串,所以获取的是字符串,而不是原始值,故而调用了toString

示例2

alert(+test) // 10 valueOf

登录后复制

同理,alert要的是字符串不是原始值,其实是(+test)的结果调用了toString,而+test被调用了valueOf
为了验证我们这样写:

var test = {   value: 1,   valueOf: function () {     alert("调用了test的valueOf函数")    return this.value   },   toString: function () {     alert("调用了test的toString函数")     return this.value   } }; var test2 = {   value: +test,   valueOf: function () {     alert("调用了test2的valueOf函数")     return this.value;  },   toString: function () {     alert("调用了test2的toString函数")    return this.value   } }; alert(test2)// 调用了test的valueOf函数// 调用了test2的toString函数// 1

登录后复制

其中让test2 = +test,那么即可知道结果,果然如此,调用了test的valueOf和test2的toString

示例3

alert('' + test) // 10 valueOf

登录后复制

同理,我们可以把上一段写的程序里面的test2: + test改成test2:” + test

示例4

alert(String(test)) // 10 toString

登录后复制

String这个强制转换其实在其内部是调用了传入参数的toString函数

示例5

alert(Number(test)) // 10 valueOf

登录后复制

示例6

alert(test == '10') // true valueOf

登录后复制

这个里面的判等的顺序是,获取原始值,然后判断两边的原始值是否相等,所以调用valueOf

示例7

alert(test === '10') // false

登录后复制

===操作符不进行隐式转换,判全等的第一个步骤是判断类型,因为类型都不一样了,所以后面什么都不会调用

总结

valueOf偏向于运算,toString偏向于显示。

在进行强转字符串类型时将优先调用toString方法,强转为数字时优先调用valueOf。

在有运算操作符的情况下,valueOf的优先级高于toString。

下面给大家简单说下valueof和tostring的区别:

valueOf():返回最适合该对象类型的原始值

toString(): 将该对象的原始值以字符串形式返回

这两个方法一般是交由JS去隐式调用,以满足不同的运算情况。

在数值运算里,会优先调用valueOf(),如a + b

在字符串运算里,会优先调用toString(),如alert(c)

以上就是Javascript中的valueOf与toString的对比介绍(代码示例)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2733353.html

(0)
上一篇 2025年3月8日 00:54:50
下一篇 2025年3月8日 00:54:58

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • javascript动态合并纵向单元格的方法介绍(代码)

    本篇文章给大家带来的内容是关于javascript动态合并纵向单元格的方法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、需求 合并相邻行内容相同的单元格。 2.概念 rowspan指定单元格纵向跨越的行数…

    2025年3月8日
    000
  • 如何使用JavaScript在Web浏览器中获取当前URL

    javascript为提供了许多方法来在web浏览器地址栏中显示当前url。您可以使用window对象的location对象属性来获取这些详细信息。下面是location对象的一些属性列表。第一个示例将在web浏览器中获取当前url。下面还…

    2025年3月8日
    200
  • constructor属性怎么用

    对象的constructor属性用于返回创建该对象的函数,也就是我们常说的构造函数。下面本篇文章就来带大家认识一下javascript的constructor属性,希望对大家有所帮助。 JavaScript constructor属性 作用…

    2025年3月8日
    200
  • prototype属性怎么用

    prototype属性是用来向对象添加属性和方法的,该属性的使用语法是“object.prototype.name=value”。 本文操作环境:Windows7系统、javascript1.8.5版、Dell G3电脑。 每一个构造函数都…

    2025年3月8日
    200
  • concat()方法怎么用

    javascript中的concat()方法可以用于连接两个或多个数组以创建新数组,也可用于连接字符串。 JavaScript  concat()方法 作用:用于连接两个或多个数组(字符串),该方法不会改变现有的数组或字符串。 语法: Ob…

    2025年3月8日 编程技术
    200
  • JavaScript中Vue-router有哪些钩子及应用?

    本篇文章给大家带来的内容是关于JavaScript中Vue-router有哪些钩子及应用?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 Vue-router有哪些钩子?使用场景? router的实现可以点这里 前面我们用大…

    编程技术 2025年3月8日
    200
  • 网页水印SDK的实现方法介绍(代码示例)

    本篇文章给大家带来的内容是关于网页水印sdk的实现方法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在网站浏览中,常常需要网页水印,以便防止用户截图或录屏暴露敏感信息后,追踪用户来源。如我们常用的钉钉软件…

    编程技术 2025年3月8日
    200
  • JavaScript拖拽上传功能的实现及原理介绍

    本篇文章给大家带来的内容是关于javascript拖拽上传功能的实现及原理介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 最近,小明遇到这样一种情况:在网页中上传文件时偶尔页面会崩溃。小明仔细测试了这种情况,发现之前用…

    2025年3月8日
    200
  • 基于iview-ui的导航栏路径配置(代码示例)

    本篇文章给大家带来的内容是关于基于iview-ui的导航栏路径配置(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 上家公司的后台管理系统都是刷表刷出来的,所用很久很久没写后台管理系统了。换了工作后总算要开始捣腾…

    编程技术 2025年3月8日
    200
  • Vue中虚拟dom比较原理的介绍(示例讲解)

    本篇文章给大家带来的内容是关于Vue中虚拟dom比较原理的介绍(示例讲解),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 先说一下为什么会有虚拟dom比较这一阶段,我们知道了vue是数据驱动视图(数据的变化将引起视图的变化…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论