浅析Javascript的自动分号插入(ASI)机制

前言

相信从事过C#和Java的大家都知道分号是用作断句(EOS,end of statement)的,而且必须加分号,否则编译就不通过了。但JavaScript由于存在ASI机制,因此允许我们省略分号。ASI机制不是说在解析过程中解析器自动把分号添加到代码中,而是说解析器除了分号还会以换行为基础按一定的规则作为断句的依据,从而保证解析的正确性。

规范理论

es5 标准定义了自动分号插入规则,包括以下三个基本规则加两个前置条件:

前置条件

1、如果插入分号后解析结果是空语句,那么不会自动插入分号。

例子:(空语句,else 前不加分好)

if (a > b)
else c = d 

2、如果插入分号后它成为 for 语句头部的两个分号之一,那么不会自动插入分号。

例子:(不会加分号)

for (a; b
)

基本规则

左到右解析程序,当遇到一个不符合任何文法产生式的 token(叫做 违规 token(offending token)),那么只要满足下面条件之一就在违规 token 前面自动插入分号。

1、至少一个 LineTerminator 分割了违规 token 和前一个 token

2、违规 token 是 }。

例子:(1、2不符合任何产生式,并且之间存在 LineTerminator,因此在违规 token 2前加了分好,2和}则是因为违规 token 是 }所以加了分号)

{ 1
2 } 3 
{ 1
;2 ;} 3;

左到右解析程序,tokens 输入流已经结束,当解析器无法将输入 token 流解析成单个完整 ECMAScript 程序 ,那么就在输入流的结束位置自动插入分号。

对于受限产生式,也就是下面的5个,我们把产生式 [no LineTerminator here]后面的 token 叫做受限 token,如果在 token 和 受限 token 间存在了至少一个 LineTerminator,那么会在受限 token 前自动加上 token

受限的产生式只限如下5个:

PostfixExpression : 

LeftHandSideExpression [no LineTerminator here] ++ LeftHandSideExpression [no LineTerminator here] --

ContinueStatement : 

continue [no LineTerminator here] Identifier;

BreakStatement : 

break [no LineTerminator here] Identifier;

ReturnStatement : 

return [no LineTerminator here] Expression;

ThrowStatement : throw [no LineTerminator here] Expression;

归纳

避免 ASI 带来的问题

1、后缀运算符 ++ 或 -- 和它的操作数应该出现在同一行。

2、return throw 语句的表达式开始位置应该和 return throw token 同一行。

3、break 或 continue 语句的标示符应该和 break continue token 同一行。

何时加分号

无分号党(懒人党)想要不加分号,那么就需要知道什么时候应该要加分号。网上的一篇文章归纳了 NO ASI 并且会出现错误的几种情况,在这几种情况下我们是要加分号的。下面是对应的描述:

