资讯专栏INFORMATION COLUMN

写javascript时要不要省略分号?

wupengyu / 869人阅读

摘要:自动填补分号的规则在说要不要写分号之前,先了解一下自动填补分号的规则。后来看到知乎上的作者尤雨溪和前端大神贺师俊的回答后,我对写分号的想法完全颠覆了。总是写分号并不能完全解决缺陷如后换行会自动插入分号。

在打算写这篇文章之前,我是一个分号党,在写这篇文章之后,可能会转为无分号党了。之前是写分号是编辑器语法较检所养成的强迫症,现在观念的转变,是因为看了不少大神的讨论后,觉得javascript语句后写分号除了增大工作量外,意义不大。

javascript自动填补分号的规则

在说要不要写分号之前,先了解一下javascript自动填补分号的规则。

在《javascript权威指南》中有一段话“如果一条语句以“(”、“[”、“/”、“+”、或“-”开始,那么它极有可能和前一条语句合在一起解释。”,写javascript的时候,如果每条语句都独自写成一行,是不需要写分号的,但是下一行如果遇到上面提到的符号,javascript可能会与下一行合并解释。其中以“/”、“+”和“-”开头的语句在实现项目中比较少见,以“(”和“[”开头的则非常常见。下面各找了一个例子来说明。

以“(”开头的情况:
a = b
(function() {
    
})()

javascript会解释成:

a = b(function() {
    
})();
以“[”开头的情况
a = function() {

}
[1,2,3].forEach(function(item) {
    
});

javascript会解释成:

a = function() {
}[1,2,3].forEach(function(item) {
    
});
以“/”开头的情况
a = "abc"
/[a-z]/.test(a)

期望的结果为true,但是javascript会解释成,接着就报错了:

a = ‘abc’/[a-z]/.test(a);
以“+”开头的情况
a = b
+c

javascript会解释成

a = b + c;
以“-”开头的情况
a = b
-c

javascript会解释成

a = b - c;

如果在return、break、continue、throw等关键字后面换行,javascript会在换行处填补分号。如:

return
{
    a: 1
}

会解释成:

return;
{
    a: 1
}

如果“++”或“--”运算符作为表达式的后缀时,表达式应该写在同一行,否则也会解释有误

例如:

x
++
y

会解释成:

x;
++y;

而不是

x++;
y;
要不要写分号

对于究竟要不要写分号这个问题,我之前也没有细想,看到编辑器有提示就写了,也没有想过写与不写有什么区别,甚至在写这篇文章时,思路还是要将写分号当作团队代码的规范。后来看到知乎上vuejs的作者尤雨溪和前端大神贺师俊的回答后,我对写分号的想法完全颠覆了。

对于总是写分号的缺陷,贺思俊的总结很到位,他总结的3点缺陷如下:

人总是有可能忘记写分号。ASI(分号自动插入机制)导致无法区分是无意中忘记还是有意不写(代码折行)。

“总是写分号”并不能完全解决ASI缺陷(如return后换行会自动插入分号)。

“}”后是否要加分号需要回溯到对应“{”之前进行语义判断(是否是函数表达式),成本远高于前置分号判断(只要对行首字符进行token判断:是否是 [ ( + - / 五个符号之一)。

而对于上面提到的五种符号需要加分号的情况,完成可以用工具来帮我们自动完成,现在看来写分号除了满足强迫症外,好像真的没有什么必要了

参考资料

《javascript权威指南》 第30-31页

尤雨溪对于javascript语句后要不要写分号的回答

贺思俊对于javascript语句后要不要写分号的回答

Hacking Semicolons

JavaScript 中的“自动分号插入”机制(ASI)

近期在看《javascript权威指南》,边看边总结,都会同步发送到微信公众号上,欢迎关注,欢迎提意见:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92356.html

相关文章

  • JavaScript装逼指南

    摘要:构造函数很多教程都告诉我们,不要直接用内置对象的构造函数来创建基本变量,例如的写法就应该用的写法来取代。但是,构造函数注意是大写的有点特别。构造函数接受的参数中,第一个是要传入的参数名,第二个是函数内的代码用字符串来表示。 如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句原来还可以这样写呢?...

    oneasp 评论0 收藏0
  • 从0到1使用VUE-CLI3开发实战(六):这是一个有代码洁癖的项目

    摘要:从到使用开发实战六这是一个有代码洁癖的项目一个小故事一天我路过一座桥,碰巧看见一个人想跳河自杀。配置什么是是一个开源的代码检查工具,由于年月创建。使用编写,这样既可以有一个快速的运行环境的同时也便于安装。 从0到1使用VUE-CLI3开发实战(六):这是一个有代码洁癖的项目 一个小故事 一天我路过一座桥,碰巧看见一个人想跳河自杀。我跑过去对他大喊道:别跳,别死啊。为什么不让我跳?他说。...

    genefy 评论0 收藏0
  • 重学前端学习笔记(二十九)--JavaScript分号

    摘要:一自动插入分号规则三条规则要有换行符,且下一个符号是不符合语法的,那么就尝试插入分号。有换行符,且语法中规定此处不能有换行符,那么就自动插入分号。源代码结束处,不能形成完整的脚本或者模块结构,那么就自动插入分号。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整...

    Sourcelink 评论0 收藏0
  • 重学前端学习笔记(二十九)--JavaScript分号

    摘要:一自动插入分号规则三条规则要有换行符,且下一个符号是不符合语法的,那么就尝试插入分号。有换行符,且语法中规定此处不能有换行符,那么就自动插入分号。源代码结束处,不能形成完整的脚本或者模块结构,那么就自动插入分号。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整...

    whatsns 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<