簡介

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

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

加法運(yùn)算符

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

字符串連接：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

解析：

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

第二個(gè)操作數(shù)是字符串，第一個(gè)操作數(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個(gè)操作數(shù)是數(shù)組，所以它被轉(zhuǎn)換為原始字符串值，在下一步數(shù)字操作數(shù)轉(zhuǎn)換為字符串，然后再完成兩個(gè)字符串的連接。

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

var result = 10 + true; //11

解析:

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

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

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

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

解析:

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

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

Example 5: 數(shù)字和null

var result = 8 + null; // 8

解析:

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

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

Example 6: 字符串和null

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

解析:

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

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

Example 7:數(shù)字和undefined

var result = 12 + undefined; // NaN

解析:

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

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

可以在JsBin中看這些例子

總結(jié)

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

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

最新評(píng)論