JavaScript类型转换中的toString()和valueOf()方法

布满荆棘的人生 2022-04-21 15:54 134阅读 0赞

**1.总结**

toString( ):返回对象的字符串表示。  
valueOf( ):返回对象的字符串、数值或布尔值表示。

这两个方法一般是交由JS去隐式调用，以满足不同的运算情况。  
在数值运算里，会优先调用valueOf()，在字符串运算里，会优先调用toString()。

**2.toString()方法**

下面进行举例说明（undefined和null没有这两个方法）：

// toString()方法
    //先看看toString()方法的结果
    var a = 3;
    var b = '3';
    var c = true;
    var d = {test:'123',example:123}
    var e = function(){console.log('example');}
    var f = ['test','example'];
    
    a.toString();// "3"
    b.toString();// "3"
    c.toString();// "true"
    d.toString();// "[object Object]"
    e.toString();// "function (){console.log('example');}"
    f.toString();// "test,example"

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

**3.valueOf()方法**

如果对象存在任意原始值，它就默认将对象转换为表示它的原始值，如果对象是复合值，而且大多数对象无法真正表示为一个原始值，因此默认的valueOf( )方法简单地返回对象本身，而不是返回一个原始值。

数组、函数、和正则表达式简单的继承了这个默认方法，调用这些类型的实例的valueOf( )方法只是简答返回对象本身。

日期类定义的valueOf( )方法会返回它的一个内部表示：1970年1月1日以来的毫秒数。

原始值：不可变更的值，包括undefined、null、布尔值、数字、和字符串。

//再看看valueOf()方法的结果
    var a = 3;
    var b = '3';
    var c = true;
    var d = {test:'123',example:123}
    var e = function(){console.log('example');}
    var f = ['test','example'];
    
    a.valueOf();// 3
    b.valueOf();// "3"
    c.valueOf();// true
    d.valueOf();// {test:'123',example:123}
    e.valueOf();// function(){console.log('example');}
    f.valueOf();// ['test','example']
    
    [1,2].valueOf();  //=>  [1,2]  
    (function (){}).valueOf();   //=>  function (){}
    /\d/.valueOf();    //=>  /\d/  
    new Date().valueOf();   //=>  1502941383029

很清楚了，toString( )就是将其他东西用字符串表示，比较特殊的地方就是，表示对象的时候，变成"\[object Object\]",表示数组的时候，就变成数组内容以逗号连接的字符串，相当于Array.join(’,’)。 而valueOf( )就返回它自身了。

好了，我们现在已经了解toString( )方法 和 valueOf( )方法了，下来我们来说说，对象到字符串和对象到数字的转换。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

**4.对象到字符串的转换:**

1、如果对象具有toString( )方法，则调用这个方法。如果她返回一个原始值，JavaScript将这个值转换为字符串（如果本身不是字符串的话），并返回这个字符串结果。  
2、如果对象没有toString( )方法，或者这个方法并不返回一个原始值，那么JavaScript会调用valueOf( )方法。如果存在这个方法，则JavaScript调用它。如果返回值是原始值，JavaScript将这个值转换为字符串（如果本身不是字符串的话），并返回这个字符串结果。  
3、否则，JavaScript无法从toString()或者valueOf( )获得一个原始值，因此这时它将抛出一个类型错误异常。

![在这里插入图片描述][20181129234629503.png]

**5.对象到数字的转换：**

1、如果对象具有valueOf( )方法，后者返回一个原始值，则JavaScript将这个原始值转换为数字（如果需要的话）并返回这个数字。  
2、否则，如果对象具有toString( )方法，后者返回一个原始值，则JavaScript将其转化并返回。  
3、否则，JavaScript抛出一个类型错误异常。

![在这里插入图片描述][20181129234638871.png]

**所以这就解释了，为什么空数组会被转换为数字0，为什么具有单个元素的数组同样会转换成一个数字。**  
数组继承了默认的valueOf( )方法，这个方法返回一个对象而不是一个原始值，因此，数组到数字的转换则调用toString( )方法。空数组转换为空字符串，空字符串转换为数字0。含有一个元素的数组转换为字符串的结果和这个元素转换字符串的结果一样。如果数组只包含一个数字元素，这个数字转换为字符串，再转换回数字。

