JavaScript中分号的一些细节

前言

javascript 中的分号是可选的，加不加分号主要是个代码风格问题。一种风格是使用分号明确结束语句，即便这些分号不是必需的；另一种风格是尽可能的不加分号，只在必要的情况才加。我个人就不喜欢加分号，当然喜欢加分号的朋友也不少。无论你喜欢哪种风格，都需要了解了解 JavaScript 中的分号的一些细节。

代码中分号的作用

分号的主要作用是：作为语句的断言（EOS）用于结束一个程序语句，目的是让解析器正确解析程序。在很多 C-Style 语言里，用分号明确结束一行语句，主要是为了降低语言编译器开发的成本。但是现代编译器都足够聪明了，可以很好的处理好多行语句。很多语言都不需要明确使用分号结尾如：Go、Scala、Ruby、python、Swift、Groovy 等等。

虽然 JavaScript 是 C-like 语言，但它是有别于 C、Java 的，在 JavaScript 中分号也是可选的，它自动分号插入机制 Auto Semicolon Insertion (ASI)。

JavaScript 自动分号插入机制

JavaScript 有着自动分号插入的机制(Automatic Semicolon Insertion)，简称 ASI。在ECMA-262 - Automatic Semicolon Insertion中有关 Automatic Semicolon Insertion 的明确说明：

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

• 至少一个换行符(LineTerminator)分割了违规 token 和前一个 token。
• 违规 token 是 }。
  

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

从左到右解析程序，遇到一个某些文法产生式允许的 token，但是它是受限操作(Restricted Productions)，当至少一个换行符分割了受限的 token 和前一个 token，那么就在受限 token 前面自动插入分号。

然而，上述规则有一个附加的优先条件：如果插入分号后解析结果是空语句，或如果插入分号后它成为 for 语句头部的两个分号之一，那么不会自动插入分号。

注：以上说明翻译较为别扭可以多读几遍或阅读英文原文 ECMA-262 - Automatic Semicolon Insertion

分号自动插入的情况

简要归纳下，自动分号插入以换行为基础，解析器会尽量将新行并入当前行，当且仅当符合 ASI 规则时才会将新行视为独立的语句

主要有以下自动插入规则：

1. 当新的一行并入当前行将构成非法语句不能正确解析时，将自动插入分号
2. 当新行以}开头时，即代码块的结束位置，将自动插入分号
3. 当以return语句结束时, 在行末自动插入分号
4. 当以break语句结束时, 在行末自动插入分号
5. 当以throw语句结束时,在行末自动插入分号
6. 当以continue语句结束时, 在行末自动插入分号
7. 当以 es6 的 yield 语句结尾时，在行末自动插入分号
8. ++、-- 后缀表达式作为新行的开始，在行首自动插入分号
9. 源代码文件末尾自动插入号
   

如上所示，如果没加分号，运行这段代码这段代码将报错。

不能省略分号的情况

通常，如果语句以(、[、 /、+、-开头时，就有可能被解释为上一行语句的一部分。实际中以/、+、-开头的语句很少。但是以(、[开头的语句则很常见，通常我可以在行首防御性的加上分号。

前面，我们了解分号的自动插入，现在我们来看一些示例

let hey = 'hey'
['liu','liuxing'].forEach(console.log)

思考一秒种上面的结果是什么？运行这段代码会抛出

Uncaught TypeError: Cannot read property 'forEach' of undefined

基于规则 1 上面代码将会被解析成如下代码

let hey = 'hey'['liu','liuxing'].forEach(console.log)

可以看出，使用[开头的语句，前面没有分号，很可能导致出错。

再来看一个(开头的语句的示例代码

const a = 1
const b = 2
const c = a + b
(a + b).toString()

你会以为上面的代码结果是“3”吗？但是实际上它会抛出错误b is not a function，因为根据 ASI 规则，它会被解析成如下代码：

const a = 1;const b = 2;const c = a + b(a + b).toString()

我们就不一一介绍/, +, - 作为语句开头的情况了，这种情况比较少，大家可以自己试试。只需要记住语句以(、[、 /、+、-开头时，语句前需要加上分号即可！

下面再在看看使用return的情况，

(() => {
  return
  {
    name: 'Liu Xing'
  }
})()

你的期待值是不是返回一个带有 name 的对象，但是它却返回了undefined。这是 ASI 自动在return给加上了分号。在这儿就得正确的换行以确保代码正确运行。我们可以看出除了正确的的分号，我们还需要正确合理的换行来使代码结构更为清晰。

总结

我们了解了 JavaScript 的分号自动插入机制，知道了 JavaScript 什么时候会自动加入分号，在(、[、 /、+、-开头时需要我们准确的加上分号。Automatic Semicolon Insertion 机制为我们提供了两种选择，加还是加分号？完全看你或你的团队的喜好了，现在我们也有prettier、Eslint 等工具来自动统一风格。

到此这篇关于JavaScript中分号的文章就介绍到这了,更多相关JavaScript分号内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！