Einführung in die Kenntnisse der Javascript-Semikolonregeln (mit Beispielen)

Der Inhalt dieses Artikels ist eine Einführung in die Javascript-Semikolonregeln (mit Beispielen). Ich hoffe, er wird Ihnen als Referenz dienen.

Nehmen Sie sich etwas Zeit, um die Semikolon-Regeln in JS herauszufinden~~~Ob Ihnen der Modus mit einem Semikolon am Ende gefällt oder das Semikolon weggelassen wird

Szenarien, in denen Semikolons erlaubt sind

Semikolons dürfen im Allgemeinen am Ende der meisten Anweisungen stehen, wie z. B. do-while-Anweisungen, var-Anweisungen, Ausdrucksanweisungen, continue, return, break-Anweisungen, throw, Debugger usw.

Chestnut:

do Statement while ( Expression ) ;

4+4;

f();

debugger;

hat nur ein Semikolon; es kann eine leere Anweisung darstellen – es ist in JS zulässig. Beispielsweise kann ;;; in drei leere Anweisungen (leere Anweisung) analysiert werden.

Die leere Anweisung kann zur Unterstützung bei der Generierung einer legalen Syntax verwendet werden. Das Parsing-Ergebnis, zum Beispiel:

while(1);

Wenn am Ende kein Semikolon steht, tritt ein Parsing-Fehler auf – auf die Bedingungsschleife muss eine Anweisung

folgen

Das Semikolon erscheint auch in der for-Schleife für die Anweisung (Ausdruck; Ausdruck; Ausdruck)

Schließlich erscheint das Semikolon auch in einer Zeichenfolge oder einem regulären Ausdruck – was auf das Semikolon selbst hinweist

Szenarien, in denen das Semikolon weggelassen werden kann

In einigen Szenarien kann das Semikolon beim Parsen der Anweisung automatisch eingefügt werden:

Schreiblich weggelassen => Wenn der Parser beim Parsen feststellt, dass es fehlt, kann es nicht korrekt analysiert werden => Semikolons automatisch hinzufügen

also Es ist notwendig, die Szenarien zu klären, in denen Semikolons automatisch eingefügt werden können , und klären Sie die Situationen, in denen Semikolons nicht automatisch eingefügt werden und Analysefehler verursachen

Regel 1: Wenn das nächste Token (anstößiges Token) und das aktuell analysierte Token (vorheriges Token) keine rechtliche Aussage bilden können, und Wenn eine oder mehrere der folgenden Bedingungen erfüllt sind, wird vor dem fehlerhaften Token ein Semikolon eingefügt:

• das fehlerhafte Token und das vorherige Token sind durch mindestens ein Zeilenumbruchzeichen (LineTerminator) getrennt, und die Auswirkung von Das Einfügen eines Semikolons darf nicht als leere Anweisung (leere Anweisung) analysiert werden.
• anstößiges Token ist🎜>
vorheriges Token ist), und das eingefügte Semikolon wird als abschließendes Semikolon des do analysiert -while-Anweisung

Es ist auch eine Bedingung mit höherer Priorität zu berücksichtigen: Wenn das eingefügte Semikolon analysiert wird, handelt es sich um eine leere Anweisung oder eines der beiden Semikolons am Kopf einer for-Anweisung, in der In diesem Fall wird kein Semikolon eingefügt (außer dem abschließenden Semikolon der do-while-Anweisung)

Regel 2: Wenn das Parsen die Quelle erreicht. Am Ende der Codedatei (Eingabestream) wird automatisch ein Semikolon eingefügt hinzugefügt, um das Ende des Parsens zu markieren

Regel 3: Anweisungen, die der eingeschränkten Produktionsgrammatik entsprechen – es ist schwierig zu übersetzen, können Sie einfach die Hauptbeschreibung davon lesen Situation ist: Ein Zeilenumbruch erscheint dort, wo kein Zeilenumbruch erscheinen sollte, was dazu führt, dass ein Semikolon eingefügt wird, wodurch sich die Bedeutung des ursprünglichen Satzes ändert

Gleichzeitig, wenn die folgenden Bedingungen erfüllt sind, a Vor dem fehlerhaften Token wird automatisch ein Semikolon eingefügt:

der fehlerhafte Token und der vorherige Token bilden die eingeschränkte Produktionsanweisung der kombinierten Syntax
• der fehlerhafte Token erscheint im Teil [hier kein LineTerminaator]. der Beschreibung der eingeschränkten Produktionsanweisung (das Token wäre das erste Token für ein Terminal oder Nicht-Terminal, das unmittelbar auf die Anmerkung „[hier kein LineTerminator]“ innerhalb der eingeschränkten Produktion folgt)
• Zwischen den Verstößen steht mindestens ein Zeilenumbruchzeichen Token und vorheriger Token (LineTerminator)

Darunter umfasst die eingeschränkte Produktion und nur Folgendes:

UpdateExpression[Yield, Await]:
  LeftHandSideExpression[?Yield, ?Await] [no LineTerminator here] ++
  LeftHandSideExpression[?Yield, ?Await] [no LineTerminator here] --

ContinueStatement[Yield, Await]:
  continue;
  continue [no LineTerminator here] LabelIdentifier[?Yield, ?Await];

BreakStatement[Yield, Await]:
  break;
  break  [no LineTerminator here]  LabelIdentifier[?Yield, ?Await];

