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() { })()

Der () der unmittelbaren Funktion wird also an 1 angehängt, was a ist Aufruffunktionssyntax, sodass der Fehler 1 ist keine Funktion auftritt. Wenn Sie diesen Fehler vermeiden möchten, müssen Sie ein Semikolon verwenden:

rrreee

ASI fügt automatisch ein Semikolon hinzu

ASI ist das Abkürzung für „Automatic Semicolon Insertion“. Semikolons werden während der Laufzeit automatisch in einige unterbrochene Codezeilen eingefügt. Dieser Mechanismus ermöglicht die normale Ausführung einiger Codes ohne das Hinzufügen von Semikolons, wie zum Beispiel das folgende Beispiel:

rrreee

Da es sich bei ++ um einen unären Ausdruck handelt, können Variablen nur links oder rechts vom Ausdruck platziert werden Konvertiert werden in var b = 1 ++ b Eine solche Fehleranweisung. Aber glücklicherweise werden bei ASI Semikolons während des tatsächlichen Betriebs automatisch hinzugefügt, sodass der obige Fehler nicht auftritt.

rrreeeDie Beziehung zwischen Return und Semikolon

Schauen wir uns im folgenden Code eine Leerzeile nach return an und schreiben dann den zurückzugebenden Wert die Operation? 🎜rrreee🎜Aufgrund der ASI-Korrektur in diesem Programmcode wird nach return ein Semikolon eingefügt, sodass return vom erwarteten Rückgabewert getrennt wird und das Ergebnis ist return ist ein Nullwert und das Endergebnis kann nur undefiniert sein. 🎜rrreee🎜Wie sollen wir mit Semikolons umgehen?🎜🎜Ursprünglich hatte ASI gute Absichten und wurde verwendet, um Codefragmente zu korrigieren, die keine Semikolons enthielten, aber an einigen Stellen spielte es nicht seine Rolle (z. B. das, was am eingeführt wurde). Anfang dieses Artikels Unmittelbare Funktion), was zu Fehlern im Code führt; selbst einige Codes verursachen keine Fehler, aber die Ausführungsergebnisse Ihres Codes werden Tausende von Kilometern von den Erwartungen abweichen. 🎜🎜Der Weg, das ASI-Problem zu lösen, ist wie folgt: 🎜

• 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

🎜Wird nicht automatisch eine Semikolon-Regel hinzugefügt🎜🎜Das Folgende ist VerschiedeneWird nicht >Regeln für das automatische Hinzufügen von Semikolons: 🎜

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

rrreee

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

rrreee

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.

rrreee🎜Wenn Sie auf eine Situation stoßen, in der Sie einen hinzufügen müssen Semikolon: Zusätzlich zum Hinzufügen eines Semikolons am Ende der Anweisung können Sie auch ein Semikolon am Anfang von „fügt nicht automatisch ein Semikolon hinzu“ hinzufügen. Beispielsweise wird () selbst hinzugefügt Fügen Sie nicht automatisch ein Semikolon hinzu. Wenn Sie dies benötigen, können Sie ; code> an der Vorderseite hinzufügen (ESLint Standard JS-Spezifikation verwendet diese Methode, um Fehler zu vermeiden) 🎜rrreee🎜Zusammenfassung🎜🎜Manche Leute denken das Wenn Sie keine Semikolons hinzufügen, sieht der Code sauberer und schlanker aus. In den meisten Fällen treten jedoch keine Semikolons auf, wenn Sie Code eingeben. 🎜🎜Aber ich bevorzuge strengere Spezifikationen, vielleicht weil ich von geändert habe Vom Back-End zum Front-End, und ich bin daran gewöhnt, solange Sie die Betriebsbeschränkungen verstehen, egal welcher Stil gut ist, solange er Ihnen gefällt 🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Einführung zum Programmieren🎜!

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!