Introduction à la connaissance des règles de point-virgule Javascript (avec exemples)

Le contenu de cet article est une introduction aux règles de point-virgule Javascript (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Prenez le temps de comprendre les règles du point-virgule dans JS~~~Que vous aimiez le mode avec un point-virgule à la fin ou en omettant le point-virgule

Scénarios où les points-virgules sont autorisés

Les points-virgules sont généralement autorisés à apparaître à la fin de la plupart des instructions, telles que les instructions do-while, var, expression, continue, return, break, throw, debugger, etc.

Chestnut :

do Statement while ( Expression ) ;

4+4;

f();

debugger;

n'a qu'un seul point-virgule ; il peut représenter une instruction vide - c'est légal en JS. Par exemple, ;;; peut être analysé en trois instructions vides (instruction vide)

Empty. L'instruction peut être utilisée pour aider à la génération de résultats d'analyse grammaticalement légaux, tels que :

while(1);

S'il n'y a pas de point-virgule à la fin, une erreur d'analyse se produira - la boucle conditionnelle doit être suivie d'une instruction

Le point-virgule apparaîtra également dans la boucle for for (Expression; Expression; Expression) Statement

Enfin, le point-virgule apparaîtra également dans la chaîne ou l'expression régulière - indiquant le point-virgule lui-même

Le point-virgule peut être omis Scénarios

Dans certains scénarios, l'analyseur insérera automatiquement le point-virgule si nécessaire lors de l'analyse de l'instruction. Le processus approximatif peut être compris comme suit :

Omis par écrit => Lorsque l'analyseur analyse S'il s'avère manquant, il ne sera pas analysé correctement => Ajouter automatiquement des points-virgules

Il est donc nécessaire de clarifier les scénarios où les points-virgules peuvent être automatiquement insérés , et clarifier les situations dans lesquelles les points-virgules ne seront pas automatiquement insérés et provoqueront des erreurs d'analyse

Règle 1 : Lorsque le jeton suivant (jeton incriminé) et le jeton actuellement analysé (jeton précédent) ne peuvent pas former une déclaration légale, et une ou plusieurs des conditions suivantes sont remplies, un point-virgule sera inséré avant le jeton incriminé :

• le jeton incriminé et le jeton précédent sont séparés par au moins un caractère de nouvelle ligne (LineTerminator), et l'effet de l'insertion d'un point-virgule ne doit pas être analysée comme une instruction vide (instruction vide)
• le jeton incriminé est>
• le jeton précédent l'est), et le point-virgule inséré sera analysé comme le point-virgule final du do -while instruction

Il existe également une condition de priorité plus élevée à considérer : si le point-virgule inséré sera analysé comme une instruction vide, ou l'un des deux premiers points-virgules d'une instruction for, et qu'aucun point-virgule ne le sera être inséré (sauf pour le point-virgule final de l'instruction do-while)

Règle 2 : Lorsque l'analyse atteint la fin du fichier de code source (flux d'entrée), un point-virgule sera automatiquement ajouté pour marquer la fin d'analyse

Règle 3 : Déclarations conformes à la grammaire de production restreinte - c'est difficile à traduire, si vous ne comprenez pas, vous pouvez directement En regardant le marron, cette situation décrit principalement : l'apparition d'une nouvelle ligne caractère là où un caractère de nouvelle ligne ne doit pas apparaître provoque l'insertion d'un point-virgule, provoquant le changement du sens de l'instruction originale

En même temps, si les conditions suivantes sont remplies, un point-virgule sera automatiquement inséré avant le jeton incriminé. N° :

• le jeton incriminé et le jeton précédent forment une déclaration de production restreinte syntaxique
• le jeton incriminé apparaît dans la partie [pas de LineTerminaator ici] de la description de l'instruction de production restreinte ( le jeton serait le premier jeton pour un terminal ou un non-terminal suivant immédiatement l'annotation « [pas de LineTerminator ici] » dans la production restreinte)
• Il y a au moins un caractère de nouvelle ligne entre le jeton incriminé et le jeton précédent (LineTerminator)

La production restreinte inclut et uniquement les éléments suivants :

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]

Résumé simple :

Lors de l'utilisation de l'instruction a++, la variable et ++ doivent être sur le même ligne, sinon ce sera avant ++ L'insertion d'un point-virgule entraîne une sémantique différente

Si return throw return continue break est suivi d'une nouvelle ligne, un point-virgule sera ajouté automatiquement

=> de la fonction flèche. Il ne doit y avoir aucun caractère de nouvelle ligne avant

Châtaignes& peut ne pas répondre à la situation attendue

Conforme à la situation attendue

// 相当于 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

Peut ne pas répondre à la situation attendue. situation

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

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

Vous recevrez l'erreur Uncaught TypeError: Cannot read property 'forEach' of undefined , car la connexion entre vous et ['h', 'e', ​​​​​​'y'] peut atteindre la syntaxe légale, donc un point-virgule ne sera pas automatiquement inséré entre eux - contrairement aux attentes, JS essaie d'analyser le code comme :

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

Regardez une autre situation :

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

provoquera une erreur TypeError: b is not a function car elle sera interprétée comme :

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

À l'exception de l'instruction do while, il n'y aura pas d'autres situations où un point-virgule est inséré comme une instruction vide, ou comme deux nécessaires points-virgules en tête d'une instruction for :

if (a > b)
else c = d

for (a; b
)

Aucun des éléments ci-dessus n'est une déclaration JS légale et provoquera une erreur

Par conséquent, chaque point-virgule dans la châtaigne suivante ne peut pas être omis ! !

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

Regardez un autre exemple avec des annotations détaillées :

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

Les cas ci-dessus sont tous des cas où la règle 1 n'est pas respectée et un point-virgule n'est pas inséré, ce qui rend l'analyse incohérente avec des attentes

Regardez un exemple basé sur la règle 3 :

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

Il est prévu de renvoyer un objet contenant l'attribut color, mais en fait un point-virgule sera inséré après le retour, ce qui entraîne le retour d'undéfini à la fin. OK Meilleure pratique pour omettre les points-virgules en plaçant des accolades { immédiatement après le retour :

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

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

注意 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视频教程栏目！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!