JavaScript中的"+“运算符可以进行数学加法和字符串连接操作。如果它的其中一个操作数是对象，则JavaScript将使用特殊的方法将对象转换为原始值，而不是使用其他算术运算符的方法执行对象到数字的转换，”= ="相等运算符与此类似。如果将对象和一个原始值比较，则转换将会遵照对象到原始值的转换方式进行。

“+” 和 "= ="应用的对象到原始值的转换包含日期对象的一种特殊情形。日期类是JavaScript语言核心中唯一的预先定义类型，它定义了有意义的向字符串和数字类型的转换。  
对于所有非日期的对象来说，对象到原始值的转换基本上是对象到数字的转换（首先调用valueOf( )），日期对象则使用对象到字符串的转换模式，然而，这里的转换和上文讲述的并不完全一致：通过valueOf( )或者toString( )返回的原始值将被直接使用，而不会被强制转换为数字或字符串。

和"= =“一样，”<"运算符以及其他关系运算符也会做对象到原始值的转换，但要除去日期对象的特殊情形：任何对象都会首先尝试调用valueOf( )，然后调用toString( )。不管得到的原始值是否直接使用，它都不会进一步被转换为数字或字符串。

**6.总结**

Valueof()小结：

1）undefined和null没有此方法（基本类型肯定没有方法，String、Number和Boolean是因为有对应的基本包装类型，才可以调用方法）；  
2）基本包装类型和对应的基本类型，调用valueOf()返回对应的基本类型值；  
3）对象类型（除Date类型）返回原对象；  
4）Date类型返回表示日期的毫秒数

toString()小结：  
1）undefined和null没有此方法（基本类型肯定没有方法，String、Number和Boolean是因为有对应的基本包装类型，才可以调用方法）；  
2）Date类型返回表示时间的字符串；  
3）Object类型返回字符串“\[object Object\]”。

Valueof()和toString()对比：  
1）toString()和valueOf()的主要不同点在于，toString()返回的是字符串，而valueOf()返回的是原对象  
2）由于undefined和null不是对象，所以它们toString()和valueOf()两个方法都没有  
3）数值Number类型的toString()方法可以接收转换基数，返回不同进制的字符串形式的数值；而valueOf()方法无法接受转换基数  
4）时间Date类型的toString()方法返回的表示时间的字符串表示；而valueOf()方法返回的是现在到1970年1月1日00:00:00的数值类型的毫秒数  
5）包装对象的valueOf()方法返回该包装对象对应的原始值

toString和转型函数String()函数的对比：  
toString()和String()都是将数据转换为对应的字符串，有如下区别：

1）String()可以将任何类型的值转换为字符串，包括undefined和null；

console.log(String(null));//"null"
    console.log(String(undefined));//"undefined"

2）String()不能接受数值基数作为参数

本文说了说 toString( )方法 和 valueOf( )方法的基础知识，文中的许多概念是出自JavaScript权威指南一书，大家可以多看看书。

可以参考文章：  
[https://segmentfault.com/a/1190000010824347][https_segmentfault.com_a_1190000010824347]  
[https://segmentfault.com/a/1190000011853909][https_segmentfault.com_a_1190000011853909]  
[http://www.cnblogs.com/youhong/p/6837534.html][http_www.cnblogs.com_youhong_p_6837534.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220414/3e8acfda390149cc9248dde5bccad4c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220414/900d1c8067c84ce088147bc0a5820fff.png
[20181129234629503.png]: /images/20220414/4639032fbbcc4903aa75688366d75337.png
[20181129234638871.png]: /images/20220414/bac347a2b3e3442ca981f904e1689ec1.png
[https_segmentfault.com_a_1190000010824347]: https://segmentfault.com/a/1190000010824347
[https_segmentfault.com_a_1190000011853909]: https://segmentfault.com/a/1190000011853909
[http_www.cnblogs.com_youhong_p_6837534.html]: http://www.cnblogs.com/youhong/p/6837534.html