写javascript时要不要省略分号？

梦里梦外; 2022-07-16 11:21 177阅读 0赞

在打算写这篇文章之前，我是一个分号党，在写这篇文章之后，转为了无分号党。之前是写分号是编辑器语法较检所养成的强迫症，现在观念的转变，是因为看了不少大神的讨论后，觉得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的作者尤雨溪和前端大神贺师俊的回答后，我对写分号的想法完全颠覆了。

对于总是写分号的缺陷，贺思俊的[总结][Link 1]很到位，他总结的3点缺陷如下：

*  人总是有可能忘记写分号。ASI（分号自动插入机制）导致无法区分是无意中忘记还是有意不写（代码折行）。
 *  “总是写分号”并不能完全解决ASI缺陷（如return后换行会自动插入分号）。
 *  “\}”后是否要加分号需要回溯到对应“\{”之前进行语义判断（是否是函数表达式），成本远高于前置分号判断（只要对行首字符进行token判断：是否是 \[ ( + - / 五个符号之一）。

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

## 参考资料 ##

*  《javascript权威指南》 第30-31页
 *  [尤雨溪对于javascript语句后要不要写分号的回答][javascript]
 *  [贺思俊对于javascript语句后要不要写分号的回答][Link 1]
 *  [Hacking Semicolons][]
 *  [JavaScript 中的“自动分号插入”机制（ASI）][JavaScript _ASI]

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

![bVCJ55_w_430_h_430][]

[Link 1]: https://www.zhihu.com/question/20298345/answer/14670020
[javascript]: https://www.zhihu.com/question/20298345/answer/49551142
[Hacking Semicolons]: http://slides.com/evanyou/semicolons#/
[JavaScript _ASI]: http://justjavac.iteye.com/blog/1852405
[bVCJ55_w_430_h_430]: /images/20220716/db76f32a322e44c8966a702a691947aa.png