结论

  • 没关系
  • 有或没有分号的陷阱
  • 使用 ESLint 检测陷阱
  • 我不使用分号

什么是自动分号插入?

自动插入分号

  • 这种机制允许您在不使用分号的情况下编写代码,编译器会检测到行尾并插入分号。
  • ECMAScript 中指定了自动分号插入的机制,并且自动分号插入可跨 JavaScript 引擎移植
  • 自动分号插入有陷阱和规则需要理解

规则 1:分号仅插入在“}”标记之前、换行符之后或程序末尾。

{ 1
2 } 3

// 上記の文は、 ASI によって次のように変換される

{ 1
;2 ;} 3;

第二条规则:只有在无法对下一个输入标记进行词法分析时才插入分号。

不插入分号的情况

a = b
(f());

// これは1個の文として正しく解析できるので、次のよう変換される

a = b(f());

插入分号的情况

a = b
f();

// これは2つの別々の文として解析される
// なぜなら次のように解釈したら解析エラーとなるから
// a = b f();

a = b;
f();

这个规则有个坑,要注意下面句子的开头,判断分号是否可以省略

有问题的五个符号是([+-/
如果下一个句子是所讨论的五个符号中的任何一个,则不插入分号。

[的陷阱

a = b
['?', '?', '?'].forEach((key) => {
  console.log(fluits[key]['price']);
);

// 後続の文が [ で始まるので、1つの文として解析される

a = b['?', '?', '?'].forEach((key) => {
  console.log(fluits[key]['price']);
);

/的陷阱

a = b
/Error/i.test(str) && fail();

// 以下のように変換される

a = b / Error / i.test(str) && fail();

如果总是写分号就没有问题吗?

并不真地。
即使在解析时不会产生错误的部分,编译器也会强制插入分号。

return
{ };

// これは次の3つの文として解析されてしまう

return;
{ }
;

插入分号(<;>)的地方如下

  • expr <;> ++, expr <;> --
  • continue <;> lbl
  • break <;> lbl
  • return <;> expr
  • throw <;> expr
  • yield <;> expr
  • yield <;> * expr
  • (param) <;> => {}
  • async <;> function, async <;> prop(), async <;> function*, async <;> *prop()
  • async <;> (param) <;> => {}

规则 3:永远不要在 for 循环的头部插入分号作为分隔符

分号必须明确写在 for 循环中

for (let i = 0 // parse error
    i < n
    i++) {
    // 何かしらの処理
}

// 明示的にセミコロンを書く必要がある
for (let i = 0 ; i < n ; i++) {
    total *= i
    // 何かしらの処理
}

你更倾向哪个?

优点 过失
带分号 更少的陷阱 它在不写分号的现代语言中看起来很老式。
没有分号 干净的代码
少打字
不知道分号插入规则有很多危险

TC39 发生了什么?

TC39 没有定义是否包含。
那里有很多不使用分号的 JavaScript 代码,所以说使用分号是正确的并且它只是碰巧在没有分号的情况下工作似乎很苛刻。

我应该怎么办?

如果出现意外行为,请使用 EsLint 发出警告。

no-unreachable 总是写分号时的规则
不可达

no-unexpected-multiline 省略分号的规则
没有意外的多行

使用 ESLint 可以检测到意外行为。
让我们为使用分号或不使用分号的人编写有趣的代码!


原创声明:本文系作者授权爱码网发表,未经许可,不得转载;

原文地址:https://www.likecs.com/show-308623306.html

相关文章: