JavaScript中的分號

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因為基於規則1JavaScript嘗試將代碼解釋為

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陳述。如果您退貨,則將其與退貨添加到同一行(與breakthrowcontinue
  • 從不以括號開頭的行,它們可能與前一行連接在一起以形成函數調用或數組元素引用

最後,請始終測試您的代碼以確保它能夠滿足您的要求

免費下載我的JavaScript初學者手冊


更多js教程: