JavaScript 中的封號(;) – JavaScript 完全手冊（2018版）
小編推薦： ofollow,noindex">掘金是一個面向程式員的高質量技術社群，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。
注：本文為 《 JavaScript 完全手冊（2018版） 》第14節，你可以檢視該手冊的完整目錄。
JavaScript 中的分號是可選的。 我個人偏好是我的程式碼中避免使用分號，但也有很多人使用分號。
有一件大家看起來不可思議的事情就是，JavaScript 因為該不該使用分號而劃分成了2個社群。 有些人無論如何都喜歡隨時使用分號。 其他人則更喜歡避免使用它們。
我也是使用分號多年，在 2017 年秋天，我決定嘗試儘量地避免使用它們，我確實設定了 Prettier 來自動刪除程式碼中的分號，除非有特定的程式碼構造需要它們。
現在我發現避免使用分號是很自然的，我認為程式碼看起來更好，閱讀更清晰。
JavaScript 並不嚴格要求使用分號。 當有一個需要分號的地方時，JavaScript 會在解析時自動新增。
執行此操作的過程稱為自動插入分號。
瞭解必須使用分號的規則非常重要，以避免編寫產生錯誤的程式碼，因為它們的行為可能會與您預期的不同。
JavaScript 自動插入分號 的規則
JavaScript 並不是在所有換行處都填補分號：只有在缺少了分號就無法正確解析程式碼的時候，JavaScript才會填補分號。在解析原始碼期間，要是發現以下特定的情況時，JavaScript 解析器 將會自動新增分號 ：
- 當下一行程式碼開始會破壞當前一行的程式碼時( JavaScript 程式碼可以寫在多行中 )。如果一條語句以
(、[、/、+或-開始，那麼它極有可能和前面一條語句合在一起解析。例如： - 當下一行以
}開頭時，閉合當前程式碼塊，當然物件字面量除外 - 當解析到達原始碼檔案的末尾時
- 當前行
return語句後面緊跟著換行時 - 當前行
break語句後面緊跟著換行時 - 當前行
throw語句後面緊跟著換行時 - 當前行
continue語句後面緊跟著換行時
不符合你預期的程式碼示例
基於上面這些規則，這裡有一些例子。
先來看看這個：
const hey = 'hey' const you = 'hey' const heyYou = hey + ' ' + you ['h', 'e', 'y'].forEach((letter) => console.log(letter))
您將收到錯誤 Uncaught TypeError: Cannot read property 'forEach' of undefined ,因為基於規則1 JavaScript 嘗試將程式碼解析為：
const hey = 'hey'; const you = 'hey'; const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))
還有類似下面的程式碼：
(1 + 2).toString()
這裡會列印 3 。
const a = 1 const b = 2 const c = a + b (a + b).toString()
而這裡的程式碼會引發 TypeError: b is not a function 異常，因為 JavaScript 試圖將其解釋為：
const a = 1 const b = 2 const c = a + b(a + b).toString()
您認為此程式碼在 alert 中顯示為“0”：
1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)
但其實顯示 2 ，因為規則1 的 JavaScript 將其解釋為：
1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)
再來看看下面的註釋
var// 這一行不會插入分號 ，因為 下一行的程式碼不會破壞當前行的程式碼
a = 1// 這一行會插入分號
let b = 2
// 再比如這種情況，你的原意可能是定義 `a` 變數，再執行 `(a + 3).toString()`，
// 但是其實 JavaScript 解析器解析成了，`var a = 2(a + 3).toString()`，
// 這時會丟擲錯誤 Uncaught TypeError: 2 is not a function
var a = 2
(a + 3).toString()
// 同理,下面的程式碼會被解釋為 `a = b(function(){...})()`
a = b
(function(){
...
})()
另一個基於規則 4 的例子：
(() => {
return
{
color: 'white'
}
})()
您希望這個立即呼叫函式的返回值是一個包含 color 屬性的物件，但事實並非如此。 相反，它是 undefined ，因為 JavaScript 在 return 後插入分號。
相反，您應該在 return 後立即放置花括號 { ，因為當前行 return 語句後面緊跟著換行時 ，JavaScript 解析器將會自動新增分號：
(() => {
return {
color: 'white'
}
})()
結論
有些人非常堅持使用分號。 老實說我並不喜歡使用分號，很多工具為我們提供了不使用分號的選項，因此我們可以避免使用分號。我們只需要注意一些細節，即使大多數情況下這些基本場景不會在你的程式碼中出現。
除了選擇自己的決定之外，我也不會試圖說服你避免使用分號。
選擇一些規則：
- 請注意
return語句。 如果你想返回一些東西，把它新增到與return同一行上（同樣用於break，throw，continue） - 永遠不要用
(、[、/、+或-開始一行，這些可能與前一行連線以形成函式呼叫或陣列元素引用
最後，始終測試您的程式碼，以確保結果是你想要的。