在 JavaScript 中,分號是可選的。我個人喜歡在我的代碼中避免使用分號,但許多人更喜歡使用它們。
JavaScript 中的分號在社群中存在著分歧。有些人喜歡無論如何都使用分號。其他人則喜歡避免使用它們。
在使用分號多年之後,在2017年秋季,我決定試著根據需要避免使用它們,並且我設置了 Prettier 來自動從我的代碼中移除分號,除非有特定的代碼結構需要它們。
現在我發現避免使用分號是自然的,我認為代碼看起來更好,並且更容易閱讀。
這一切都是因為 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))
另一個基於規則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
相同的行上(對於 break
、throw
、continue
也是如此)。
永遠不要以括號開始一行,這可能會與上一行連接起來形成一個函數調用或陣列元素引用。
最重要的是,始終測試你的代碼,以確保它按照您的期望方式運作。