站長資訊網(wǎng)
JavaScript中的分號是可選的，加不加分號主要是個代碼風格問題，但是不要一會加一會不加。通常，如果語句以“(”、“[”、“/”、“+”、“-”開頭時，有可能被解釋為上一行語句的一部分；此時可以在行首防御性的加上分號。
前端（vue）入門到精通課程：進入學習
API 文檔、設計、調(diào)試、自動化測試一體化協(xié)作工具：點擊使用
本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
JavaScript 中的分號是可選的，加不加分號主要是個代碼風格問題。一種風格是使用分號明確結束語句，即便這些分號不是必需的；另一種風格是盡可能的不加分號，只在必要的情況才加。
注：分號可以加也可以不加，但是不要一會加一會不加。
代碼中分號的作用
分號的主要作用是：作為語句的斷言（EOS）用于結束一個程序語句，目的是讓解析器正確解析程序。在很多 C-Style 語言里，用分號明確結束一行語句，主要是為了降低語言編譯器開發(fā)的成本。但是現(xiàn)代編譯器都足夠聰明了，可以很好的處理好多行語句。很多語言都不需要明確使用分號結尾如：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 的明確說明：
-
從左到右解析程序，當遇到一個不符合任何文法產(chǎn)生式的 token(offending token)，那么只要滿足下面條件之一就在違規(guī) token 前面自動插入分號。
至少一個換行符(LineTerminator)分割了違規(guī) token 和前一個 token。
違規(guī) token 是 }。
-
從左到右解析程序，tokens 輸入流已經(jīng)結束，當解析器無法將輸入 token 流解析成單個完整 ECMAScript 程序 ，那么就在輸入流的結束位置自動插入分號。
-
從左到右解析程序，遇到一個某些文法產(chǎn)生式允許的 token，但是它是受限操作(Restricted Productions)，當至少一個換行符分割了受限的 token 和前一個 token，那么就在受限 token 前面自動插入分號。
然而，上述規(guī)則有一個附加的優(yōu)先條件：如果插入分號后解析結果是空語句，或如果插入分號后它成為 for 語句頭部的兩個分號之一，那么不會自動插入分號。
注：以上說明翻譯較為別扭可以多讀幾遍或閱讀英文原文 ECMA-262 – Automatic Semicolon Insertion
分號自動插入的情況
簡要歸納下，自動分號插入以換行為基礎，解析器會盡量將新行并入當前行，當且僅當符合 ASI 規(guī)則時才會將新行視為獨立的語句
主要有以下自動插入規(guī)則：
-
當新的一行并入當前行將構成非法語句不能正確解析時，將自動插入分號
-
當新行以
}開頭時，即代碼塊的結束位置，將自動插入分號 -
當以
return語句結束時，在行末自動插入分號 -
當以
break語句結束時，在行末自動插入分號 -
當以
throw語句結束時，在行末自動插入分號 -
當以
continue語句結束時，在行末自動插入分號 -
當以 ES6 的 yield 語句結尾時，在行末自動插入分號
-
++、--后綴表達式作為新行的開始，在行首自動插入分號 -
源代碼文件末尾自動插入號
如上所示，如果沒加分號，運行這段代碼這段代碼將報錯。
不能省略分號的情況
通常，如果語句以(、[、 /、+、-開頭時，就有可能被解釋為上一行語句的一部分。實際中以/、+、-開頭的語句很少。但是以(、[開頭的語句則很常見，通常我可以在行首防御性的加上分號。
前面，我們了解分號的自動插入，現(xiàn)在我們來看一些示例
let hey = 'hey' ['liu','liuxing'].forEach(console.log)
思考一秒鐘上面的結果是什么？運行這段代碼會拋出
Uncaught TypeError: Cannot read property 'forEach' of undefined
基于規(guī)則 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，因為根據(jù) ASI 規(guī)則，它會被解析成如下代碼：
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 機制為我們提供了兩種選擇，加還是不加分號？完全看你或你的團隊的喜好了，現(xiàn)在我們也有prettier、Eslint 等工具來自動統(tǒng)一風格。
【
