JavaScript中的分號自動插入

2020-12-27 小象Web開發

許多程式語言都有語句結束的概念。不過,用哪個符號結束以及結束語句的規則在各個語言之間存在差異。

對於 JavaScript 來說,它在這方面要求非常寬鬆。在 JavaScript 中語句結束符是分號,不過也可以不寫。它是怎麼做到的?JavaScript 編譯器是如何知道何時該結束一條語句呢?

它是通過一套簡單的規則和自動分號插入機制(Automatic Semicolon Insertion,簡寫為 ASI)實現的。我們先看一下分號的規則,然後了解一下 ASI 的機制。

分號的規則

分號用於標記一條語句的結束。

塊語句的末尾應該有一個分號。

分號的特殊案例。

上面的代碼是一個函數表達式,所以需要一個分號。

自動分號插入(Automatic Semicolon Insertion)

這是 Javascript 中的一種機制,它遵循一些規則,編譯器會嘗試把原始碼分解成語句。默認情況下,ASI 總是打開的。有時候自動分號插入機制很有用,但偶爾會遇到 ASI 改變語義引起的棘手問題。

ASI 規則

1. 遇到行結束符時,會插入一個分號。

2.遇到句法不允許的 『}』 時插入一個分號。

3.遇到一個 restricted production 後跟行結束符時,自動插入一個分號。

這些 restricted production 包括:++, --, continue, break, return, throw, yield 和 module 關鍵字。解析器遇到這些關鍵字後跟一個行結束符時,會在關鍵字後面插入一個分號。

但是需要注意 return 關鍵字:

上述代碼會在 return 語句後面插入一個分號,它會返回 undefined。return 後面的語句無法被訪問。為了避免這個問題,可以把上述2條語句寫在同一行。

依賴 ASI 可能導致的意外問題

如果我們不在代碼中寫分號,而是依賴 ASI,會偶爾遇到語義完全改變的情況。

意外的函數調用

意外的除法操作

意外的屬性訪問

結語

現在很多人選擇忽略分號,讓代碼看起來更簡潔。不過我建議始終明確寫上分號,以避免引起潛在的問題。

