JavaScript 提供了 automatic semicolon insertion (ASI)自動插入分號規(guī)則，在不加分號的情況下，會自動補充分號來分隔不同語句。

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

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

ASI 自動插入分號規(guī)則

在決定是否添加分號之前，我們先來了解一下編譯器到底在哪些情況下會自動插入分號，哪些情況必須手動添加分號。

會自動添加分號的情況

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

// 代碼
42
'hello'

// `42 'hello'`連接在一起是無效語句，所以會自動在之間插入分號
42;'hello'

// 直接明確的寫法
42;"hello"

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

// a - b 為有效代碼，所以三者之間不會自動加分號
a = 1; b = 2;

// 直接明確的寫法
a - b

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

// 代碼
foo
++
bar
++
baz

// foo 和 ++ 符合規(guī)則1，但是不符合 no LineTerminator here規(guī)則，所以會添加分號
foo; 
++bar; 
++baz;

在 JS 標準中，有個 no LineTerminator here 的規(guī)則，規(guī)定哪些語法不能加入換行符，如果開發(fā)者加了換行符，則 JS 編譯器會無法識別并加入分號。

1. 帶標簽的continue語句，不能continue后插入換行；
2. 帶標簽的break語句，不能在break后面插入換行；
3. return后面不能插入換行；
4. 后自增、后自減運算符前不能插入換行；
5. throw和Exception之間不能插入換行；
6. async關(guān)鍵字，后面不能插入換行；
7. 箭頭函數(shù)的箭頭前，不能插入換行；
8. yield之后，不能插入換行。

3.Restricted productions
如果這些標簽后，空一行書寫其它語句，則會自動在這些標簽后添加分號：

• ++?or?--
• return
• break
• continue
• ES6 yield 、async 等
• 反引號`

// return 后空一行再書寫語句，則會自動在 return 后加分號
return
{
  a: 1
}

// 這是正確寫法
return {
  a: 1
}

其它標簽類似。

如果手動在這些標簽后加上分號，同樣也是錯誤的，比如：

// 空一行再寫 a，會自動在 ++ 后添加分號
++
a

// 就算手動添加，和上面結(jié)果一樣是錯誤的
++;
a;

所以針對 Restricted productions ，無論讓編譯器自動添加分號，還是自己手動加上分號，都是錯誤的，都應(yīng)該去避免去換行，避免寫這種寫法。

必須手動加分號的情況

以下面這些標簽開頭的命令，必須在前面加分號，和前面一個語句分隔：

• + 和 -：語句以 + 或者 - 開頭
• /: 語句以正則表達式開頭
• ( : 語句以自執(zhí)行函數(shù)開頭
• [: 語句以數(shù)組開頭

舉例說明：

// 錯誤
a = b
+a
// 正確
a = b
;+a


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

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

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

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

上面幾種情況中，只有自執(zhí)行函數(shù)和數(shù)組開頭會在極少情況下遇到，記住這兩個前面要手動加上分號即可。

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

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

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

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

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

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

// 報錯
[1, 2, 3].forEach();

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

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

總結(jié)

是否添加和是否手動加是兩回事，我們可以用 eslint、Prettier 等工具自動生成或者刪除分號，是否手動加可以看個人喜好，最終代碼內(nèi)可以根據(jù)項目要求用工具生成。

但都要注意必須添加分號的幾種情況。

參考文章

• Hacking Semicolons
• What are the rules for JavaScript's automatic semicolon insertion (ASI)? - Stack Overflow

總結(jié)

以上是生活随笔為你收集整理的JavaScript到底应不应该加分号？JavaScript自动插入分号规则详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。