摘要：首先，為了掌握好類型轉(zhuǎn)換，我們要理解一個重要的抽象操作為什么說這是個抽象操作呢因為這是內(nèi)部才會使用的操作，我們不會顯示調(diào)用到?；疽?guī)則中的類型轉(zhuǎn)換總是返回基本類型值，如字符串?dāng)?shù)字和布爾值，不會返回對象和函數(shù)。

Javascript 里的類型轉(zhuǎn)換是一個你永遠(yuǎn)繞不開的話題，不管你是在面試中還是工作寫代碼，總會碰到這類問題和各種的坑，所以不學(xué)好這個那是不行滴。關(guān)于類型轉(zhuǎn)換我也看過不少的書和各種博客、帖子，也查過規(guī)范和做過各種測試，這里就談?wù)勎业目偨Y(jié)和理解吧。

首先，為了掌握好類型轉(zhuǎn)換，我們要理解一個重要的抽象操作：ToPrimitive

為什么說這是個抽象操作呢？因為這是 Javascript 內(nèi)部才會使用的操作，我們不會顯示調(diào)用到。當(dāng)需要將對象轉(zhuǎn)換為相應(yīng)的基本類型值時，ToPrimitive 就會調(diào)用對象的內(nèi)部方法 [[DefaultValue]] 來完成。

ToPrimitive 操作接收兩個參數(shù)，一個是 input 需要轉(zhuǎn)換的值，第二個是可選參數(shù) hint 代表期望的轉(zhuǎn)換類型。并且在調(diào)用 [[DefaultValue]] 的時候 hint 會傳遞過去。

這里我們首先只需要知道 [[DefaultValue]] 會調(diào)用 valueOf() 和 toString() 來完成基本類型值的轉(zhuǎn)換。但是請注意：valueOf() 和 toString() 的調(diào)用邏輯順序并不是固定的取決于 hint 參數(shù)，這個我們下面會講到。

JavaScript 中的類型轉(zhuǎn)換總是返回基本類型值，如字符串、數(shù)字和布爾值，不會返回對象和函數(shù)。那么這也對應(yīng)了三種抽象操作：ToString、ToNumber 和 ToBoolean，下面就來逐一說明。

var a = {};
console.log(String(a));
// 顯式類型轉(zhuǎn)換，輸出為："[object Object]"

以上代碼我們通常稱為顯示類型轉(zhuǎn)換，這里面就包含 ToString 抽象操作，也就是把非字符串值轉(zhuǎn)換為字符串的操作。

先來看看非對象的基本類型值的 ToString 轉(zhuǎn)換規(guī)則：

接著我們重點來看一下輸入是對象的轉(zhuǎn)換規(guī)則。

這個時候 ToPrimitive 就出場了，并且 hint 參數(shù)是 String。還記得 ToPrimitive 內(nèi)部是調(diào)用的[[DefaultValue]]嗎，并且這個時候 hint 是 String 。下面來看下這種情況下 ToPrimitive 的調(diào)用邏輯：

toPrimitive 調(diào)用 [[DefaultValue]] 并傳遞 hint，然后返回調(diào)用結(jié)果

[[DefaultValue]] 根據(jù) hint 是 String 執(zhí)行以下調(diào)用順序：

如果對象存在 toString() 并返回一個基本類型值，即返回這個值

如果 toString() 不存在或返回的不是一個基本類型值，就調(diào)用 valueOf()

如果 valueOf() 存在并返回一個基本類型值，即返回這個值

如果 valueOf() 不存在或返回的不是一個基本類型值，則拋出 TypeError 異常

那么這里就可以總結(jié)為：對象在類型轉(zhuǎn)換為字符串時， toString() 的調(diào)用順序在 valueOf() 之前，并且這兩個方法如果都沒有返回一個基本類型值，則拋出異常；如果返回了基本類型值 primValue，則返回 String(primValue)

基本類型值的 ToString 結(jié)果參看前面那個表格

我們來測試一下。先看下這節(jié)開頭的例子：

var a = {};
console.log(String(a));

字面量對象的原型是 Object.prototype，Object.prototype.toString() 返回內(nèi)部屬性 [[Class]] 的值，那么結(jié)果就是 [object Object]。OK 沒有問題

然后測試一下 ToPrimitive 的調(diào)用邏輯。來看下這段代碼：

var a = Object.create(null);

上面的意思是創(chuàng)建一個沒有原型的對象(沒有原型就沒有繼承的 toString() 和 valueOf() 了)。接下來：

console.log(String(a));
// Uncaught TypeError: Cannot convert object to primitive value

這里因為沒有 toString() 和 valueOf() 所以就拋出 TypeError 異常了。OK，跟前面的總結(jié)一致。

下面來測試一下 toString() 和 valueOf() 的調(diào)用順序邏輯，上代碼：

a.toString = function() {
  return "hello";
};

a.valueOf = function() {
  return true;
};

