JS的33个概念—toString和valueOf

た入场券 2021-11-27 01:20 254阅读 0赞

### **写在前面** ###

>  toString()：返回对象的字符串表示。 
> 
>  valueOf()：返回对象的字符串、数值或布尔值表示。通常与 toString()方法的返回值相同。

### 3.4.7 **Object**类型  ###

Object 的每个实例都具有下列属性和方法。

>  toString()：返回对象的字符串表示。
> 
>  valueOf()：返回对象的字符串、数值或布尔值表示。通常与 toString()方法的返回值相同。

### 3.5.1 一元操作符  ###

> 只能操作一个值的操作符叫做一元操作符。一元操作符是 ECMAScript 中最简单的操作符。

1. 递增和递减操作符

后置递增和递减与前置递增和递减有一个非常重要的区别，即递增和递减操作是在包含它们的语句被求

值之后才执行的。

> var num1 = 2; 
> 
> var num2 = 20; 
> 
> **var num3 = num1-- + num2; // 等于 22** 
> 
> var num4 = num1 + num2; // 等于 21

规则：递增和递减操作符遵循下列规则。

**在应用于对象时，先调用对象的 valueOf()方法（第 5 章将详细讨论）以取得一个可供操作的 12**

**值。然后对该值应用前述规则。如果结果是 NaN，则在调用 toString()方法后再应用前述规**

**则。对象变量变成数值变量。**

示例

var s1 = "2"; 
    var s2 = "z"; 
    var b = false; 
    var f = 1.1; 
    var o = { 
     valueOf: function() { 
     return -1; 
     } 
    }; 
    s1++; // 值变成数值 3 
    s2++; // 值变成 NaN 
    b++; // 值变成数值 1 
    f--; // 值变成 0.10000000000000009（由于浮点舍入错误所致）
    o--; // 值变成数值-2

### 2. 一元加和减操作符  ###

对象是先调用它们的 valueOf()和（或）toString()方法，再转换得到的值。

var s1 = "01"; 
    var s2 = "1.1"; 
    var s3 = "z"; 
    var b = false; 
    var f = 1.1; 
    var o = { 
      valueOf: function() { 
      return -1; 
      } 
    }; 
    s1 = +s1; // 值变成数值 1 
    s2 = +s2; // 值变成数值 1.1 
    s3 = +s3; // 值变成 NaN 
    b = +b; // 值变成数值 0 
    f = +f; // 值未变，仍然是 1o = +o; // 值变成数值-1

### 3.5.5 加性操作符 ###

**1.加法**

> 加法操作符（\+）的用法如下所示： 
> 
> var result = 1 + 2; 
> 
> 如果两个操作符都是数值，执行常规的加法计算，然后根据下列规则返回结果： 
> 
>  如果有一个操作数是 NaN，则结果是 NaN； 
> 
>  如果是 Infinity 加 Infinity，则结果是 Infinity； 
> 
>  如果是\-Infinity 加\-Infinity，则结果是\-Infinity； 
> 
>  如果是 Infinity 加\-Infinity，则结果是 NaN； 
> 
>  如果是\+0 加\+0，则结果是\+0； 
> 
>  如果是0 加0，则结果是0； 
> 
>  如果是\+0 加0，则结果是\+0。 
> 
> 不过，如果有一个操作数是字符串，那么就要应用如下规则： 
> 
>  如果两个操作数都是字符串，则将第二个操作数与第一个操作数拼接起来； 
> 
>  如果只有一个操作数是字符串，则将另一个操作数转换为字符串，然后再将两个字符串拼接 
> 
> 起来。 
> 
> **如果有一个操作数是对象、数值或布尔值，则调用它们的 toString()方法取得相应的字符串值，** 
> 
> **然后再应用前面关于字符串的规则。对于 undefined 和 null，则分别调用 String()函数并取得字符** 
> 
> **串"undefined"和"null"。**

下面来举几个例子：

var result1 = 5 + 5; // 两个数值相加

alert(result1); // 10

alert(result2); // "55" var result2 = 5 + "5"; // 一个数值

**2.减法**

