JavaScript的语句可以不用分号结尾么?

前言

先说明我并没有要大家都来不加分号,而是回答"为什么可以不加分号",或是"为何分号是选项可有可无?",或是"分号是在何时可以不加?何时又一定要加?何时又算多加了?"等问题。

"不用分号作语句结尾"并不是"完全不使用分号",而是该加的时候加,不该加的时候不加,不用分号作为语句结尾。实际上,我如果在改写别人的代码或是像原本函式库(如jquery)的风格是有用分号(;)时,为了统一撰写风格,也是会加的,基本上自己最近写的ES6、React、Redux等就不用分号(;)结尾。

分号(;)的作用

在JS里的分号(;)是什么作用?总结一下,它既是语句(表达式)的分隔,也可以作为语句的结尾。

但只认为分号(;)就一定是语句的结尾是有疑问的,下面这两个例子就是典型范例,也是很常见的错误:

//有问题的例子function add() {

var a = 1, b = 2;

return

a + b;

}

或是像下面这个,也是很常见的错误示范:

//有问题的例子function test() {

return

{

test: true

};

}

这两例的函数回传值必为 undefined ,而不是应该回传的值 3 与物件。为何?因为你有看到return先换行(回车),再接著要回传的值了吗?也就是说这两个代码在执行时,相当于下面这样的代码(我只写一个出来,另一例相同):

function test() {

return;

{ test: true };

}

return 因为先换了一行,视为语句结尾,所以根本没有可回传的值,也就是在上例子中,回车(\n)先把 return 结尾掉了,后面你加的分号(;)是结尾到下一行的。这逻辑代表回车(\n)在这一句语句结尾这功用上,比分号(;)还优先。

那为何回车(\n)或换行,可以作为语句的结尾?来源是由于ECMAScript的自动插入分号(Automatic Semicolon Insertion, 以下简称ASI)的标准。在语句或一段代码叙述后,加了回车(\n)后,JS剖析器会在执行期间自动帮你插入分号,这样理解了吗?所以不是回车(\n)的事,是因为自动帮你加分号作结尾了。

自动插入分号(ASI)这个规则一直在网上有争议,有一群人认为它是个容易造成误解的设计,有一群人认为它这设计是正确的,应该多多利用,就像不需要在一般情况下再多此一举,在语句后面加上分号(;)。不管你是支援哪一种,我认为都需要理解其中的内容,作为一个称职的JS开发者,这是很基础的一些知识。

自动插入分号(ASI)的5种例外情况

这里讨论的就是用回车(\n)或断行来作为语句的结尾,自动插入分号(Automatic Semicolon Insertion)标准的特例情况。在以下的4种情况是用回车(\n)或空一行是不会作自动插入分号来让语句作结尾,虽是说"特例",但大概也是每天都看得到,只是常不知道为何会这样而已,看了你就知道了。大致说明如下:

1. 当这一行的语句是没关闭的情况

例如数组(阵列)、对象(物件)文字字面、圆括号之类,或是最后是个点号(.)或逗号(,)时,也就是如果把这行结尾,就会产生不合法语句的情况。

注: 遇到等号(=)算未完整的表述式,如果指定值在下一行会略过自动结尾作用

这种例子很常见,通常是在分开内容太长的语句,或是让值写得清楚的地方。我举下面的两个合法语法范例,你会很容易理解回车(\n)会在何时自动结尾,虽然这些例子是不好阅读的例子:

//第一例var a =

[ 1,2,3,

]

//第二例function test(a,

b,

c){console.log(a,b,c

)

}

2. 这一行是++或--

这规则是很怪异的,从来没看过有人这样写过。JS会认为++与--在这一行是要准备来运算执行下一行的值,所以不结尾。下面是个合法范例:

a=1--

a

console.log(a)

3. 这一行是for()、while()、do、if()或else,但没有用花括号({})时

这简写语法也很常见,每天都会用到,是个当执行代码不多时的写法。以下为范例:

if(null==undefined)

console.log(true)else

console.log(false)