在以 ([/+- 开头的语句前加分号(由于正常写法均不会出现以 .,*% 作为语句开头,因此只需记住前面5个即可,你看能懒则懒哦)

不过这里只考虑了换行的情况,其实 ASI 还存在不换行的情况,这就要根据标准里的三条规则行事了!

知道了这点,其实我们就可以省略大部分的分号了。但是也不强求,因为这还是要根据个人习惯以及团队风格走的。

小补充

为什么自执行函数前要加分号?

主要是应对代码合并压缩时,由于缺少分号;带来的错误。知道了上面的规则,在 ( 开头的行前加分号就可以避免错误了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

(0)

相关推荐

  • javascript 分号总结及详细介绍

    javascript每条语句都是以分号结束,但由于javascript具有分号自动插入规则,所有不同的编程人员有不同的习惯,有的加分号,有的不加分号,那么到底加分号好还是不加分号好?本文章向大家探讨javascript每条语句该不该加分号. javascript的分号代表语句的结束符,但由于javascript具有分号自动插入规则,所以它是一个十分容易让人模糊的东西,在一般情况下,一个换行就会产生一个分号,但实际情况却不然,也就是说在javascript中换行可能产生分号,也可能不产生,是否自动

  • JavaScript基本类型值-Number类型

    大致介绍 在JavaScript的内部采用IEEE754格式来表示数字,所以不区分整数和浮点数,都是用64位浮点数的形式储存.就是说,在JavaScript内部,就根本没有小数.但是有些运算必须得需要整数完成,所以JavaScript有时会把64位的浮点数转换成32位的整数,再进行运算. 整数 JavaScript对整数提供四种表示方法: 1.二进制:有前缀0b的数值,出现0,1以外的数字会报错 2.八进制:有前缀0o的数值,或者是以0后面再跟一个数字(0-7).如果超出了前面所述的数值范围,则

  • JS 分号引起的一段调试问题

    来看一下下面的代码: var a=textbox1.text; var b=5; if(a<b);//如果用户输入的值小于5,就取5 { a=b; } 看看执行后有什么效果,无论textbox1.text是什么值,都会时放条件判断.为什么呢.有没有什么发现. 原来在写代码的时候,if(a<b);这里多了个分号.一不小心犯的错,却花了不少时间来解决. 注:刚写下的经过,再次打开时,没有内容了.因此就精简一点了.写个大致意思了

  • JavaScript的基本类型值-String类型

    大致介绍 String类型用于表示由零或多个16位Unicode字符组成的字符序列,即字符串.在JavaScript中没有单个的字符型,都是字符串.字符型就相当于只包含一个字符的字符串. 引号 字符串可以由双引号("")或单引号('')表示,但是要注意,如果是双引号开始就要以双引号结束,单双引号是可以嵌套的 "hello"; //正确         'hello'; //正确         'hello"; //错误         "hel

  • 如何防止JavaScript自动插入分号

    在 JavaScript 中,行尾的分号有一种自动插入机制,这样子,可以容忍某些朋友忽略了输入分号. 当然你最好养成输入分号的习惯,同时掌握 JavaScript 是如何处理忽略输入分号的情况的,因为这种知识有助于你理解没有分号的代码. JavaScript语言有一个机制:在解析时,能够在一句话后面自动插入一个分号,用来修改语句末尾遗漏的分号分隔符.然而,由于这个自动插入的分号与JavaScript语言的另一个机制发生了冲突,即所有空格符都被忽略,因此程序可以利用空格格式化代码. 这两种机制的冲

  • JavaScript中的分号插入机制详细介绍

    仅在}之前.一个或多个换行之后和程序输入的结尾被插入 也就是说你只能在一行.一个代码块和一段程序结束的地方省略分号. 也就是说你可以写如下代码 复制代码 代码如下: function square(x) {     var n = +x     return n * n } 但是却不可以写的像下面代码一样,这样就报错了哦 复制代码 代码如下: function area(r) {    r = +r    return Math.PI*r*r }//error 仅在随后的输入标记不能解析时插入

  • 浅谈javascript的分号的使用

    JS中function 的开头有必要加分号吗?js语句后应该加分号吗? javascript大括号后面应使用分号吗?JS中function 的开头有加感叹号.分号是什么意思呢? Js多个文件集成成一个文件后,压缩代码时避免发生语法错误,可以如下处理 一.js 前加分号 例如:;(function($){...此处代码...})(); Javascript中分号表示语句结束,在开头加上,是为了压缩的时候和别的方法分割一下,表示一个新的语句开始 二.js函数后加分号 例如 // 模块1 // 前面有

  • JavaScript基本类型值-Undefined、Null、Boolean

    大致介绍 ECMAScript中有5中简单的数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number.String. Undefined Undefined时全局变量的一个属性,它只有一个值即:undefined.当使用var声明变量但未对其初始化时,这个变量的值就是undefined. var test; console.log(test); //undefined 对于未声明过的变量只能进行一种操作,即typeof检测其数据类型 //var a consol

  • JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)

    看代码: HTML: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

  • js中关于一个分号的崩溃示例

    复制代码 代码如下: if ($("span", $("#txtStere").siblings("div")).text() === "*"); { if (!IsNum("#txtStere")) { $("#txtStere").next().text("您选择的运费模板是按体积计价,物流体积不能为空且需是数字"); return false; } else {

  • 走进javascript——不起眼的基础,值和分号

    值 有时我很想知道javascript解析引擎是如何区分一个变量的值,比如下面这段代码. var x = 'javascript'; //javascript x = "hello"; // hello x = 555; //555 x = null; //null x = a; //a is not defined x = true; //true 对于数字是直接赋值的,因为它没有多样性,数字就是数字.但是对于值是英文的情况就很难区分了,因为在编程语言中,英文既可能是字符串,也可能是

随机推荐