> 2. 减法 减法操作符（）是另一个极为常用的操作符，其用法如下所示： var result = 2 - 1; 与加法操作符类似，ECMAScript 中的减法操作符在处理各种数据类型转换时，同样需要遵循一特殊规则，如下所示：  如果两个操作符都是数值，则执行常规的算术减法操作并返回结果；
> 
>  如果有一个操作数是 NaN，则结果是 NaN； 
> 
>  如果是 Infinity 减 Infinity，则结果是 NaN；
> 
>  如果是\-Infinity 减\-Infinity，则结果是 NaN； 
> 
>  如果是 Infinity 减\-Infinity，则结果是 Infinity； 
> 
>  如果是\-Infinity 减 Infinity，则结果是\-Infinity；
> 
>  如果是\+0 减\+0，则结果是\+0； 
> 
>  如果是\+0 减0，则结果是0； 
> 
>  如果是0 减0，则结果是\+0；
> 
>  如果有一个操作数是字符串、布尔值、null 或 undefined，则先在后台调用 Number()函数 其转换为数值，然后再根据前面的规则执行减法计算。如果转换的结果是 NaN，则减法的结果 就是 NaN； 
> 
>  **如果有一个操作数是对象，则调用对象的 valueOf()方法以取得表示该对象的数值。如果得到 的值是 NaN，则减法的结果就是 NaN。如果对象没有 valueOf()方法，则调用其 toString() 方法并将得到的字符串转换为数值。 下面几个例子展示了**

下面几个例子展示了上面的规则：
    var result1 = 5 - true; // 4，因为 true 被转换成了 1 
    var result2 = NaN - 1; // NaN 
    var result3 = 5 - 3; // 2 
    var result4 = 5 - ""; // 5，因为"" 被转换成了 0 
    var result5 = 5 - "2"; // 3，因为"2"被转换成了 2 
    var result6 = 5 - null; // 5，因为 null 被转换成了 0

华丽分割————————————————————————————————————————————————————

好了看题吧

之所以有这样的结果，因为它们偷偷地调用valueOf或toString方法。但如何区分什么情况下是调用了哪个方法呢

看下面的题

乍一看结果，大抵给人的感觉是，**如果转换为字符串时调用toString方法，如果是转换为数值时则调用valueOf方法**，但其中有两个很**不和谐。一个是alert(''+bbb)，字符串合拼应该是调用toString方法**……另一个我们暂时可以理解为===操作符不进行隐式转换，因此不调用它们。为了追究真相，我们需要更严谨的实验。

**toString**

var aa = {
        i: 10,
        toString: function () {
          console.log('toString');
          return this.i;
        }
      }
      alert(aa);// 10 toString
      alert(+aa); // 10 toString
      alert('' + aa); // 10 toString
      alert(String(aa)); // 10 toString
      alert(Number(aa)); // 10 toString
      alert(aa == '10'); // true toString

**valueOf**

var bb = {
        i: 10,
        valueOf: function () {
          console.log('valueOf');
          return this.i;
        }
      }
      alert(bb);// [object Object]
      alert(+bb); // 10 valueOf
      alert('' + bb); // 10 valueOf
      alert(String(bb)); // [object Object]
      alert(Number(bb)); // 10 valueOf
      alert(bb == '10'); // true valueOf

发现有点不同吧？！它没有像上面toString那样统一规整。对于那个\[object Object\]，我估计是从Object那里继承过来的，我们再去掉它看看。

Object.prototype.toString = null;
      var cc = {
        i: 10,
        valueOf: function () {
          console.log('valueOf');
          return this.i;
        }
      }
      alert(cc);// 10 valueOf
      alert(+cc); // 10 valueOf
      alert('' + cc); // 10 valueOf
      alert(String(cc)); // 10 valueOf
      alert(Number(cc)); // 10 valueOf
      alert(cc == '10'); // true valueOf

>  *  如果只重写了toString，则使用toString转换（对象转换时会无视valueOf的存在来进行转换)
>  *  如果只重写了valueOf方法，则使用valueOf转换（在要转换为字符串的时候会优先考虑valueOf方法)
>  *  有操作符的情况下，valueOf的优先级本来就比toString的高。
>  *  ### 在数值运算里，会优先调用valueOf()，在字符串运算里，会优先调用toString()。 ###

以下几种情况会用toString

**`alert(bbb);``// 10 toString`**

**`alert(String(bbb));``// 10 toString`**