站長資訊網本篇文章給大家帶來了JavaScript中類型轉換的相關知識，將值轉換為原始值、轉換為數字和轉換為字符串，這剛好對應了引擎內部的三種抽象操作:ToPrimitive()、ToNumber()、ToString()，希望對大家有幫助。
JavaScript 加法規則
在JavaScript中，加法的規則其實很簡單，只有兩種情況：
-
數字和數字相加
-
字符串和字符串相加
所有其他類型的值都會被自動轉換成這兩種類型的值
在JavaScript中,一共有兩種類型的值:
-
原始值有：undefined、null、 布爾值(boolean)、 數字(number)、字符串(string)、symbol
-
對象值：其他的所有值都是對象類型的值，包括數組(arrays)和函數(functions)
類型轉換
加法運算符會觸發三種類型轉換：將值轉換為原始值、轉換為數字、轉換為字符串，這剛好對應了JavaScript引擎內部的三種抽象操作:ToPrimitive()、ToNumber()、ToString()
通過 ToPrimitive() 將值轉換為原始值
ToPrimitive(input, PreferredType?)
可選參數PreferredType可以是Number或者String,它只代表了一個轉換的偏好,轉換結果不一定必須是這個參數所指的類型,但轉換結果一定是一個原始值.如果PreferredType被標志為Number,則會進行下面的操作來轉換輸入的值 (§9.1):
-
如果輸入的值已經是個原始值,則直接返回它.
-
否則,如果輸入的值是一個對象.則調用該對象的valueOf()方法.如果valueOf()方法的返回值是一個原始值,則返回這個原始值.
-
否則,調用這個對象的toString()方法.如果toString()方法的返回值是一個原始值,則返回這個原始值.
-
否則,拋出TypeError異常.
如果PreferredType被標志為String,則轉換操作的第二步和第三步的順序會調換.如果沒有PreferredType這個參數,則PreferredType的值會按照這樣的規則來自動設置: Date類型的對象會被設置為String,其它類型的值會被設置為Number.
通過ToNumber()將值轉換為數字
如果輸入的值是一個對象,則會首先會調用ToPrimitive(obj, Number)將該對象轉換為原始值,然后在調用ToNumber()將這個原始值轉換為數字.
通過ToString()將值轉換為字符串
如果輸入的值是一個對象,則會首先會調用ToPrimitive(obj, String)將該對象轉換為原始值,然后再調用ToString()將這個原始值轉換為字符串.
demo
var obj = { valueOf: function () { console.log("valueOf"); return {}; // 沒有返回原始值 }, toString: function () { console.log("toString"); return {}; // 沒有返回原始值 } }
Number作為一個函數被調用(而不是作為構造函數調用)時,會在引擎內部調用ToNumber()操作:
Number(obj) // output valueOf toString Uncaught TypeError: Cannot convert object to primitive value String(obj) // output toString valueOf Uncaught TypeError: Cannot convert object to primitive value
加法
value1 + value2
在計算這個表達式時，操作步驟是這樣的:
-
將兩個操作數轉換為原始值 (下面是數學表示法,不是JavaScript代碼):
prim1 := ToPrimitive(value1) prim2 := ToPrimitive(value2)
PreferredType被省略,因此 Date 類型的值采用String,其他類型的值采用Number.
-
如果 prim1 或者 prim2 中的任意一個為字符串，則將另外一個也轉換成字符串，然后返回兩個字符串連接操作后的結果；
-
否則，將 prim1 和 prim2 都轉換為數字類型，返回他們的和。
[]+[]
輸出： ''
[]會被轉換成一個原始值,首先嘗試 valueOf() 方法,返回數組本身(this):
> var arr = []; > arr.valueOf() === arr true
這樣的結果不是原始值,所以再調用 toString() 方法，返回一個空字符串(是一個原始值)。因此,[] + [] 的結果實際上是兩個空字符串的連接.
> [] + {} '[object Object]'
{} + {}
輸出：NaN
-
JavaScript引擎將第一個{}解釋成了一個空的代碼塊并忽略了它
-
這里的加號并不是代表加法的二元運算符，而是一個一元運算符，作用是將它后面的操作數轉換成數字，和 Number() 函數完全一樣。例如:
+{} Number({}) Number({}.toString()) // 因為{}.valueOf()不是原始值 Number("[object Object]") NaN
> {} + [] 0
-
{} 忽略
-
+[] = Number([]) = Number([].toString()) = Number("") = 0
有趣的是,Node.js的REPL在解析類似的輸入時,與Firefox和Chrome(和Node.js一樣使用V8引擎)的解析結果不同.下面的輸入會被解析成一個表達式,結果更符合我們的預料:
> {} + {} '[object Object][object Object]' > {} + [] '[object Object]'
總結
對象.valueOf() === 對象
數組對象.toString() === 數組對象.join()
對象.toString() === "[object Object]"
Javacript 中 + 號工作：
-
數字 + 數字
-
字符串 + 字符串
【
