/

JavaScript 中的分號

JavaScript 中的分號

在 JavaScript 中，分號是可選的。我個人喜歡在我的代碼中避免使用分號，但許多人更喜歡使用它們。

JavaScript 中的分號在社群中存在著分歧。有些人喜歡無論如何都使用分號。其他人則喜歡避免使用它們。

在使用分號多年之後，在2017年秋季，我決定試著根據需要避免使用它們，並且我設置了 Prettier 來自動從我的代碼中移除分號，除非有特定的代碼結構需要它們。

現在我發現避免使用分號是自然的，我認為代碼看起來更好，並且更容易閱讀。

這一切都是因為 JavaScript 不強制要求使用分號。當存在需要分號的地方時，它會在幕後添加分號。

執行這一過程的機制稱為自動分號插入。

了解 JavaScript 自動分號插入的規則非常重要，以避免編寫可能產生錯誤的代碼，因為它並不按照您的期望方式運作。

JavaScript 自動分號插入的規則如下：

  1. 當下一行以打破當前行的代碼開始時（代碼可以跨越多行）
  2. 當下一行以 } 開始，結束當前的區塊
  3. 當到達源代碼文件的末尾
  4. 當單獨一行上存在 return 陳述式時
  5. 當單獨一行上存在 break 陳述式時
  6. 當單獨一行上存在 throw 陳述式時
  7. 當單獨一行上存在 continue 陳述式時

以下是一些不會按照您期望的代碼示例：

根據這些規則，這是一個示例：

1
2
3
4
5
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 試圖將代碼解釋為：

1
2
3
const hey = 'hey';
const you = 'hey';
const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

另一個基於規則4的示例：

1
(1 + 2).toString()

會輸出 "3"。

但以下的代碼卻引發了 TypeError: b is not a function 錯誤，因為 JavaScript 將其解釋為：

1
2
3
const a = 1
const b = 2
const c = a + b(a + b).toString()

根據規則4，這是另一個例子：

1
2
3
4
5
6
(() => {
 return
 {
 color: 'white'
 }
})()

你預期這個立即調用的函數的返回值是包含 color 屬性的對象，但實際上它是 undefined，因為 JavaScript 在 return 後面插入了分號。

相反，你應該在 return 後面加上左花括號：

1
2
3
4
5
(() => {
 return {
 color: 'white'
 }
})()

最後，根據規則1，你可能認為以下代碼會在提示框中顯示 '0'：

1
2
1 + 1
-1 + 1 === 0 ? alert(0) : alert(2)

但它實際上顯示的是 2，因為 JavaScript 將其解釋為：

1
1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

總結：

要小心使用 return 陳述式。如果你有返回值，將其添加在與 return 相同的行上（對於 break、throw、continue 也是如此）。

永遠不要以括號開始一行，這可能會與上一行連接起來形成一個函數調用或陣列元素引用。

最重要的是，始終測試你的代碼，以確保它按照您的期望方式運作。

tags: [“JavaScript”, “semicolons”, “coding conventions”]