JavaScript自動分號補齊的坑

自動分號補齊(auto semicolon insertion,簡稱ASI)

在JavaScript中,行尾的分號有一種自動插入機制,如果新起了一行,并且這新的一行不能追加到當前語句時,會自動追加一個分號。但如果不加區(qū)分在每個表達式(Expression)和語句(statement)之后都手動輸入分號,那么其中絕大部分的分號是無用的。

導(dǎo)致上下文解析出錯時需要分號

會造成此類問題的token有6個:括號,方括號,正則開頭的斜杠,加號,減號,字符串模板的反引號。當以這6個字符作為一行開頭時,不會在上一行自動補全分號,造成解析出錯。

a = b
(c + d).toString()

會被解析成

a = b(c + d).toString()

即()會被看做是在調(diào)用函數(shù)b,和本意不符。所以應(yīng)盡量避免以這6個字符作為一行的開頭,如果避免不了,可以選擇在行首加分號。

絕對禁止的行結(jié)束符(restricted productions)

如果在不該換行的地方換行了,就會自動插入一個分號。

后綴表達式
   左值表達式 [無行終結(jié)符] ++
   左值表達式 [無行終結(jié)符] --
Continue 語句
   continue [無行終結(jié)符] 標識符? ;
Break 語句
   break [無行終結(jié)符] 標識符? ;
Return 語句
   return [無行終結(jié)符] 表達式? ;
Throw 語句
   throw [無行終結(jié)符] 表達式? ;

[無行終結(jié)符] 代表此處禁止換行。對于后綴表達式,遵循的原則是避免修改上一行的值。 對于 continue, break, return 和 throw,遵循的原則是:如果他們不帶參數(shù),他們不會指向下一行(會被插入一個分號)。

a
++
b

會被解析成

a;
++b

關(guān)于return 和 throw

function test() {
 return
 3
}
test()

輸出的結(jié)果實際是 undefined,因為上述代碼被解析成

function test() {
 return;
 3
}
test()

關(guān)于break 和 continue

var num = 0
outermost: 
for(let i = 0, j; i < 100; i++) {
 for(j = 0; j < 100; j++) {
   if(i === 50 && j===50 ) {
     break
     outermost
   }
   num++
 }
}
console.log(num)

此時break 和label標示符之間有一個換行符,此時會在break后自動補分號,outermost未起作用,輸出的結(jié)果為95。當break 和 label標示符放在同一行即 break outermost時,輸出結(jié)果為55。

因此筆者建議要有良好的編碼習(xí)慣,弄清ASI的規(guī)則,分號只加在必要的地方即可。

參考文章

尤雨溪在知乎的回答
JavaScript 中的自動分號插入(ASI) : 迷渡

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本文純屬原創(chuàng)? 如有雷同? 純屬抄襲? 不甚榮幸! 歡迎轉(zhuǎn)載! 原文收錄在【我的GitHub博客】,覺得本文...
    微醺歲月閱讀 2,161評論 2 11
  • 特別說明,為便于查閱,文章轉(zhuǎn)自https://github.com/getify/You-Dont-Know-JS...
    殺破狼real閱讀 531評論 0 0
  • 前端07班 王語句JavaScript程序的執(zhí)行單位為行(line),也就是一行一行地執(zhí)行。一般情況下,每一行就是...
    ea203453e188閱讀 994評論 0 4
  • 語句 JavaScript程序的執(zhí)行單位為行(line),也就是一行一行地執(zhí)行。一般情況下,每一行就是一個語句。 ...
    米塔塔閱讀 508評論 1 10
  • 孫悟空這個家喻戶曉的傳說人物曾經(jīng)是孩子們的最愛,現(xiàn)在是英雄主義的心頭好。 名著中的主角們似乎有著取之不盡的資源等待...
    愛烏及吾閱讀 814評論 0 0

友情鏈接更多精彩內(nèi)容