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

axue001發表於2024-01-18

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. throwException之間不能插入換行;
  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 、 forwhile 等語句  } 後寫分號,但是如果使用賦值的形式傳遞,則一定要注意在  } 把分號新增上,以避免後面語句出現自執行和陣列開頭的語句。

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

總結

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

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


來自 “ ITPUB部落格 ” ,連結:https://blog.itpub.net/70036594/viewspace-3004354/,如需轉載,請註明出處,否則將追究法律責任。

相關文章