JS 代碼要不要加分號？

JavaScript 中分號劃分了社群。有些人無論如何都喜歡使用分號。其他人喜歡不加分號。

在使用分號多年之後，2017 年秋，我決定嘗試根據需要不加分號，並且設定 Prettier 自動移除我程式碼中的分號，除非是必要的程式碼結構需要它們。

現在我發現，不使用分號非常自然，我認為這樣的程式碼看起來更好，它們更簡潔易讀。

這完全可能的，因為 JavaScript 並不嚴格要求分號。當某個地方需要分號時，它會在後台添加它。

這個過程就叫做自動插入分號.

重要的是了解使用分號的規則，這樣可以避免編寫會產生bug 的程式碼，因為它們的行為與您期望的不同。

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()

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

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

你希望此立即呼叫的函數的回傳值是一個包含color 屬性的對象，但事實並非如此。相反，它是 undefined，因為 JavaScript 在 return 之後插入分號。

相反，你應該將左括號放到return 後面：

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

你認為這段程式碼會展示'0':

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

相反它會展示2，因為JavaScript 根據規則1 會解釋為：

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

結束語

#當心。有些人對分號很有意見。我倒不是很在意，這個工具提供給我們一個不使用它的選擇，所以我們可以避免使用分號。

我不是建議什麼，只是讓你自己做決定。

我們只需要注意一點，即使大多數情況下這些基本場景從未出現在您的程式碼中。

摘選一些規則，如下：

• 小心使用 return 語句。如果您返回某個內容，請將其添加到與返回內容相同的行中（類似還有break、throw、continue）

• 永遠不要使用括號開始一行，這些可能與前一行連接起來，形成函數呼叫或數組元素引用

最後，始終測試您的程式碼，以確保它能滿足您的需求。

推薦教學：《JS教學》

以上是JS 代碼要不要加分號？的詳細內容。更多資訊請關注PHP中文網其他相關文章！