關(guān)于JavaScript語句后面的分號(hào)問題
JavaScript自動(dòng)加分號(hào)規(guī)則,有3條
- 當(dāng)有換行符(包括含有換行符的多行注釋),并且下一個(gè)token沒法跟前面的語法匹配時(shí),會(huì)自動(dòng)補(bǔ)分號(hào)。
- 當(dāng)有}時(shí),如果缺少分號(hào),會(huì)補(bǔ)分號(hào)
- 當(dāng)程序源代碼結(jié)束時(shí),如果缺少分號(hào),會(huì)補(bǔ)分號(hào)。
利用我自己的JS語法分析工具JSinJS(https://github.com/kissjs/JSinJS ),我求出了所有能夠出現(xiàn)在語句第一個(gè)的JS語法標(biāo)記 (就是Statement的first集合),他們是:
["debugger", "try", "throw", "switch", "Identifier", "with", "return", "break", "continue", "for", "while", "do", "if", "new", "function", "(", "{", "[", "RegularExpressionLiteral", "StringLiteral", "NumericLiteral", "BooleanLiteral", "NullLiteral", "this", "!", "~", "-", "+", "--", "++", "typeof", "void", "delete", ";", "var"]
共計(jì)35個(gè)。
我又求出了所有可以出現(xiàn)在分號(hào)之前的語法標(biāo)記(即去掉分號(hào)以后的last集),他們是
["--", "++", "IdentifierName", "]", ")", "}", "RegularExpressionLiteral", "StringLiteral", "NumericLiteral", "BooleanLiteral", "NullLiteral", "Identifier", "this", "debugger", "return", "break", "continue"]
共計(jì)17個(gè)。
35*17 = 595種組合,為了方便記憶,以下我分組來討論語法歧義 。(本來用Excel弄了張表,不過表太大了不好貼出來)
首先,以下語法標(biāo)記開頭的語句是絕對(duì)安全的,不會(huì)跟不加分號(hào)的上一行產(chǎn)生任何歧義:
var if do while for continue break return with switch throw try debugger ;
接下來我們來分組看不加分號(hào)導(dǎo)致的語法歧義:
- 第一種是++和--兩種運(yùn)算符出現(xiàn)在上一行結(jié)尾的情況,下一行以以下開頭時(shí),會(huì)產(chǎn)生語法歧義:
- function delete void typeof new null true false NumericLiteral StringLiteral RegularExpressionLiteral ( [ { Identifier ++ -- + - ~ !
- 其中,function和delete是非常常用的statement開頭。
- 特別是 ++和--單獨(dú)被斷為一行的時(shí)候,因?yàn)镴S的語法規(guī)則規(guī)定后自增運(yùn)算不允許中間插入換行,所以++和--會(huì)被視為前自增而跟下一行連接在一起。
- 第二種是return作為上一行結(jié)尾的情況,下一行以以下開頭時(shí),會(huì)產(chǎn)生語法歧義:
- function delete void typeof ( [ { Identifier ++ -- + - ~ !
- 同樣因?yàn)镴S語法的規(guī)則不允許在return 和后面的值之間插入換行,所以return之后只要有換行符就會(huì)視為有分號(hào),這常常會(huì)與使用者的期望不符合。
- 第三種是下一行以+和-開頭的情況,上一行以以下結(jié)尾是,會(huì)產(chǎn)生語法歧義:
- -- ++ IdentifierName ] ) } RegularExpressionLiteral
- 因?yàn)楹苌儆姓Z句以+或者-開頭,所以這種情況不算危險(xiǎn)。
- 第四種是上一行以break、continue結(jié)尾的情況,下一行以Identifier開頭時(shí),會(huì)產(chǎn)生語法歧義。
- 第五種是下一行以(和[開頭的情況,上一行以以下結(jié)尾是,會(huì)產(chǎn)生語法歧義:
- -- ++ IdentifierName ] ) } RegularExpressionLiteral StringLiteral NumericLiteral BooleanLiteral NullLiteral Identifier this
- 這種情況非常危險(xiǎn)(所以hax的文章中要提出這種情況應(yīng)該語句前寫分號(hào)),幾乎上一行的所有情況都將導(dǎo)致正常期望之外的結(jié)果。
- 第六種是,當(dāng)下一行以RegularExpressionLiteral 開頭的情況,上一行的以下結(jié)尾,會(huì)導(dǎo)致/被理解為除號(hào):
- -- ++ IdentifierName ] ) } RegularExpressionLiteral StringLiteral NumericLiteral BooleanLiteral NullLiteral Identifier this
總結(jié),
- 在return、break、continue、后自增、后自減五種語句中,換行符可以完全替代分號(hào)的作用。
- var if do while for continue break return with switch throw try debugger幾種關(guān)鍵字開頭的語句,以及空語句,上一行加不加分號(hào)影響不大。
- 凡表達(dá)式語句和函數(shù)表達(dá)式語句,后面不加分號(hào)非常危險(xiǎn),情況極其復(fù)雜。
- 凡(和[開頭的語句,前面不加分號(hào)極度危險(xiǎn)。
下面在通過實(shí)例代碼介紹下JavaScript中的分號(hào)問題
一般在比較懶的前臺(tái)程序員中經(jīng)常會(huì)碰到一些莫名其妙的問題。
今天僅討論一下在JS中經(jīng)常會(huì)碰到一些關(guān)于分號(hào)的問題。JavaScript這門語言是可以省略分號(hào)的,是因?yàn)樗鼤?huì)換行符后如果缺少分號(hào)就會(huì)無法編譯時(shí)它會(huì)默認(rèn)添加上分號(hào),但是在一些特定情況下他是不會(huì)默認(rèn)添加分號(hào)的?,F(xiàn)在簡(jiǎn)單介紹一下需要注意的幾個(gè)地方。
在這種情況時(shí):
var x = 0 [x+1,x+2,x+3].forEach(function(){ console.log(x) })
這種情況下會(huì)導(dǎo)致程序無法正常運(yùn)行。JavaScript在解析這段代碼是并不會(huì)在var x = 0后換行。
在寫代碼時(shí)如果以一條語句以 ”(” ,"[" ,"+" ,"-" ,"/" 開始時(shí)通常在上一條語句不會(huì)默認(rèn)添加分號(hào)的。所以在這種情況下盡量保持一下這種寫法,在以這些字符開始時(shí)在行首添加一個(gè)分號(hào),這樣可以保證在別人更改上面代碼時(shí)不加分號(hào)也不會(huì)影響以下代碼運(yùn)行。
var x = 0 ;[x+1,x+2,x+3].forEach(function(){ console.log(x) })
還有就是在涉及 return break continue 這種語句時(shí)盡量不要換行
return true; JavaScript會(huì)解析為 return; true; 在涉及 ++ 和 -- 這一系列運(yùn)算時(shí) 在作為表達(dá)式的前綴或后綴時(shí)在換行是會(huì)有一定的問題,如下情況: var x = 0; var y = 0; x ++ y
JavaScript會(huì)解析為
x;++y; 而不是 x++;y;
雖然在JavaScript這門語言中 “;” 是可以省略不寫的,但是還是建議大家每句代碼后都跟上 “;” 養(yǎng)成這種良好的編碼習(xí)慣,畢竟在大多語言中不帶 “;” 的編碼適不適用的。
總結(jié)
以上所述是小編給大家介紹的JavaScript語句后面的分號(hào)問題,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JS正則驗(yàn)證多個(gè)郵箱完整實(shí)例【郵箱用分號(hào)隔開】
- 淺談javascript的分號(hào)的使用
- JavaScript 自動(dòng)分號(hào)插入(JavaScript synat:auto semicolon insertion)
- JS 分號(hào)引起的一段調(diào)試問題
- js中關(guān)于一個(gè)分號(hào)的崩潰示例
- javascript 分號(hào)總結(jié)及詳細(xì)介紹
- 淺析Javascript的自動(dòng)分號(hào)插入(ASI)機(jī)制
- 如何防止JavaScript自動(dòng)插入分號(hào)
- JavaScript中的分號(hào)插入機(jī)制詳細(xì)介紹
- JavaScript中分號(hào)的一些細(xì)節(jié)
相關(guān)文章
JavaScript之json_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript之json,JSON它是一種數(shù)據(jù)交換格式。有興趣的可以了解一下2017-06-06微信小程序動(dòng)態(tài)設(shè)置圖片大小的方法
這篇文章主要介紹了微信小程序動(dòng)態(tài)設(shè)置圖片大小的方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11用JavaScript來美化HTML的select標(biāo)簽的下拉列表效果
這篇文章主要介紹了用JavaScript來美化HTML的select標(biāo)簽的下拉列表效果的方法,而且在多瀏覽器下的兼容效果也得到提升,需要的朋友可以參考下2015-11-11