4. 下一行的开头是([)、(()、(+)、(*)、(/)、(-)、(,)、(.),或二进位运算子(例如~ & |),可以与这行组成一个表达式时

以下为范例:

function test(){

return 1

+2

-3

}console.log(test())

下面这个例子刚好与第一点颠倒的写法,也很常见,有人喜欢用这种的写法,有些人喜欢用第一点的:

var a =

[1

,2

,]

5: 空白语句不会自动结尾

这与上面第3点有相关,有时候会看到有人犯了这个常见错误。下面是个错误例子,不论 if 这行与 else 这行间有没有换行,或是换了几百行,都不会自动结尾:

//错误例子var i = 10

if (i === 5)

else console.log(false)

你可以加上分号在 if(...) 这行最后,让语法合法可被执行。但真心没见过有人这样用,控制流程逻辑不对才会这样写。下面为合法例子:

//合法例子var i = 10

if (i === 5);

else console.log(false)

以上为用回车(n)作为语句结尾的的5个例外情况,其他都会自动帮你插入分号作结尾。

所以依这个解说,最一开始的例子中的 return 后面多了一个换行就会产生错误的回传值。与 return 有同样情况的还有几个,像 continuebreakthrow等,这些如果先换行,然后在下一行再加分号也是会变成两个不同的语句,因为在换行时已经自动插入分号。

一个小常识是,分号(;)除了作为语句结尾或分隔外,它与JS中的其他符号有个差异,它自己本身可以形成一个合法的语句(表达式)。你可以在程式码里只输入一个分号(;),它是合法而不会报错的,其他的符号(例如: ,:+-/%* )都会报错。

一定要使用分号的情况

分号(;)的用处不是只有语句结尾,它在某些语法中,具有分隔表述式或语句的功用。以下情况必用分号(;)。

1. for语句圆括号( () )中的三个表述式彼此之间:

很常用到,不多加说明了,以下为例子:

for(var i=0 ; i<10 ; i++)

{

//...

}

2. 在同一行写两个语句(表述式)在一起,中间需要分号(;)区隔。

所以像 switch 语句中的 case ,如果 break (或 continue )要写在同一行时, break (或 continue )前必加分号(;),以下为例子:

//第一例var i = 0; i++

//第二例case 'foo': doSomething(); break

3. 以 [ 或 ( 开头的行,前面需要加分号(;)

这是很特别一种撰写风格。实际上是一种保护防范的语法,有时候解译器或压缩工具会误认为某行语句,有开头 ( 的话是准备要作函数呼叫,或开头 [ 是准备要作数组(阵列)或对象(物件)的存取属性的事。

还有另一情况是IIFE,因为IIFE刚好也是用 ( 开头。所以这两种开头的语句前,必加分号(;)在语句的最前面,以免造成误判。不过大概也只有这一个需要特别注意,IIFE你用到的情况有可能会多些。

以下为例子:

//第一例

;(x || y).doSomething()

;[a, b, c].forEach(doSomething)

//第二例var x = 42

;(function () { })()

参考: http://stackoverflow.com/ques...

"不需要"与"一定不能"使用分号的情况

接著要理解,什么时候必"不需要"与"一定不能"使用分号(;),这也很容易理解的。如果你是都要用分号来作每行语句的结尾,你应该了解一下。

1. for 语句的最后一个(第三个)表达式后面

画蛇添足不多说,一定会造成错误,其实这错误很难犯,只是网上有我把它列出来。

//错误语法for (var i=0; i < 10; i++;){}

2. 花括号的结尾(})的后面。但有例外,赋值时可以加分号(;)是对的语法。

这个规则理论上应该是"不需要"加而已,经测试在Chrome上也不会报错,算是不建议的语法,这也是个画蛇添足。

//不建议语法function a(){};if(){};

//正确语法,赋值时使用var obj = {a:1};var fun = function(){};

//正确语法,do...whiledo {...} while (...);

3. 在if、for、while、或switch的圆括号结尾后面加上分号(;)

这个是合法语法,但整个逻辑错掉,而且这错误很也不易犯。可以对照到最上面一节的第5个例外情况看看。

//错误例子,不过它合法if (0 === 1); { alert("hi") }

//上例相当于下面这样if (0 === 1);alert("hi");

反对的原因,以及说明

以下针对几个常见的反对不使用分号作为语句结尾的理由,以我的所知回答这些原因。不过,大部份都是因为FUD(惧、惑、疑),而不是真正以理解或科学实证的角度。

因为浏览器相容问题。旧版的浏览器不支持。

自动插入分号(ASI)的标准是何时加到ECMAScript的?

自动插入分号其实是本来就有的语言特性,网上可以找到的2000年的ECMAScript版本3,也就是ES3标准,里面就有这个 Automatic Semicolon Insertion 章节了。

根据网上的文章指出,曾经有一小段时间IE6这个在ASI实作上有问题,但后来很快修正了,现在我们能用到的IE6是支持的。下图是在WindowsXP SP3中的IE6小小测试的,你可以仔细看一下,并没有用分号来作语句结尾。

image

所以,你是听谁说旧版的浏览器不支援的?该不会那个人又说他也是听说的。谣言止于智者对吧。

因为压缩工具不支持

这原因以前的确存在过,有个压缩工具叫JSMin,是大师Douglas Crockford写的工具,印象中如果你没用分号作语句结尾,它是连压都不压,当然Crockford他个人本来就不太赞成不用分号作语句结尾的关系。

现在老早就没有这问题了,其他常用的工具如Closure Compiler或webpack中的外挂工具都可以压好压满,要不然怎么会有大专案(bootstrap, npm, vue.js)也舍弃用分号作语句结尾。

最近的在JSMin与Bootstrap中的一段代码争议在这里可以看到,JS发明人Brendan Eich的言论立场是会中立些: https://brendaneich.com/2012/...

语句都用分号(;)作结尾是一个好的撰写风格

最有名的是从 JSLint 这个检查工具开始的,它会检查你的每个语句的最后是不是用分号(;)来作结尾,如果不是会提出警告信息。

而提倡在每个语句后面一定要用分号来作结尾的大师级人物,最有名的算是JSON格式发明者Douglas Crockford, 他的这个文章 上有说明,从文章中可以看得出他是反对ASI特性的。JSLint工具也是他作的,相信也有很多人看过他的大作"JavaScript: 优良部份"。不过,他也提倡了很多风格,例如tab键相当于4个空格,但现在一般都用2个空格,或是一行一个var变量定义,而且要按照英文字母排列。大师说的我们小小程序员当然必定是要重视,但并不是照单全收。

回到我们的问题中,在浏览器上能顺便执行的代码语法,为何要强制被检查工具认为是有问题的语法?

如果你都到处都加上分号(;),却还会发生有错误的情况(例如最上面的典型例子),那这代表起因是来自于对于语言本身的设计或标准的无知,而不是怪罪于语言本身的臭虫或设计问题。

现在流行的其他检查工具,例如ESLint、JSHint等等,就算有这项检查也有选项可以关闭。这纯粹是开发团队或个人的选择才是正确的。

结语

要不要用分号(;)作为语句的结尾,就视个人习惯或组织团队规定的撰写风格了。不管你的选择为何,都应该理解为何分号(;)是选项而非必要的原因,不要因为大神或社群上大家说要加该加,就埋头拼命加,而不去理解其中的原因。

真实情况是并不是所有的情况分号作为语句都是选项,是有规则标准的。js虽然常常有坑,但本质上是死的东西,标准就已经定在那里了,上面我所说的规则学好足以应付9成情况,也可以让你的代码写起来更加有信心。

最后几句,开源专案中真的完全不使用分号(;)的专案最近多起来的现象,但最有名的是大家每天都在用的 npmbootstrap ,还有最近比较火红的 vue.jsredux这几个,有兴趣可以找找。

文章来源:SegmentFault

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,470评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,393评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,577评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,176评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,189评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,155评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,041评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,903评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,319评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,417评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,013评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2 353

推荐阅读更多精彩内容