JavaScript到底應不應該加分號？JavaScript自動插入分號規則詳解

ASI 自動插入分號規則

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

會自動新增分號的情況

1.遇到換行符，但是兩句程式碼連線是無效程式碼

// 程式碼42'hello'// `42 'hello'`連線在一起是無效語句，所以會自動在之間插入分號42;'hello'// 直接明確的寫法42;"hello"

// 程式碼let a = 10, b = 5a
-
b// a - b 為有效程式碼，所以三者之間不會自動加分號a = 1; b = 2;// 直接明確的寫法a - b

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

// 程式碼foo
++
bar
++
baz// foo 和 ++ 符合規則1，但是不符合 no LineTerminator here規則，所以會新增分號foo; 
++bar; 
++baz;

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

1. 帶標籤的 continue語句，不能 continue後插入換行；
2. 帶標籤的 break語句，不能在 break後面插入換行；
3. return後面不能插入換行；
4. 後自增、後自減運算子前不能插入換行；
5. throw和 Exception之間不能插入換行；
6. async關鍵字，後面不能插入換行；
7. 箭頭函式的箭頭前，不能插入換行；
8. yield之後，不能插入換行。

3.Restricted productions
如果這些標籤後，空一行書寫其它語句，則會自動在這些標籤後新增分號：

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

// return 後空一行再書寫語句，則會自動在 return 後加分號return{  a: 1}// 這是正確寫法return {  a: 1}

其它標籤類似。

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

// 空一行再寫 a，會自動在 ++ 後新增分號++
a// 就算手動新增，和上面結果一樣是錯誤的++;
a;

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

必須手動加分號的情況

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

• + 和  -：語句以 + 或者 - 開頭
• /: 語句以正規表示式開頭
• ( : 語句以自執行函式開頭
• [: 語句以陣列開頭

舉例說明：

// 錯誤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()

上面的情況，如果第二行程式碼不手動新增分號的話，兩行程式碼會合並在一起導致結果錯誤或者報錯。

上面幾種情況中，只有自執行函式和陣列開頭會在極少情況下遇到，記住這兩個前面要手動加上分號即可。

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

// 不需要結尾新增分號if () {
} 
// 不需要結尾新增分號for () {
} 
// 不需要結尾新增分號while () {
} 
// 需要在結尾新增分號var a = function () {
}; 
// 需要在結尾新增分號var a = {  prop: value
}; 
// 報錯[1, 2, 3].forEach();

即便習慣寫分號的朋友，也很少有人在  if 、 for、 while 等語句  } 後寫分號，但是如果使用賦值的形式傳遞，則一定要注意在  } 把分號新增上，以避免後面語句出現自執行和陣列開頭的語句。

推薦遇到自執行和陣列開頭的，直接前面加上分號就完事了。

總結

是否新增和是否手動加是兩回事，我們可以用 eslint、Prettier 等工具自動生成或者刪除分號，是否手動加可以看個人喜好，最終程式碼內可以根據專案要求用工具生成。

但都要注意必須新增分號的幾種情況。