JS的33个概念—toString和valueOf

写在前面

 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

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

 好了看题吧

  var aaa = {
    i: 10,
    valueOf: function () { return this.i + 30; },
    toString: function () { return this.valueOf() + 10; }
  }
  alert(aaa > 20); // true
  alert(+aaa); // 40
  alert(aaa); // 50

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

看下面的题

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

乍一看结果，大抵给人的感觉是，如果转换为字符串时调用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