相關焦點

  • 淺談javascript的分號
    javascript的分號代表語句的結束符,但由於javascript具有分號自動插入規則,所以它是一個十分容易讓人模糊的東西,在一般情況下,一個換行就會產生一個分號,但實際情況卻不然,也就是說在javascript中換行可能產生分號,也可能不產生,是否自動插入分號,主要看上下行。
  • JavaScript 代碼加不加分號有什麼區別
    :var a = 1 // 隨便把分號放在哪裡,只要能隔開就行;(function() {  console.log(2)})()ASI 自動加入分號ASI是 「Automatic Semicolon Insertion」 的縮寫,在運行時會往有些折行的代碼中
  • 分號在各種程式語言中的作用
    在本文中,讓我們看看分號在不同程式語言中的作用:分號在C中的作用:分號在C ++中的作用:分號通常用於分隔C ++原始碼的一小部分,表明它是有意與相應代碼分開的。一般在每個語句之後,在類和結構定義,變量聲明,函數聲明之後,在C ++中使用分號。
  • JavaScript ASI 機制詳解
    不過在省略分號的風格中,這種解析特性會導致一些意外情況。三條規則是描述何時該自動插入分號:解析器從左往右解析代碼(讀入 token),當碰到一個不能構成合法語句的 token 時,它會在以下幾種情況中在該 token 之前插入分號,此時這個不合群的 token 被稱為 offending token :當解析到文件末尾發現語法還是有問題,就會在文件末尾插入分號。
  • 七天學會javascript第一天javascript介紹
    javascript介紹javascript數據類型javascript運算符javascript對象javascriptDate對象javascript String對象JavaScript常用於實現一些前端效果。
  • 7個處理JavaScript值為undefined的技巧
    當你不想添加這些分號時會發生什麼?例如減少源文件的大小。在這種情況下,ECMAScript提供了[Automatic Semicolon Insertion](http://www.ecma-international.org/ecma-262/6.0/index.html#sec-automatic-semicolon-insertion)(ASI)機制,該機制可以插入 你丟失的分號。
  • JavaScript中的陷阱大集合
    typeoftypeof這會返回一個javascript基本類型的實例的類型。evaleval 可以將字符串以javascript代碼的形式來解析執行,但是一般來說我們不建議這麼做。因為eval非常慢 - 當javascript被加載到瀏覽器中時,它會被編譯成本地代碼;然而執行的過程中每次遇到eval表達式,編譯引擎都將重新啟動執行編譯,這樣做的代 價太大了。
  • javascript中(function(){})($)與$(function)的區別
    之前一直沒弄清楚這兩者的區別,只是發現多個(function(){})($)之間定義的方法是可以互通的,以為這個會比較好,實際運用中發現並不是這麼簡單的。1. (function(){}())與(function(){})()這兩種寫法,都是一種立即執行函數的寫法,即IIFE (Immediately Invoked Function Expression)。
  • WORD中如何實現插入圖片之類的自動編號
    但是,問題來了:如果我們非得用WORD進行寫論文之類時,怎麼實現圖片、公式之類的自動編號呢?(關於WORD中對文獻的自動編號,請點擊此文:免費!且跟EndNote一樣強大的文獻管理器Mendeley)非得用WORD進行編輯時的尷尬場景:寫論文之類,經常會插入好多個figure,然後,修改WORD文檔過程中,每改一版總會用新圖的插入和舊圖的刪減,然後,辛辛苦苦按順序編號的各圖又得重新弄一遍~~~~直到剛剛發現。。。好啦,不再廢話了,這裡做個分享。直接請看如何實現插入圖片的自動編號!!!
  • JavaScript入門教程
    起源javascript前身叫做livescript,sun公司推出java,netspace公司引進java的概念,重新設計livescript,並更名javascript。發明者,布蘭登.艾克,表單驗證原先要經過伺服器,伺服器壓力大,等待時間長,js僅在客戶端就可完成。是什麼是一種腳本語言,是一種輕量級的程式語言。
  • JavaScript:學會splice()數組操作
    使用javascript數組類型內置的splice方法僅需一行代碼即可輕鬆實現對數組元素進行插入、刪除、替換操作。方法名:Array.prototype.splice(index,count[,elm1,elm2...n])使用Array類型的splice方法可以對數組元素進行插入、替換、刪除。
  • 如何在Word中插入當前日期並自動更新?
    如圖 6‑11所示為某市商務局、財政局聯合呈報省商務廳、財政廳的一份紅頭件,文件擬訂者希望在每次列印時,最後的落款日期能夠自動更新,應該如何操作?圖6‑11紅頭文件→ 解決方案1利用「日期和時間」功能在文檔中插入當前日期。→ 操作方法※利用「日期和時間」功能在文檔中插入當前日期※步驟1  將光標定位到需要插入當前日期處。
  • JavaScript中的簡單排序算法
    英文 | https://medium.com/javascript-in-plain-english/simple-sorting-algorithms-in-javascript
  • 來一輪帶注釋的demo,徹底搞懂javascript中的replace函數
    javascript這門語言一直就像一位帶著面紗的美女,總是看不清,摸不透,一直專注伺服器端,也從來沒有特別重視過,直到最近幾年,javascript越來越重要,越來越通用。最近和前端走的比較近,藉此機會,好好鞏固一下相關知識點。
  • JavaScript七宗罪和一些槽點
    JavaScript有一種稱為自動分號插入(ASI)的機制,如果需要,會自動在你的代碼中插入分號。JS的語言結束可以使用分號;doSomething();但是分號可以省略,如果你不添加分號的話,ASI會自動判斷,並且自動給你添加上分號。
  • 巧用word軟體中的題注功能,讓你插入的對象自動排序與更新
    在word編輯文檔過程中會插入很多圖片作為圖示,題注就是為插入的圖片自動編上序號,方便我們閱讀理解文章。如果我們添加或刪除了圖片,那麼題注的編號將重新排列,圖片量大的話一個個去對應修改很麻煩,且容易漏掉,通過以下方法可以方便更新圖示的序號。
  • excel怎麼插入當前時間 Excel插入時間並自動更新圖文教程
    excel怎麼插入當前時間 Excel插入時間並自動更新圖文教程時間:2018-04-18 10:19   來源:系統天堂   責任編輯:沫朵 川北在線核心提示:原標題:excel怎麼插入當前時間 Excel插入時間並自動更新圖文教程 excel怎麼插入當前時間?
  • 每日一課 | JavaScript基礎
    9    <script type="text/javascript">10        <!在html標籤的事件中,超級連結裡。16    <button onclick="javaScript語言"></button>17    <a href="javascript:alert('aa');alert('bb')">點擊</a>18193.
  • 程式語言中的分號
    他可能生意不好,就無聊看看我在幹什麼,然後過了一會,他幽幽的說,這裡少了個分號。分號。對,我們今天就來聊聊程式語言中的分號!程式語言的數量,那可多了去了。但是,分號的作用無外乎兩種:語句分隔符和語句終止符。當然,還有很多程式語言不涉及分號的使用,此處先放下不管。我們先看一下分號,是怎麼出現到程式語言中的。
  • javascript流程語句
    ">/*單分支【格式】if(判斷條件)執行語句;【過程】先去判斷括號中的判斷條件,如果成立,回去執行緊跟著if語句的一條語句。== 0)alert("這是一個偶數");alert("執行語句");</script>【注】在JS中,我們把{ }括起來的所有語句都當做是一條語句對待。