JavaScript 數(shù)據(jù)類型轉換
JavaScript是一種動態(tài)類型語言，變量是沒有類型的，可以隨時賦予任意值。但是，數(shù)據(jù)本身和各種運算是有類型的，因此運算時變量需要轉換類型。大多數(shù)情況下，這種數(shù)據(jù)類型轉換是自動的，但是有時也需要手動強制轉換。
強制轉換
強制轉換主要指使用Number、String和Boolean三個構造函數(shù)，手動將各種類型的值，轉換成數(shù)字、字符串或者布爾值。
Number函數(shù)：強制轉換成數(shù)值
使用Number函數(shù)，可以將任意類型的值轉化成數(shù)字。
（1）原始類型值的轉換規(guī)則
-
數(shù)值：轉換后還是原來的值。
-
字符串：如果可以被解析為數(shù)值，則轉換為相應的數(shù)值，否則得到NaN。空字符串轉為0。
-
布爾值：true轉成1，false轉成0。
-
undefined：轉成NaN。
- null：轉成0。
Number("324") // 324
Number("324abc") // NaN
Number("") // 0
Number(false) // 0
Number(undefined) // NaN
Number(null) // 0Number函數(shù)將字符串轉為數(shù)值，要比parseInt函數(shù)嚴格很多?；旧希灰幸粋€字符無法轉成數(shù)值，整個字符串就會被轉為NaN。
parseInt('011') // 9
parseInt('42 cats') // 42
parseInt('0xcafebabe') // 3405691582
Number('011') // 11
Number('42 cats') // NaN
Number('0xcafebabe') // 3405691582上面代碼比較了Number函數(shù)和parseInt函數(shù)，區(qū)別主要在于parseInt逐個解析字符，而Number函數(shù)整體轉換字符串的類型。另外，Number會忽略八進制的前導0，而parseInt不會。
Number函數(shù)會自動過濾一個字符串前導和后綴的空格。
Number('\t\v\r12.34\n ')（2）對象的轉換規(guī)則
對象的轉換規(guī)則比較復雜。
-
先調用對象自身的valueOf方法，如果該方法返回原始類型的值（數(shù)值、字符串和布爾值），則直接對該值使用Number方法，不再進行后續(xù)步驟。
-
如果valueOf方法返回復合類型的值，再調用對象自身的toString方法，如果toString方法返回原始類型的值，則對該值使用Number方法，不再進行后續(xù)步驟。
- 如果toString方法返回的是復合類型的值，則報錯。
Number({a:1})
// NaN上面代碼等同于
if (typeof {a:1}.valueOf() === 'object'){
Number({a:1}.toString());
} else {
Number({a:1}.valueOf());
}上面代碼的valueOf方法返回對象本身（{a:1}），所以對toString方法的返回值“[object Object]”使用Number方法，得到NaN。
如果toString方法返回的不是原始類型的值，結果就會報錯。
var obj = {
valueOf: function () {
console.log("valueOf");
return {};
},
toString: function () {
console.log("toString");
return {};
}
};
Number(obj)
// TypeError: Cannot convert object to primitive value上面代碼的valueOf和toString方法，返回的都是對象，所以轉成數(shù)值時會報錯。
從上面的例子可以看出，valueOf和toString方法，都是可以自定義的。
Number({valueOf:function (){return 2;}})
// 2
Number({toString:function(){return 3;}})
// 3
Number({valueOf:function (){return 2;},toString:function(){return 3;}})
// 2上面代碼對三個對象使用Number方法。第一個對象返回valueOf方法的值，第二個對象返回toString方法的值，第三個對象表示valueOf方法先于toString方法執(zhí)行。
String函數(shù)：強制轉換成字符串
使用String函數(shù)，可以將任意類型的值轉化成字符串。規(guī)則如下：
（1）原始類型值的轉換規(guī)則
-
數(shù)值：轉為相應的字符串。
-
字符串：轉換后還是原來的值。
-
布爾值：true轉為“true”，false轉為“false”。
-
undefined：轉為“undefined”。
- null：轉為“null”。
String(123) // "123"
String("abc") // "abc"
String(true) // "true"
String(undefined) // "undefined"
String(null) // "null"（2）對象的轉換規(guī)則
如果要將對象轉為字符串，則是采用以下步驟。
-
先調用toString方法，如果toString方法返回的是原始類型的值，則對該值使用String方法，不再進行以下步驟。
-
如果toString方法返回的是復合類型的值，再調用valueOf方法，如果valueOf方法返回的是原始類型的值，則對該值使用String方法，不再進行以下步驟。
- 如果valueOf方法返回的是復合類型的值，則報錯。
String方法的這種過程正好與Number方法相反。
String({a:1})
// "[object Object]"上面代碼相當于下面這樣。
String({a:1}.toString())
// "[object Object]"如果toString方法和valueOf方法，返回的都不是原始類型的值，則String方法報錯。
var obj = {
valueOf: function () {
console.log("valueOf");
return {};
},
toString: function () {
console.log("toString");
return {};
}
};
String(obj)
// TypeError: Cannot convert object to primitive value下面是一個自定義toString方法的例子。
String({toString:function(){return 3;}})
// "3"
String({valueOf:function (){return 2;}})
// "[object Object]"
String({valueOf:function (){return 2;},toString:function(){return 3;}})
// "3"上面代碼對三個對象使用String方法。第一個對象返回toString方法的值（數(shù)值3），然后對其使用String方法，得到字符串“3”；第二個對象返回的還是toString方法的值（"[object Object]"），這次直接就是字符串；第三個對象表示toString方法先于valueOf方法執(zhí)行。
Boolean函數(shù)：強制轉換成布爾值
使用Boolean函數(shù)，可以將任意類型的變量轉為布爾值。
（1）原始類型值的轉換方法
以下六個值的轉化結果為false，其他的值全部為true。
- undefined
- null
- -0
- +0
- NaN
- ''（空字符串）
Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false（2）對象的轉換規(guī)則
所有對象的布爾值都是true，甚至連false對應的布爾對象也是true。
Boolean(new Boolean(false))
// true請注意，空對象{}和空數(shù)組[]也會被轉成true。
Boolean([]) // true
Boolean({}) // true自動轉換
當遇到以下幾種情況，JavaScript會自動轉換數(shù)據(jù)類型：
-
不同類型的數(shù)據(jù)進行互相運算；
-
對非布爾值類型的數(shù)據(jù)求布爾值;
- 對非數(shù)值類型的數(shù)據(jù)使用一元運算符（即“+”和“-”）。
自動轉換為布爾值
當JavaScript遇到預期為布爾值的地方（比如if語句的條件部分），就會將非布爾值的參數(shù)自動轉換為布爾值。它的轉換規(guī)則與上面的“強制轉換成布爾值”的規(guī)則相同，也就是說，在預期為布爾值的地方，系統(tǒng)內部會自動調用Boolean方法。
因此除了以下六個值，其他都是自動轉為true：
- undefined
- null
- -0
- +0
- NaN
- ''（空字符串）
if (!undefined && !null && !0 && !NaN && !''){
console.log('true');
}
// true自動轉換為字符串
當JavaScript遇到預期為字符串的地方，就會將非字符串的數(shù)據(jù)自動轉為字符串，轉換規(guī)則與“強制轉換為字符串”相同。
字符串的自動轉換，主要發(fā)生在加法運算時。當一個值為字符串，另一個值為非字符串，則后者轉為字符串。
'5' + 1 // '51'
'5' + true // "5true"
'5' + false // "5false"
'5' + {} // "5[object Object]"
'5' + [] // "5"
'5' + function (){} // "5function (){}"
'5' + undefined // "5undefined"
'5' + null // "5null"自動轉換為數(shù)值
當JavaScript遇到預期為數(shù)值的地方，就會將參數(shù)值自動轉換為數(shù)值，轉換規(guī)則與“強制轉換為數(shù)值”相同。
除了加法運算符有可能把運算子轉為字符串，其他運算符都會把兩側的運算子自動轉成數(shù)值。
'5' - '2' // 3
'5' * '2' // 10
true - 1 // 0
false - 1 // -1
'1' - 1 // 0
'5'*[] // 0
false/'5' // 0
'abc'-1 // NaN上面都是二元算術運算符的例子，JavaScript的兩個一元算術運算符——正號和負號——也會把運算子自動轉為數(shù)值。
+'abc' // NaN
-'abc' // NaN
+true // 1
-false // 0小結
由于自動轉換有很大的不確定性，而且不易除錯，建議在預期為布爾值、數(shù)值、字符串的地方，全部使用Boolean、Number和String方法進行顯式轉換。
加法運算符的類型轉化
加法運算符（+）需要特別討論，因為它可以完成兩種運算（加法和字符連接），所以不僅涉及到數(shù)據(jù)類型的轉換，還涉及到確定運算類型。
三種情況
加法運算符的類型轉換，可以分成三種情況討論。
（1）運算子之中存在字符串
兩個運算子之中，只要有一個是字符串，則另一個不管是什么類型，都會被自動轉為字符串，然后執(zhí)行字符串連接運算。前面的《自動轉換為字符串》一節(jié)，已經舉了很多例子。
（2）兩個運算子都為數(shù)值或布爾值
這種情況下，執(zhí)行加法運算，布爾值轉為數(shù)值（true為1，false為0）。
true + 5 // 6
true + true // 2（3）運算子之中存在對象
運算子之中存在對象（或者準確地說，存在非原始類型的值），則先調用該對象的valueOf方法。如果返回結果為原始類型的值，則運用上面兩條規(guī)則；否則繼續(xù)調用該對象的toString方法，對其返回值運用上面兩條規(guī)則。
1 + [1,2]
// "11,2"上面代碼的運行順序是，先調用[1,2].valueOf()，結果還是數(shù)組[1,2]本身，則繼續(xù)調用[1,2].toString()，結果字符串“1,2”，所以最終結果為字符串“11,2”。
1 + {a:1}
// "1[object Object]"對象{a:1}的valueOf方法，返回的就是這個對象的本身，因此接著對它調用toString方法。({a:1}).toString()默認返回字符串"[object Object]"，所以最終結果就是字符串“1[object Object]”
有趣的是，如果更換上面代碼的運算次序，就會得到不同的值。
{a:1} + 1
// 1原來此時，JavaScript引擎不將{a:1}視為對象，而是視為一個代碼塊，這個代碼塊沒有返回值，所以被忽略。因此上面的代碼，實際上等同于 {a:1};+1 ，所以最終結果就是1。為了避免這種情況，需要對{a:1}加上括號。
({a:1})+1
"[object Object]1"將{a:1}放置在括號之中，由于JavaScript引擎預期括號之中是一個值，所以不把它當作代碼塊處理，而是當作對象處理，所以最終結果為“[object Object]1”。
1 + {valueOf:function(){return 2;}}
// 3上面代碼的valueOf方法返回數(shù)值2，所以最終結果為3。
1 + {valueOf:function(){return {};}}
// "1[object Object]"上面代碼的valueOf方法返回一個空對象，則繼續(xù)調用toString方法，所以最終結果是“1[object Object]”。
1 + {valueOf:function(){return {};}, toString:function(){return 2;}}
// 3上面代碼的toString方法返回數(shù)值2（不是字符串），則最終結果就是數(shù)值3。
1 + {valueOf:function(){return {};}, toString:function(){return {};}}
// TypeError: Cannot convert object to primitive value上面代碼的toString方法返回一個空對象，JavaScript就會報錯，表示無法獲得原始類型的值。
四個特殊表達式
有了上面這些例子，我們再進一步來看四個特殊表達式。
（1）空數(shù)組 + 空數(shù)組
[] + []
// ""首先，對空數(shù)組調用valueOf方法，返回的是數(shù)組本身；因此再對空數(shù)組調用toString方法，生成空字符串；所以，最終結果就是空字符串。
（2）空數(shù)組 + 空對象
[] + {}
// "[object Object]"這等同于空字符串與字符串“[object Object]”相加。因此，結果就是“[object Object]”。
（3）空對象 + 空數(shù)組
{} + []
// 0JavaScript引擎將空對象視為一個空的代碼塊，加以忽略。因此，整個表達式就變成“+ []”，等于對空數(shù)組求正值，因此結果就是0。轉化過程如下：
+ []
// Number([])
// Number([].toString())
// Number("")
// 0如果JavaScript不把前面的空對象視為代碼塊，則結果為字符串“[object Object]”。
({}) + []
// "[object Object]"（4）空對象 + 空對象
{} + {}
// NaNJavaScript同樣將第一個空對象視為一個空代碼塊，整個表達式就變成“+ {}”。這時，后一個空對象的ValueOf方法得到本身，再調用toSting方法，得到字符串“[object Object]”，然后再將這個字符串轉成數(shù)值，得到NaN。所以，最后的結果就是NaN。轉化過程如下：
+ {}
// Number({})
// Number({}.toString())
// Number("[object Object]")如果，第一個空對象不被JavaScript視為空代碼塊，就會得到“[object Object][object Object]”的結果。
({}) + {}
// "[object Object][object Object]"
({} + {})
// "[object Object][object Object]"
console.log({} + {})
// "[object Object][object Object]"
var a = {} + {};
a
// "[object Object][object Object]"需要指出的是，對于第三和第四種情況，Node.js的運行結果不同于瀏覽器環(huán)境。
{} + {}
// "[object Object][object Object]"
{} + []
// "[object Object]"可以看到，Node.js沒有把第一個空對象視為代碼塊。原因是Node.js的命令行環(huán)境，內部執(zhí)行機制大概是下面的樣子：
eval.call(this,"(function(){return {} + {}}).call(this)")Node.js把命令行輸入都放在eval中執(zhí)行，所以不會把起首的大括號理解為空代碼塊加以忽略。
參考鏈接
- Axel Rauschmayer, What is {} + {} in JavaScript?
- Axel Rauschmayer, JavaScript quirk 1: implicit conversion of values
- Benjie Gillam, Quantum JavaScript?
更多建議：