console.log(String(a)); // "hello"

我們加入了 toString() 和 valueOf() ，并且跟前面的總結(jié)一致，確實是 toString() 先返回結(jié)果。接著做一下變化：

a.toString = function() {
  return {};
};
// 或是直接去掉這個方法，a.toString = undefined;

a.valueOf = function() {
  return true;
};

console.log(String(a)); // "true"

當(dāng) toString() 返回的不是一個基本類型值或不存在 toString() 時，返回 valueOf() 的結(jié)果，并且遵循基本類型值的 ToString 轉(zhuǎn)換結(jié)果。OK，驗證沒有問題 其他的情況也可以根據(jù)前面的總結(jié)邏輯自己驗證下。

在《Javascript 高級程序設(shè)計（第 3 版）》和《你不知道的 Javascript（中卷）》上均未提到類型轉(zhuǎn)換到字符串會與 valueOf() 有關(guān)系

首先照例先來看下非對象的基本類型值的 ToNumber 轉(zhuǎn)換規(guī)則：

字符串轉(zhuǎn)數(shù)字上面只說了一些常用的情況，更多細(xì)節(jié)請看 這里

然后來看看對象 ToNumber 的情況。這里與對象轉(zhuǎn)字符串的情況類似，也會調(diào)用 ToPrimitive 來轉(zhuǎn)換（hint 是 Number）。但細(xì)節(jié)與 ToString 稍有不同，這里直接給出結(jié)論：

對象在類型轉(zhuǎn)換為數(shù)字時， valueOf() 的調(diào)用順序在 toString() 之前，并且這兩個方法如果都沒有返回一個基本類型值，則拋出異常；如果返回了基本類型值 primValue，則返回 Number(primValue)

這里驗證了 ToPrimitive 里面說到的，[[DefaultValue]] 會根據(jù) hint 參數(shù)決定 toString() 和 valueOf() 的調(diào)用順序

接著來用代碼說話：

var a = Object.create(null);
console.log(Number(a));
// Uncaught TypeError: Cannot convert object to primitive value

這里因為沒有 toString() 和 valueOf() 所以就拋出 TypeError 異常了。OK，跟前面的總結(jié)一致。

我們先加入 valueOf() 方法：

a.valueOf = function() {
  return 123;
}
console.log(Number(a)); // 123

valueOf() 返回了數(shù)字 123，所以輸出沒問題。再修改一下：

a.valueOf = function() {
  return true;
}
console.log(Number(a)); // 1

valueOf() 返回了 true，這也是一個基本類型，然后根據(jù)基本類型轉(zhuǎn)換規(guī)則 true 轉(zhuǎn)換為 1，也是對的。

再來：

a.valueOf = function() {
  return NaN;
}
console.log(Number(a)); // NaN

NaN 是一個特殊的數(shù)值，所以也是基本類型。OK，也是對的。

這里的結(jié)果說明了《Javascript 高級程序設(shè)計(第 3 版)》關(guān)于對象轉(zhuǎn)換為數(shù)字的解釋是有錯誤的，書上是這么說的：如果轉(zhuǎn)換的結(jié)果是 NaN，則調(diào)用對象的 toString() 方法

再來驗證一下 toString() 的調(diào)用順序：

a.valueOf = function() {
  return {};
}
a.toString = function() {
  return "123";
}
console.log(Number(a)); // 123

因為 valueOf() 返回了對象非基本類型值，轉(zhuǎn)而執(zhí)行 toString()，返回的 "123" 根據(jù)字符串轉(zhuǎn)換數(shù)字的規(guī)則就是 123，對于 valueOf() 和 toString() 的執(zhí)行順序驗證也是 OK 的。

最后我們來看看轉(zhuǎn)換為布爾值。這個比較簡單，一個列表可以全部歸納了：

ToBoolean 轉(zhuǎn)換規(guī)則比較簡單，只有一個需要注意的地方，那就是封箱操作：

var a = new Boolean(false);
console.log(Boolean(a));
// 輸出是 true 不是 false 喔

new Boolean(false) 返回的是對象不是布爾值，所以最好避免進(jìn)行類似的操作。

以上即是我總結(jié)的 JS 類型轉(zhuǎn)換基本規(guī)則，當(dāng)你明顯感知類型轉(zhuǎn)換即將發(fā)生時可以拿上面的規(guī)則去套（也就是我們通常說的顯式類型轉(zhuǎn)換，以上轉(zhuǎn)換規(guī)則面試時特別有用喔）。

既然規(guī)則有了，下一篇準(zhǔn)備聊一下隱式類型轉(zhuǎn)換，有了這篇的基礎(chǔ)掌握隱式轉(zhuǎn)換會容易很多。

歡迎 star 和關(guān)注我的 JS 博客：小聲比比 Javascript

ES5 規(guī)范注釋

《Javascript 高級程序設(shè)計（第 3 版）》

《你不知道的 Javascript（中卷）》