ReturnStatement[Yield, Await]:
  return;
  return  [no LineTerminator here]  Expression  [+In, ?Yield, ?Await];

ThrowStatement[Yield, Await]:
  throw [no LineTerminator here] Expression [+In, ?Yield, ?Await];

ArrowFunction[In, Yield, Await]:
  ArrowParameters[?Yield, ?Await] [no LineTerminator here] => ConciseBody[?In]

YieldExpression[In, Await]:
  yield [no LineTerminator here] * AssignmentExpression[?In, +Yield, ?Await]
  yield [no LineTerminator here] AssignmentExpression[?In, +Yield, ?Await]

Einfache Zusammenfassung:

Bei Verwendung der a++-Anweisung wird die Variable und ++ müssen sich in derselben Zeile befinden, andernfalls wird vor ++ ein Semikolon eingefügt, was zu einer unterschiedlichen Semantik führt

Wenn auf „return throw yield continue break“ ein Zeilenumbruch folgt, wird automatisch ein Semikolon hinzugefügt

Pfeilfunktion => Es sollte kein Zeilenumbruchzeichen vor

Chestnut& stehen. Möglicherweise nicht wie erwartet

Möglicherweise nicht wie erwartet

// 相当于 42;"hello"
42
"hello"

// offending token 是 }
if(x){y()}

// previous token 是 ) 且插入分号是 do while 语句的结束
var a = 1
do {a++} while(a<100)
console.log(a)

//  不会解析成 b++ 因为 b和++之间存在换行符，会在 b 之后自动插入分号
a = b
++c

Möglicherweise nicht wie erwartet

const hey = 'hey'
const you = 'hey'
const heyYou = hey + ' ' + you

['h', 'e', 'y'].forEach((letter) => console.log(letter))

Sie erhalten die Fehlermeldung Uncaught TypeError: Cannot read property 'forEach' of undefined , da die Verbindung zwischen Ihnen und ['h', 'e', ​​​​'y'] die zulässige Syntax treffen kann , sodass nicht automatisch ein Semikolon dazwischen eingefügt wird. Entgegen den Erwartungen versucht JS, den Code wie folgt zu analysieren:

const hey = 'hey';
const you = 'hey';
const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

Sehen Sie sich eine andere Situation an:

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

führt zu einem

-Fehler. weil es interpretiert wird als: TypeError: b is not a function

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

Mit Ausnahme der do while-Anweisung wird kein Semikolon eingefügt, da andere Situationen leerer Anweisungen oder zwei notwendige Semikolons als Kopf einer for-Anweisung eingefügt werden:

if (a > b)
else c = d

for (a; b
)

Keine der oben genannten Anweisungen sind zulässige JS-Anweisungen und führen zu einem Fehler.

Daher darf bei jeder der folgenden Kastanien kein einziges Semikolon weggelassen werden! !

// for循环没有循环体的情况，每一个分号都不能省略
for (node=getNode();
     node.parent;
     node=node.parent) ;

Sehen Sie sich ein weiteres Beispiel mit detaillierten Anmerkungen an:

var         // 这一行不会插入分号 ，因为 下一行的代码不会破坏当前行的代码  
    a = 1   // 这一行会插入分号   
let b = 2   

// 再比如这种情况，你的原意可能是定义 `a` 变量，再执行 `(a + 3).toString()`，
// 但是其实 JavaScript 解析器解析成了，`var a = 2(a + 3).toString()`，
// 这时会抛出错误 Uncaught TypeError: 2 is not a function
var a = 2
(a + 3).toString()

// 同理,下面的代码会被解释为 `a = b(function(){...})()`
a = b
(function(){
...
})()

Die oben genannten Fälle sind alle Fälle, in denen Regel 1 nicht getroffen wird und kein Semikolon eingefügt wird, was dazu führt, dass die Analyse nicht den Erwartungen entspricht

Schauen wir uns ein Beispiel an, das auf Regel 3 basiert: Von

(() => {
  return
  {
    color: 'white'
  }
})()

wird erwartet, dass es ein Objekt zurückgibt, das das Farbattribut enthält, aber tatsächlich wird nach der Rückgabe ein Semikolon eingefügt, was dazu führt, dass undefiniert zurückgegeben wird Ende. Dies kann erreicht werden, indem man es direkt nach der Rückgabe in geschweifte Klammern setzt { :

(() => {
  return {
    color: 'white'
  }
})()

Best Practice zum Weglassen von Semikolons

不要使用以下单个字符 ( [ / + - 开始一行 ， 会极有可能和上一行语句合在一起被解析( ++ 和 -- 不符合单个 +、- 字符)

注意 return break throw continue 语句，如果需要跟随参数或表达式，把它添加到和这些语句同一行，针对 return 返回内容较多的情况 (大对象，柯里化调用，多行字符串等)，可以参考规则1，避免命中该规则而引起非预期的分号插入，比如：

return obj.method('abc')
          .method('xyz')
          .method('pqr')
 
return "a long string\n"
     + "continued across\n"
     + "several lines"
 
totalArea = rect_a.height * rect_a.width
          + rect_b.height * rect_b.width
          + circ.radius * circ.radius * Math.PI

后缀运算符 ++ -- 需要和操作变量在同一行使用

当然大部分工程化情况下，我们最终会配合Eslint使用带分号或省略分号规范~~~

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！

Das obige ist der detaillierte Inhalt vonEinführung in die Kenntnisse der Javascript-Semikolonregeln (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!