视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Javascript中的valueOf与toString的对比介绍(代码示例)
2020-11-27 19:27:39 责编:小采
文档


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

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

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

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

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

toString()

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+/g
reg.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 = true
boolean.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())) // true
    alert(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)

    下载本文
    显示全文
    专题