【 Dmitri Pavlutin】細述Javascript的加法運算符

翻譯：道奇
做者：Dmitri Pavlutin
原文：JavaScript Addition Operator in Details

簡介

JavaScript是一門了不得的語言。我喜歡它的靈活性：只需以你喜歡的方式作事：更改變量類型，動態的給對象添加方法或屬性，對不一樣的變量類型使用運算符等等。

然而動態是要付出代價的，開發人員須要知道針對不一樣操做符怎樣處理類型轉換：加號(+)，等號(==和===)，不等號(!=和!==)等等，許多運算符處理類型轉換的方式是不同的。

加法運算符

最經常使用的運算符：+，這個運算符用於接連字符串或對數字進行求和：

1. 字符串鏈接：

var result = "Hello, " + "World!";
// 字符串 + 字符串 = 字符串 (鏈接)
// "Hello, World!"
複製代碼

2. 數字算術相加：

var result = 10 + 5;
// 數字 + 數字 = 數字 (相加)
// 15
複製代碼

JavaScript容許使用對象，數組，null或undefined做爲操做數。下面試着揭開轉換的通常規則。

轉換規則

使用下面的等式看一下在操做運算符裏JavaScript是如何進行類型轉換的：

1. 若是至少有一個操做數是對象，它會被轉換成原始值（字符串，數字或布爾）；
2. 轉換以後，若是至少有一個操做數是字符串類型，第二個操做數會被轉換成字符串，而且會執行鏈接。
3. 在其餘的狀況下，兩個操做數都會轉換成數字並執行算數加法運算。

若是兩個操做數都是原始類型，運算符會檢查是否至少有一個是字符串類型，若是是就執行鏈接操做。其餘狀況就都轉換爲數字並求合。

對象類型轉爲原始類型

對象類型向原始類型的轉換：

• 若是對象類型是Date，會調用該對象的toString()；
• 其餘狀況下，若是valueOf()返回的是原始類型，會調用對象的valueOf()；
• 其餘狀況下（若是valueOf()不存在或沒有返回原始類型），會調用toString()方法，大部分狀況下是用的這種轉換。

當數組轉換爲原始類型，JavaScript會使用它的join(',')方法，例如[1,5,6]就是"1,5,6"。普通JavaScript對像{}的原始類型是"[object Object]"。

學習例子

下面的例子幫助咱們理解簡單和複雜的轉換場景。

例1：數字和字符串

var result = 1 + "5"; // "15"
複製代碼

解析：

1. 1+"5"(第二個操做數是字符串，基於規則2數字1變"1")
2. "1"+"5"(字符串鏈接)
3. "15"

第二個操做數是字符串，第一個操做數從數字轉換爲字符串，而後進行鏈接。

例2：數字和數組

var result = [1, 3, 5] + 1; //"1,3,51"
複製代碼

解析：

1. [1, 3, 5] + 1(使用規則1，將數組[1, 3, 5]轉換成原始值: "1,3,5")
2. "1,3,5" + 1 (使用規則2，將數字1轉換爲字符串 "1")
3. "1,3,5" + "1" (字符串鏈接)
4. "1,3,51"

第1個操做數是數組，因此它被轉換爲原始字符串值，在下一步數字操做數轉換爲字符串，而後再完成兩個字符串的鏈接。

例3：數字和布爾類型

var result = 10 + true; //11
複製代碼

解析:

1. 10 + true (基於規則3將布爾值true轉換成數字1)
2. 10 + 1(將兩個數字求值)
3. 11

由於兩個操做數都不是字符串，布爾值轉換成數字，而後執行算術的求和。

例4: 數字和對象

var result = 15 + {}; // "15[object Object]"
複製代碼

解析:

1. 15 + {} (第二操做數是個對象，應用規則1將對象轉換爲原始類型字符串"[object Object]")
2. 15 + "[object Object]" (使用規則2將數字15轉換成字符串 "15")
3. "15" + "[object Object]" (字符串鏈接)
4. "15[object Object]"

第二個對象操做數轉爲字符串值，由於valueOf()方法返回對象自己，它不是原始值，toString() 方法就會被調用並返回字符串，第二個操做數如今是字符串了，所以數字也被轉換爲字符串，最後執行兩個字符串的鏈接。

例5: 數字和null

var result = 8 + null; // 8
複製代碼

解析:

1. 8 + null (由於兩個操做數都不是字符串，基於規則3將null轉爲數字0)
2. 8 + 0 (數字相加)
3. 8

由於操做數不是對象也不是字符串，null被轉換成數字，而後計算數字的和。

例6: 字符串和null

var result = "queen" + null; // "queennull"
複製代碼

解析:

1. "queen" + null (由於第一個操做數是字符串，基於規則2將null轉成字符串"null")
2. "queen" + "null" (字符串鏈接)
3. "queennull"

由於第一個操做數是字符串，null轉成字符串，而後進行字符串鏈接。

例7: 數字和undefined

var result = 12 + undefined; // NaN
複製代碼

解析:

1. 12 + undefined (由於操做數都不是對象或字符串,基於規則3將undefined轉爲數字NaN)
2. 12 + NaN (數字相加)
3. NaN

由於操做數都不是對象或字符串，undefined轉爲數字：NaN，對數字和NaN進行相加求值等於NaN.

能夠在JsBin中看這些例子

總結

爲了不潛在的問題，不要對對象使用加法運算符，除非你清楚的定義了toString()或valueOf()方法。正如例子中所看到的，加法操做符有不少特定的狀況。瞭解確切的轉換場景能幫你避免將來的意外，祝coding愉快！