簡介

JavaScript是一門了不起的語言。我喜歡它的靈活性：只需以你喜歡的方式做事：更改變量類型，動態(tài)的向?qū)ο筇砑臃椒ɑ驅(qū)傩?，對不同的變量類型使用運(yùn)算符等等。

然而動態(tài)是要付出代價(jià)的，開發(fā)人員需要知道怎樣處理對于不同操作符的類型轉(zhuǎn)換：加號(+)，等號(==和===)，不等號(!=和!==)等等，許多運(yùn)算符有自己處理類型轉(zhuǎn)換的方式。

加法運(yùn)算符

最常用的運(yùn)算符：+，這個運(yùn)算符用于接連字符串或?qū)?shù)字求和：

字符串連接：

var result = "Hello, " + "World!";
// 字符串 + 字符串 = 字符串 (連接)
// "Hello, World!"

數(shù)字算術(shù)相加：

var result = 10 + 5;
// 數(shù)字 + 數(shù)字 = 數(shù)字 (相加)
// 15

JavaScript允許使用對象，數(shù)組，null或undefined作為操作數(shù)。下面試著揭開轉(zhuǎn)換的一般規(guī)則。

轉(zhuǎn)換規(guī)則

使用下面的等式看一下在操作運(yùn)算符里JavaScript是如何進(jìn)行類型轉(zhuǎn)換的：

1. 如果至少有一個操作數(shù)是對象，會被轉(zhuǎn)換成原始值（字符串，數(shù)字或布爾）；
2. 轉(zhuǎn)換之后，如果至少有一個操作數(shù)是字符串類型，第二個操作數(shù)會被轉(zhuǎn)換成字符串，并且會執(zhí)行連接。
3. 在其他的情況下，兩個操作數(shù)都會轉(zhuǎn)換成數(shù)字并執(zhí)行算數(shù)加法運(yùn)算。

如果兩個操作數(shù)都是原始類型，運(yùn)算符會檢查是否至少有一個是字符串類型，如果是就執(zhí)行連接操作。其他情況就都轉(zhuǎn)換為數(shù)字并求合。

對象類型轉(zhuǎn)為原始類型

對象類型向原始類型的轉(zhuǎn)換

• 如果對象類型是Date，會調(diào)用該對象的toString()；
• 其他情況下，如果valueOf()返回的是原始類型，會調(diào)用對象的valueOf()；
• 其他情況下（如果valueOf()不存在或沒有返回原始類型），會調(diào)用toString()方法，大部分情況下是用的這種轉(zhuǎn)換。

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

學(xué)習(xí)例子

下面的例子幫助我們理解簡單和復(fù)雜的轉(zhuǎn)換場景。

例1：數(shù)字和字符串

var result = 1 + "5"; // "15"

解析：

• 1+"5"(第二個操作數(shù)是字符串，基于規(guī)則2數(shù)字1變"1")
• "1"+"5"(字符串連接)
• "15"

第二個操作數(shù)是字符串，第一個操作數(shù)從數(shù)字轉(zhuǎn)換為字符串，然后進(jìn)行連接。

例2：數(shù)字和數(shù)組

var result = [1, 3, 5] + 1; //"1,3,51"

解析：

1. [1, 3, 5] + 1 (使用規(guī)則1，將數(shù)組[1, 3, 5]轉(zhuǎn)換成原始值: "1,3,5")
2. "1,3,5" + 1 (使用規(guī)則，將數(shù)字1轉(zhuǎn)換為字符串 "1")
3. "1,3,5" + "1" (字符串連接)
4. "1,3,51"

第1個操作數(shù)是數(shù)組，所以它被轉(zhuǎn)換為原始字符串值，在下一步數(shù)字操作數(shù)轉(zhuǎn)換為字符串，然后再完成兩個字符串的連接。

例3：數(shù)字和布爾類型

var result = 10 + true; //11

解析:

1. 10 + true (基于規(guī)則3將布爾值true轉(zhuǎn)換成數(shù)字1)
2. 10 + 1 (將兩個數(shù)字求值)
3. 11

因?yàn)閮蓚€操作數(shù)都不是字符串，布爾值轉(zhuǎn)換成數(shù)字，然后執(zhí)行算術(shù)的求和。

例4:數(shù)字和對象

var result = 15 + {}; // "15[object Object]"

解析:

1. "15 + {}" (第二操作數(shù)是個對象，應(yīng)用規(guī)則1將對象轉(zhuǎn)換為原始類型字符串"[object Object]")
2. 15 + "[object Object]" (使用規(guī)則2將數(shù)字15轉(zhuǎn)換成字符串 "15")
3. "15" + "[object Object]" (字符串連接)
4. "15[object Object]"

第二個對象操作數(shù)轉(zhuǎn)為字符串值，因?yàn)関alueOf()方法返回對象本身，它不是原始值，toString() 方法就會被調(diào)用并返回字符串，第二個操作數(shù)現(xiàn)在是字符串了，因此數(shù)字也被轉(zhuǎn)換為字符串，最后執(zhí)行兩個字符串的連接。

Example 5: 數(shù)字和null

var result = 8 + null; // 8

解析:

• 8 + null (因?yàn)閮蓚€操作數(shù)都不是字符串，基于規(guī)則3將null轉(zhuǎn)為數(shù)字0)
• 8 + 0 (數(shù)字相加)
• 8

因?yàn)椴僮鲾?shù)不是對象也不是字符串，null被轉(zhuǎn)換成數(shù)字，然后計(jì)算數(shù)字的和。

Example 6: 字符串和null

var result = "queen" + null; // "queennull"

解析:

• "queen" + null (因?yàn)榈谝粋€操作數(shù)是字符串，基于規(guī)則2將null轉(zhuǎn)成字符串"null")
• "queen" + "null" (字符串連接)
• "queennull"

因?yàn)榈谝粋€操作數(shù)是字符串，null轉(zhuǎn)成字符串，然后進(jìn)行字符串連接。

Example 7:數(shù)字和undefined

var result = 12 + undefined; // NaN

解析:

• 12 + undefined (因?yàn)椴僮鲾?shù)都不是對象或字符串,基于規(guī)則3將undefined轉(zhuǎn)為數(shù)字NaN)
• 12 + NaN (數(shù)字相加)
• NaN

因?yàn)椴僮鲾?shù)都不是對象或字符串，undefined轉(zhuǎn)為數(shù)字：NaN，對數(shù)字和NaN進(jìn)行相加求值等于NaN.

可以在JsBin中看這些例子

總結(jié)

為了避免潛在的問題，不要對對象進(jìn)行使用加法運(yùn)算符，除非你清楚的定義了toString()或valueOf()方法。正如例子中所看到了，加法操作符有很多特定的情況。了解確切的轉(zhuǎn)換場景能幫你避免未來的意外，祝coding愉快！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論