Der Unterschied zwischen dem Hinzufügen von Semikolons und dem Nicht-Hinzufügen von Semikolons im JS-Code

Dieses Problem wurde in vielen Artikeln diskutiert. In der ESlint-Spezifikation wird es auch in zwei Lager unterteilt, je nachdem, ob ein Semikolon hinzugefügt werden soll oder nicht Bevor Sie beginnen, können Sie einen Blick auf die folgende Interviewfrage werfen:

Kann dieser Code normal ausgeführt werden?

var a = 1
(function() {
  console.log(2)
})()

Wenn Sie diesen Code ausführen, wird der folgende Fehler angezeigt:

Uncaught TypeError: 1 is not a function

Was zum Teufel! 1 ist keine Funktion? Wir hatten nicht vor, die Nummer 1 auszuführen. Warum ist die Nummer 1 keine Funktion? Diese Art von Fehler ist schwer zu finden und kreist oft um die problematische Codezeile. Dieser Fehler muss darauf zurückzuführen sein, dass der obige Code zur Laufzeit als dieselbe Zeile betrachtet wird. Das Konzept ist wie folgt: 1 is not a function ？我们没有打算运行数字 1，为什么说数字 1 不是函数，这种错误是很难找到原因的，经常会在出问题的代码行上打转。这个错误必然是上吗的代码在运行时被看作是同一行，其概念如下：

var a = 1(function() { /* */ })()

因此立即函数的 () 被附加在 1 上，这是一个调用函数的语法，所以会产生 1 is not a function 的错误，想要避免这个错误就需要使用分号：

var a = 1 // 随便把分号放在哪里，只要能隔开就行
;(function() {
  console.log(2)
})()

ASI 自动加入分号

ASI是 “Automatic Semicolon Insertion” 的缩写，在运行时会往有些折行的代码中自动插入分号，这个机制可以使部分代码在没有加入分号时也能正常运行，比如下面的例子：

var b = 1
++b
console.log('b', b)

由于代码中的 ++ 属于一元表达式，它只能在表达式的左边或右边放置变量，如果没有 ASI 的机制，代码会被转换为 var b = 1 ++ b 这样的错误语句。不过好在有 ASI，在实际运行时会自动被加入分号，也就不会出现上面的错误。

var b = 1;
++b;
console.log('b', b); // 2

return 与分号的关系

再来看一个例子，下面的代码在 return 的后面空一行后再写要返回的值，那么问运行结果是什么呢？

function fn() {
  return 
  '小明'
}
console.log(fn())

这段程序代码因为 ASI 的修正，return 的后面会被加上一个分号，所以 return 与预期返回的值被分开了，结果 return 的内容为空值，最终的结果也只能是 undefined 。

function fn() {
  return;
  '小明';
}
console.log(fn()); // undefined

到底应该怎样处理分号

本来 ASI 是出于一片好心，用来修正没有加入分号的代码片段，但偏偏在有的地方并没有发挥它的作用（例如本文一开始所介绍的立即函数），导致代码出现了错误；甚至有些代码不会出错，但会使你的代码执行结果和预期相差万里。

解决 ASI 问题的方式如下：

• 无论如何都要加上分号，完全由自己决定代码的分割
• 牢记不会自动加入分号的规则，当不会自动插入分号时，则手动加入

不会被自动加入分号的规则

下面时各种不会自动加入分号的规则：

1. 新行的代码是从  (、[、/  字符开始的，这类情况一般会直接出现 Uncaught TypeError 从而导致代码无法运行。

var a = 1
var b = a
(a + b).toString()

var a = 1
[1,2,3].forEach(bar)
 
(function() { })()
(function() { })()
 
var a = 1
var b = a
/test/.test(b)

1. 新行以 +，-，*，％ 开始，这类情况大多会影响运算结果，所以应该合并为一行。

var a = 2
var b = a
+a

1. 新行以 , 或 . 开始，这种用法经常会出现，主要是为了避免代码过长而加入的分隔，这种情况并不会影响运行，如果善用的话会使代码更容易阅读。

var a = 2
var b = a
  .toString()
console.log(typeof b)
 
var a = 1
,b = 2 // b 同样会被 var 声明

如果遇到需要加入分号的情况，除了可以在语句的末尾加入分号外，也可以把分号加在“不会自动加入分号”的最前方，例如 () 本身不会自动加入分号，在有这种需求时可以将 ;

// 运行错误
(function() { })()
(function() { })()
 
// 正确
;(function() { })()
;(function() { })()

rrreee

rrreee

rrreeeDie Beziehung zwischen Return und Semikolon

• Fügen Sie auf jeden Fall ein Semikolon hinzu, es liegt ganz bei Ihnen, zu entscheiden, wie Sie den Code aufteilen
• Denken Sie daran die Regel, dass Semikolons nicht automatisch hinzugefügt werden, wenn ein Semikolon nicht automatisch eingefügt wird, fügen Sie es manuell hinzu

1. Der Code für eine neue Zeile beginnt mit den Zeichen (, [, / , führt eine solche Situation normalerweise direkt zu einem Uncaught TypeError, wodurch die Ausführung des Codes fehlschlägt

Neue Zeilen beginnen mit +. -, *, % wirken sich hauptsächlich auf die Operationsergebnisse aus sollten in einer Zeile zusammengefasst werden.

1. Neue Zeilen beginnen mit , oder .. Diese Verwendung kommt häufig vor um die Trennung zu langer Codes zu vermeiden. Bei ordnungsgemäßer Verwendung ist der Code einfacher zu lesen.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen dem Hinzufügen von Semikolons und dem Nicht-Hinzufügen von Semikolons im JS-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!