摘要：方法和方法介紹方法和我們知道在中，一切皆為對象。每個對象都有一個方法和方法，其中方法返回一個表示該對象的字符串，方法返回該對象的原始值。這兩個方法都是原型鏈上的方法，被每個對象所繼承。

valueOf()方法和toString()

我們知道在js中，"一切皆為對象"。每個對象都有一個toString()方法和value方法，其中toString()方法返回一個表示該對象的字符串，value方法返回該對象的原始值。對于toString方法來說，當(dāng)對象被表示為文本值或者當(dāng)以期望字符串的方式引用對象時。該方法被自動調(diào)用。對于一個對象，toSting()返回"[object type]",其中type是對象類型。如果x不是對象，toString()返回應(yīng)有的文本值。
對于valueOf() 方法來說，默認(rèn)情況下, valueOf() 會被每個對象Object繼承。每一個內(nèi)置對象都會覆蓋這個方法為了返回一個合理的值，如果對象沒有原始值，valueOf() 就會返回對象自身。
但是注意，對于Null如果
不同類型的對象的value方法的返回值

二者的使用場景以及區(qū)別與比較

通過來自MDN[!https://developer.mozilla.org...]上面對兩個方法的介紹，我們得知。這兩個方法都是Object原型鏈上的方法，被每個對象所繼承。下面，我們看下該方法在兩個應(yīng)用場景下的區(qū)別。
1、對于值類型數(shù)據(jù)(又叫基本類型)場景下，toString及valueOf方法的使用

var str = "hello",n = 123,bool = true;

console.log(typeof(str.toString())+ "_"+ str.toString())        //string_hello
console.log(typeof(n.toString())+"_"+n.toString()  )            //string_123
console.log(typeof(bool.toString())+"_"+bool.toString())        //string_true

toString放對于值類型數(shù)據(jù)使用而言，其效果相當(dāng)于類型轉(zhuǎn)換，將原類型轉(zhuǎn)為字符串。

console.log(typeof(str.valueOf())+"_"+str.valueOf())            //string_hello
console.log(typeof(n.valueOf())+"_"+n.valueOf())                //string_123
console.log(typeof(bool.valueOf())+"_"+bool.valueOf())          //string_true

console.log(str.valueOf === str) //  // true
console.log(n.valueOf === n) //   // true
console.log(bool.valueOf() === bool) // true

由上面的例子可以得出，
toString方法對于值類型數(shù)據(jù)使用而言，其效果相當(dāng)于類型轉(zhuǎn)換，將原類型轉(zhuǎn)為字符串。
valueOf方法對于值類型數(shù)據(jù)使用而言，其效果將相當(dāng)于返回原數(shù)據(jù)。
2、復(fù)合對象類型數(shù)據(jù)使用toString及valueOf方法

var obj = {};

console.log(obj.toString());    //[object Object] 返回對象類型
console.log(obj.valueOf());     //{} 返回對象本身

可以看到與方法介紹中所說一致。下面讓我們看下，具體兩個方法是如何執(zhí)行的。

var test = { 
 i: 10, 
 toString: function() { 
 console.log("toString"); 
 return this.i; 
 }, 
 valueOf: function() { 
 console.log("valueOf"); 
 return this.i; 
 } 
} 
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

其中，第一個alert,我們可以看到調(diào)用了toString方法，說明alert這里是需要一個字符串，這樣我們可以推測,toString()方法一般不需要我們主動去顯示的調(diào)用，符合對象類型會在相應(yīng)的場景中調(diào)用適合的方法，返回適當(dāng)類型的值。
第二個，這里通過alert我們知道這里依然是需要一個字符串的值，所以這里是+test調(diào)用了toString方法。而對于test,調(diào)用valueOf方法。在有運(yùn)算操作符的情況下,valueOf的優(yōu)先級要高一點(diǎn)。可以看一個例子。

var ab = { 
  i: 1, 
  valueOf: function () { 
    alert("你調(diào)用了a的valueOf函數(shù)"); 
    return this.i; 
  }, 
  toString: function () { 
    alert("你調(diào)用了a的toString函數(shù)"); 
    return this.i; 
  } 
}; 
var c = { 
  i: +ab, 
  valueOf: function () { 
    alert("你調(diào)用了c的valueOf函數(shù)"); 
    return this.i; 
  }, 
  toString: function () { 
    alert("你調(diào)用了c的toString函數(shù)"); 
    return this.i; 
  } 
}; 
alert(c);

第三個，同樣我們可以把上面的例子改為。

var c = { 
  i: ""+ab, 
  valueOf: function () { 
    alert("你調(diào)用了c的valueOf函數(shù)"); 
    return this.i; 
  }, 
  toString: function () { 
    alert("你調(diào)用了c的toString函數(shù)"); 
    return this.i; 
  } 
}; 
alert(c);

第四個，String方法是要返回一個字符串類型，所以這里調(diào)用了toString()方法。
第五個,強(qiáng)轉(zhuǎn)換為數(shù)字類型，調(diào)用了valueOf方法。
第六個,這個里面的判等的順序是，獲取原始值，然后判斷兩邊的原始值是否相等，所以調(diào)用valueOf。
第七個,alert(bbb === "10"); // false
===操作符不進(jìn)行隱式轉(zhuǎn)換，判全等的第一個步驟是判斷類型，因?yàn)轭愋投疾灰粯恿耍院竺媸裁炊疾粫{(diào)用.
總結(jié)：
1、在進(jìn)行強(qiáng)轉(zhuǎn)字符串類型時將優(yōu)先調(diào)用toString方法，強(qiáng)轉(zhuǎn)為數(shù)字時優(yōu)先調(diào)用valueOf。
2、在有運(yùn)算操作符的情況下，valueOf的優(yōu)先級高于toString。
這兩個方法一般是交由js去隱式調(diào)用，以滿足不同的運(yùn)算情況。
在數(shù)值運(yùn)算里，會優(yōu)先調(diào)用valueOf()，如 a + b;
在字符串運(yùn)算里，會優(yōu)先調(diào)用toString(),如alert(c).

補(bǔ)充下toString()方法和String()方法的區(qū)別

toString()方法和String()方法都可以轉(zhuǎn)換為字符串類型。
1、toString()可以將所有的數(shù)據(jù)都轉(zhuǎn)換為字符串，但是要排除null和undefined

var str = false.toString();
console.log(str, typeof str);         //false, string

但是 null和undefined不能轉(zhuǎn)換為字符串,null和undefined調(diào)用toString()方法會報錯

var str = null.toString();
var str = undefined.soString();

如果當(dāng)前數(shù)據(jù)為數(shù)字類型，則toString()括號中的可以寫一個數(shù)字，代表進(jìn)制，可以將數(shù)字轉(zhuǎn)化為對應(yīng)進(jìn)制字符串。

var num = 123;
console.log(num.toString()+"_"+ typeof(num.toString()));    //123_string
console.log(num.toString(2)+"_"+typeof(num.toString()));    //1111011_string
console.log(num.toString(8)+"_"+typeof(num.toString()));    //173_string
console.log(num.toString(16)+"_"+typeof(num.toString()));   //7b_string

2、String()可以將null和undefined轉(zhuǎn)換為字符串，但是沒法轉(zhuǎn)進(jìn)制字符串。當(dāng) String() 和運(yùn)算符 new 一起作為構(gòu)造函數(shù)使用時，它返回一個新創(chuàng)建的 String 對象，存放的是字符串 s 或 s 的字符串表示。

var str = new String("123");
console.log(str+"_"+typeof(str));     //123_object

當(dāng)不用 new 運(yùn)算符調(diào)用 String() 時，它只是把s轉(zhuǎn)換成原始的字符串，并返回轉(zhuǎn)換后的值。

var str = String(s);
console.log(str+"_"+typeof(str))                      //123_string

對象的Symbol.toPrimitive屬性。指向一個方法。該對象被轉(zhuǎn)化為原始類型的值時，會調(diào)用這個辦法，返回該對象對應(yīng)的原始類型值。
Symbol.toPrimitive被調(diào)用時,會接受一個字符串參數(shù)，表示當(dāng)前運(yùn)算的模式，一個有三種模式。

Number:該場合需要轉(zhuǎn)成數(shù)值

String:該場合需要轉(zhuǎn)成字符串

Default:該場合可以轉(zhuǎn)成數(shù)值，也可以轉(zhuǎn)成字符串。

以上內(nèi)容來自阮老師的ES6入門，下面我們結(jié)合幾個例子，具體看下Symbol.toPrimitive是如何被調(diào)用的。

// 沒有 Symbol.toPrimitive 屬性的對象
var obj1 = {};
console.log(+obj1);       //NaN
console.log(`${obj1}`);   //"[object Object]"
console.log(obj1 + "");   //"[object Object]"

上面的結(jié)果我們可以通過上面說的toSting()方法和value方法去理解。
第一個，+符號。可以看成是是把數(shù)據(jù)轉(zhuǎn)化為數(shù)字類型，由于obj是個空對象，所以結(jié)果是NaN
第二個，是es6中的字符串的新語法，這里需要的結(jié)果是一個字符串，所以使用的是toString()方法，而toString()方法返回的是對象的類型。
第三個，這里是連接符連接obj。實(shí)際上也是需要字符串的結(jié)果，所以同理。

// 擁有 Symbol.toPrimitive 屬性的對象
var obj2 = {
  [Symbol.toPrimitive](hint) {
    if(hint == "number"){
        return 10;
    }
    if(hint == "string"){
        return "hello";
    }
    return true;
  }
}

console.log(+obj2);     //10    --hint in "number"
console.log(`${obj2}`); //hello --hint is "string"
console.log(obj2 + ""); //"true"

// 擁有 Symbol.toPrimitive 屬性的對象
let obj = {
  [Symbol.toPrimitive](hint) {
    if(hint === "number"){
      console.log("Number場景");
      return 123;
    }
    if(hint === "string"){
      console.log("String場景");
      return "str";
    }
    if(hint === "default"){
      console.log("Default 場景");
      return "default";
    }
  }
}
console.log(2*obj); // Number場景 246
console.log(3+obj); // String場景 3default
console.log(obj + "");  // Default場景 default
console.log(String(obj)); //String場景 str

由以上例子可以總結(jié)，一般情況下，+連接運(yùn)算符傳入的參數(shù)是default,而對于乘法等算數(shù)運(yùn)算符傳入的是number。對于String(str),${str}等情況，傳入的參數(shù)是defalut。

Symbol.toPrimitive和toString、valueOf

當(dāng)然，你也可以重寫一個不做參數(shù)判斷的Symbol.toPrimitive方法，結(jié)合上面提到的toString,可以有以下例子。

let ab = {
    valueOf() {
        return 0;
    },
    toString() {
        return "1";
    },
    [Symbol.toPrimitive]() {
        return 2;
    }
}
console.log(1+ab);
console.log("1"+ab);

可以看到，Symbol.toPrimitive方法在轉(zhuǎn)換基本類型的時候優(yōu)先級最高。

參考鏈接：
http://www.sohu.com/a/1464105...
https://www.cnblogs.com/good1...
https://www.jb51.net/article/...
https://yuchengkai.cn/docs/zh...
https://github.com/ruanyf/es6...
https://developer.mozilla.org...
https://blog.csdn.net/kittyji...