&

JavaScript到底應(yīng)不應(yīng)該加分號(hào)？JavaScript自動(dòng)插入分號(hào)規(guī)則詳解

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

freeflydom

2024年1月18日 14:8 本文熱度 661

JavaScript 提供了 automatic semicolon insertion (ASI)自動(dòng)插入分號(hào)規(guī)則，在不加分號(hào)的情況下，會(huì)自動(dòng)補(bǔ)充分號(hào)來(lái)分隔不同語(yǔ)句。

導(dǎo)致在繼左大括號(hào)換行、tab 和 space 圣戰(zhàn)后，前端又出現(xiàn)了一場(chǎng)戰(zhàn)爭(zhēng)。

并且隨著那個(gè)男人加入這場(chǎng)討論之后，關(guān)于是否應(yīng)該加分號(hào)的討論更是激烈了。

ASI 自動(dòng)插入分號(hào)規(guī)則

在決定是否添加分號(hào)之前，我們先來(lái)了解一下編譯器到底在哪些情況下會(huì)自動(dòng)插入分號(hào)，哪些情況必須手動(dòng)添加分號(hào)。

會(huì)自動(dòng)添加分號(hào)的情況

1.遇到換行符，但是兩句代碼連接是無(wú)效代碼

// 代碼
42
'hello'

// `42 'hello'`連接在一起是無(wú)效語(yǔ)句，所以會(huì)自動(dòng)在之間插入分號(hào)
42;'hello'

// 直接明確的寫(xiě)法
42;"hello"

// 代碼
let a = 10, b = 5
a
-
b

// a - b 為有效代碼，所以三者之間不會(huì)自動(dòng)加分號(hào)
a = 1; b = 2;

// 直接明確的寫(xiě)法
a - b

2.遇到換行符，但是兩句代碼之間不允許有換行符

// 代碼
foo
++
bar
++
baz

// foo 和 ++ 符合規(guī)則1，但是不符合 no LineTerminator here規(guī)則，所以會(huì)添加分號(hào)
foo; 
++bar; 
++baz;

在 JS 標(biāo)準(zhǔn)中，有個(gè) no LineTerminator here 的規(guī)則，規(guī)定哪些語(yǔ)法不能加入換行符，如果開(kāi)發(fā)者加了換行符，則 JS 編譯器會(huì)無(wú)法識(shí)別并加入分號(hào)。

帶標(biāo)簽的continue語(yǔ)句，不能continue后插入換行；
帶標(biāo)簽的break語(yǔ)句，不能在break后面插入換行；
return后面不能插入換行；
后自增、后自減運(yùn)算符前不能插入換行；
throw和Exception之間不能插入換行；
async關(guān)鍵字，后面不能插入換行；
箭頭函數(shù)的箭頭前，不能插入換行；
yield之后，不能插入換行。

3.Restricted productions
如果這些標(biāo)簽后，空一行書(shū)寫(xiě)其它語(yǔ)句，則會(huì)自動(dòng)在這些標(biāo)簽后添加分號(hào)：

++ or --
return
break
continue
ES6 yield 、async 等
反引號(hào)`

// return 后空一行再書(shū)寫(xiě)語(yǔ)句，則會(huì)自動(dòng)在 return 后加分號(hào)
return
{
  a: 1
}

// 這是正確寫(xiě)法
return {
  a: 1
}

其它標(biāo)簽類(lèi)似。

如果手動(dòng)在這些標(biāo)簽后加上分號(hào)，同樣也是錯(cuò)誤的，比如：

// 空一行再寫(xiě) a，會(huì)自動(dòng)在 ++ 后添加分號(hào)
++
a

// 就算手動(dòng)添加，和上面結(jié)果一樣是錯(cuò)誤的
++;
a;

所以針對(duì) Restricted productions ，無(wú)論讓編譯器自動(dòng)添加分號(hào)，還是自己手動(dòng)加上分號(hào)，都是錯(cuò)誤的，都應(yīng)該去避免去換行，避免寫(xiě)這種寫(xiě)法。

必須手動(dòng)加分號(hào)的情況

以下面這些標(biāo)簽開(kāi)頭的命令，必須在前面加分號(hào)，和前面一個(gè)語(yǔ)句分隔：

+ 和 -：語(yǔ)句以 + 或者 - 開(kāi)頭
/: 語(yǔ)句以正則表達(dá)式開(kāi)頭
( : 語(yǔ)句以自執(zhí)行函數(shù)開(kāi)頭
[: 語(yǔ)句以數(shù)組開(kāi)頭

舉例說(shuō)明：

// 錯(cuò)誤
a = b
+a
// 正確
a = b
;+a


// 錯(cuò)誤
a = b
/something/.test(a)
// 正確
a = b
;/something/.test(a)

// 錯(cuò)誤
a = b
(function () {})()
// 正確
a = b
;(function() {})()

// 錯(cuò)誤
a = b
[1, 2, 3].forEach()
// 正確
a = b
;[1, 2, 3].forEach()

上面的情況，如果第二行代碼不手動(dòng)添加分號(hào)的話，兩行代碼會(huì)合并在一起導(dǎo)致結(jié)果錯(cuò)誤或者報(bào)錯(cuò)。

上面幾種情況中，只有自執(zhí)行函數(shù)和數(shù)組開(kāi)頭會(huì)在極少情況下遇到，記住這兩個(gè)前面要手動(dòng)加上分號(hào)即可。

就算是習(xí)慣加分號(hào)的朋友，但仍然要注意下面的情況：

// 不需要結(jié)尾添加分號(hào)
if () {
} 

// 不需要結(jié)尾添加分號(hào)
for () {
} 

// 不需要結(jié)尾添加分號(hào)
while () {
} 

// 需要在結(jié)尾添加分號(hào)
var a = function () {
}; 

// 需要在結(jié)尾添加分號(hào)
var a = {
  prop: value
}; 

// 報(bào)錯(cuò)
[1, 2, 3].forEach();

即便習(xí)慣寫(xiě)分號(hào)的朋友，也很少有人在 if 、for、while 等語(yǔ)句 } 后寫(xiě)分號(hào)，但是如果使用賦值的形式傳遞，則一定要注意在 } 把分號(hào)添加上，以避免后面語(yǔ)句出現(xiàn)自執(zhí)行和數(shù)組開(kāi)頭的語(yǔ)句。

推薦遇到自執(zhí)行和數(shù)組開(kāi)頭的，直接前面加上分號(hào)就完事了。