javascript要不要加分號

青灯夜游
發布: 2022-09-29 17:25:04
原創
3375 人瀏覽過

JavaScript中的分號是可選的,加不加分號主要是個程式碼風格問題,但不要一會兒加一會不加。通常,如果語句以「(」、「[」、「/」、「 」、「-」開頭時,有可能被解釋為上一行語句的一部分;此時可以在行首防禦性的加上分號。

javascript要不要加分號

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript 中的分號是可選的,加不加分號主要是個代碼風格問題。一種風格是使用分號明確結束語句,即便這些分號不是必需的;另一種風格是盡可能的不加分號,只在必要的情況才加。

javascript要不要加分號

註:分號可以加也可以不加,但不要一會加一會不加。

程式碼中分號的作用

分號的主要作用是:作為語句的斷言(EOS)用來結束一個程式語句,目的是讓解析器正確解析程式。在許多C-Style 語言裡,用分號明確結束一行語句,主要是為了降低語言編譯器開發的成本。但是現代編譯器都夠聰明了,可以很好的處理好多行語句。很多語言都不需要明確使用分號結尾如:Go、Scala、Ruby、Python、Swift、Groovy 等等。

雖然JavaScript 是C-like 語言,但它是有別於C、Java 的,在JavaScript 中分號也是可選的,它自動分號插入機制Auto Semicolon Insertion (ASI)。

JavaScript 自動分號插入機制

#JavaScript 有著自動分號插入的機制(Automatic Semicolon Insertion),簡稱ASI。在ECMA-262 - Automatic Semicolon Insertion中有關Automatic Semicolon Insertion 的明確說明:

  • 從左到右解析程序,當遇到一個不符合任何文法產生式的token(offending token),那麼只要滿足下面條件之一就在違規token 前面自動插入分號。

至少一個換行符(LineTerminator)分割了違規token 和前一個token。

違規token 是}

  • 從左到右解析程序,tokens 輸入流已經結束,當解析器無法將輸入token 流解析成單個完整ECMAScript 程序,那麼就在輸入流的結束位置自動插入分號。

  • 從左到右解析程序,遇到一個某些文法產生式允許的token,但是它是受限操作(Restricted Productions),當至少一個換行符分割了受限的token 和前一個token,那麼就在受限token 前面自動插入分號。

    然而,上述規則有一個附加的優先條件:如果插入分號後解析結果是空語句,或者如果插入分號後它成為for 語句頭部的兩個分號之一,那麼不會自動插入分號。

註:以上說明翻譯較為彆扭可以多讀幾遍或閱讀英文原文ECMA-262 - Automatic Semicolon Insertion

分號自動插入的情況

簡單歸納下,自動分號插入以換行為基礎,解析器會盡量將新行併入當前行,當且僅當符合ASI 規則時才會將新行視為獨立的語句

主要有以下自動插入規則:

  • #當新的一行併入目前行將構成非法語句無法正確解析時,將自動插入分號

  • 當新行以}開頭時,即程式碼區塊的結束位置,將自動插入分號

  • 當以return語句結束時,在行末自動插入分號

  • 當以break語句結束時,在行末自動插入分號

  • 當以throw語句結束時,在行末自動插入分號

  • 當以continue語句結束時,在行末自動插入分號

  • 當以ES6 的yield 語句結尾時,在行末自動插入分號

  • -- 後綴表達式作為新行的開始,在行首自動插入分號

  • #原始碼檔案結尾自動插入號

如上所示,如果沒有加分號,執行這段程式碼這段程式碼將會報錯。

不能省略分號的情況

通常,如果語句以([/ -開始時,就有可能被解釋為上一行語句的一部分。實際中以/ -開頭的語句很少。但是以([開頭的語句則很常見,通常我可以在行首防禦性的加上分號。

前面,我們了解分號的自動插入,現在我們來看一些範例

let hey = 'hey'
['liu','liuxing'].forEach(console.log)
登入後複製

思考一秒鐘上面的結果是什麼?執行這段程式碼會拋出

Uncaught TypeError: Cannot read property 'forEach' of undefined
登入後複製

基於規則1 上面程式碼將會被解析成如下程式碼

let hey = 'hey'['liu','liuxing'].forEach(console.log)
登入後複製

可以看出,使用[開頭的語句,前面沒有分號,很可能導致出錯。

再來看一個(開頭的語句的範例程式碼

const a = 1
const b = 2
const c = a + b
(a + b).toString()
登入後複製

你會以為上面的程式碼結果是「3」嗎?但其實它會拋出錯誤b is not a function,因為根據ASI 規則,它會被解析成如下程式碼:

const a = 1;const b = 2;const c = a + b(a + b).toString()
登入後複製

我們就不一一介紹/ - 作為語句開頭的情況了,這種情況比較少,大家可以自己試試。只要記住語句以([ 、 / -開頭時,語句前面需要加上分號即可!

下面再在看看使用return的情況,

(() => {
  return
  {
    name: 'Liu Xing'
  }
})()
登入後複製

你的期待值是不是傳回一個有name 的對象,但它卻回傳了undefined。這是ASI 自動在 return加上了分號。在這裡就得正確的換行以確保程式碼正確運行。我們可以看出除了正確的的分號,我們還需要正確合理的換行來使程式碼結構更為清晰。

總結

我們了解了JavaScript 的分號自動插入機制,並且知道了JavaScript 什麼時候會自動加入分號,在([、 / -開頭時需要我們精確的加上分號。Automatic Semicolon Insertion機制為我們提供了兩種選擇,加或不加分號?完全看你或你的團隊的喜好了,現在我們也有prettier、Eslint 等工具來自動統一風格。

【相關推薦: javascript影片教學程式設計基礎影片

#

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板