JavaScript中分號的一些細節
前言
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分號內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JavaScript中forEach的錯誤用法匯總
- JavaScript中的Map數據結構詳解
- JavaScript初學者容易犯的幾個錯誤
- 詳細談談JavaScript中循環之間的差異
- JS面試題之forEach能否跳出循環詳解