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

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

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

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

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

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

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

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

  1. 當下一行以打破當前行的代碼開始時(代碼可以跨越多行)
  2. 當下一行以 } 開始,結束當前的區塊
  3. 當到達源代碼文件的末尾
  4. 當單獨一行上存在 return 陳述式時
  5. 當單獨一行上存在 break 陳述式時
  6. 當單獨一行上存在 throw 陳述式時
  7. 當單獨一行上存在 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))

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

(1 + 2).toString()

會輸出 "3"

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

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

根據規則4,這是另一個例子:

(() => {
 return
 {
 color: 'white'
 }
})()

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

相反,你應該在 return 後面加上左花括號:

(() => {
 return {
 color: 'white'
 }
})()

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

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

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

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

總結:

要小心使用 return 陳述式。如果你有返回值,將其添加在與 return 相同的行上(對於 breakthrowcontinue 也是如此)。

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

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