Maison > interface Web > Questions et réponses frontales > JavaScript doit-il ajouter un point-virgule ?

JavaScript doit-il ajouter un point-virgule ?

青灯夜游
Libérer: 2022-09-29 17:25:04
original
3397 Les gens l'ont consulté

Le point-virgule en JavaScript est facultatif. L'ajout ou non d'un point-virgule est principalement une question de style de codage, mais ne l'ajoutez pas pendant un moment et ne l'ajoutez pas pendant un moment. Habituellement, si une instruction commence par "(", "[", "/", "+", "-", elle peut être interprétée comme faisant partie de la ligne d'instructions précédente ; dans ce cas, vous pouvez ajouter un saut de manière défensive. au début de la ligne.

JavaScript doit-il ajouter un point-virgule ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version JavaScript 1.8.5, ordinateur Dell G3

Le point-virgule en JavaScript est facultatif. ou non est principalement une question de style de codage. Un style consiste à utiliser des points-virgules pour terminer explicitement les instructions, même si elles ne sont pas obligatoires ; un autre style consiste à utiliser le moins de points-virgules possible et à les ajouter uniquement lorsque cela est nécessaire. ne l'ajoutez pas, mais ne l'ajoutez pas pendant un moment et ne l'ajoutez pas pendant un moment

JavaScript doit-il ajouter un point-virgule ?

Le rôle du point-virgule dans le code

La fonction principale du point-virgule est : comme assertion (EOS) de. une instruction, il est utilisé pour terminer une instruction de programme, le but est de permettre à l'analyseur d'analyser le programme correctement. Dans de nombreux langages de style C, l'utilisation d'un point-virgule pour terminer explicitement une ligne d'instructions vise principalement à réduire le coût de l'instruction. développement d'un compilateur de langage, mais les compilateurs modernes sont suffisamment intelligents pour gérer les instructions multilignes. De nombreux langages n'ont pas besoin d'utiliser explicitement des terminaisons de point-virgule, telles que : Go, Scala, Ruby, Python, Swift, Groovy, etc.

Bien que JavaScript soit un langage de type C, il est différent de C et Java. Oui, le point-virgule est également facultatif en JavaScript, il dispose d'un mécanisme d'insertion automatique de point-virgule (insertion automatique de point-virgule (ASI)), appelé ASI). . Une description claire de l'insertion automatique de point-virgule dans ECMA-262 - Insertion automatique de point-virgule :

Analysez le programme de gauche à droite, lorsque vous rencontrez un jeton (jeton incriminé) qui n'est conforme à aucune production grammaticale, alors un point-virgule est. automatiquement inséré devant le jeton incriminé tant qu'une des conditions suivantes est remplie

Au moins un caractère de nouvelle ligne (LineTerminator) sépare le jeton incriminé du jeton précédent

Le jeton incriminé est }<.>. <span style="font-size: 18px;"></span></.>

Analysez le programme de gauche à droite. Le flux d'entrée des jetons est terminé. Lorsque l'analyseur ne peut pas analyser le flux de jetons d'entrée en un seul programme ECMAScript complet, un point-virgule est automatiquement inséré à la fin du fichier. flux d'entrée.

Analysez le programme de gauche à droite et rencontrez un jeton autorisé par certaines productions grammaticales, mais il s'agit d'une opération restreinte (Productions restreintes). Lorsqu'au moins un caractère de nouvelle ligne sépare le jeton restreint du jeton précédent, alors. Un point-virgule est automatiquement inséré devant les jetons restreints.

    Cependant, la règle ci-dessus a une condition de priorité supplémentaire : si le point-virgule est inséré et que le résultat analysé est une instruction vide, ou si le point-virgule est inséré et devient l'un des deux points-virgules en tête de l'instruction for, alors le point-virgule ne sera pas automatiquement inséré.
  • Remarque : La traduction de la description ci-dessus est délicate. Vous pouvez la lire plusieurs fois ou lire le texte anglais original ECMA-262 - Insertion automatique de point-virgule

La situation de l'insertion automatique de point-virgule}

  • 从左到右解析程序,tokens 输入流已经结束,当解析器无法将输入 token 流解析成单个完整 ECMAScript 程序 ,那么就在输入流的结束位置自动插入分号。

  • 从左到右解析程序,遇到一个某些文法产生式允许的 token,但是它是受限操作(Restricted Productions),当至少一个换行符分割了受限的 token 和前一个 token,那么就在受限 token 前面自动插入分号。

    然而,上述规则有一个附加的优先条件:如果插入分号后解析结果是空语句,或如果插入分号后它成为 for 语句头部的两个分号之一,那么不会自动插入分号。

注:以上说明翻译较为别扭可以多读几遍或阅读英文原文 ECMA-262 - Automatic Semicolon Insertion

分号自动插入的情况

简要归纳下,自动分号插入以换行为基础,解析器会尽量将新行并入当前行,当且仅当符合 ASI 规则时才会将新行视为独立的语句

主要有以下自动插入规则:

  • 当新的一行并入当前行将构成非法语句不能正确解析时,将自动插入分号

  • 当新行以}开头时,即代码块的结束位置,将自动插入分号

  • 当以return语句结束时,在行末自动插入分号

  • 当以break语句结束时,在行末自动插入分号

  • 当以throw语句结束时,在行末自动插入分号

  • 当以continue语句结束时,在行末自动插入分号

  • 当以 ES6 的 yield 语句结尾时,在行末自动插入分号

  • ++-- 后缀表达式作为新行的开始,在行首自动插入分号

  • 源代码文件末尾自动插入号

如上所示,如果没加分号,运行这段代码这段代码将报错。

不能省略分号的情况

通常,如果语句以([/+-开头时,就有可能被解释为上一行语句的一部分。实际中以/+-开头的语句很少。但是以([

🎜🎜Pour. Pour résumer brièvement, l'insertion automatique d'un point-virgule est la suivante. Sur la base du retour à la ligne, l'analyseur essaiera de fusionner la nouvelle ligne dans la ligne actuelle. La nouvelle ligne sera traitée comme une instruction indépendante si et seulement si elle respecte les règles ASI🎜🎜🎜. Les principales règles d'insertion automatique sont les suivantes :🎜🎜🎜🎜🎜Quand Lorsqu'une nouvelle ligne fusionnée avec la ligne actuelle constituera une instruction illégale et ne pourra pas être analysée correctement, un point-virgule sera automatiquement inséré🎜🎜🎜🎜Lorsqu'une nouvelle ligne commence avec }, qui est la fin du bloc de code, un point-virgule sera automatiquement inséré 🎜🎜🎜🎜Lorsque vous terminez par une instruction return, un point-virgule est automatiquement inséré à. la fin de la ligne🎜🎜🎜🎜Lorsque vous terminez par une instruction break, un point-virgule est automatiquement inséré à la fin de la ligne🎜 🎜🎜🎜Lorsque vous terminez par un throw instruction, un point-virgule est automatiquement inséré à la fin de la ligne🎜🎜🎜🎜Lorsque vous terminez par une instruction continue, un point-virgule est automatiquement inséré à la fin de la ligne🎜🎜 🎜🎜Lorsque vous terminez par une instruction rendement ES6, un point-virgule est automatiquement inséré à la fin de la ligne🎜🎜🎜🎜++, expression de suffixe -- comme début d'une nouvelle ligne, à Un point-virgule est automatiquement inséré au début de la ligne 🎜🎜🎜🎜 à la fin du fichier de code source, s'il n'y a pas de point-virgule, une erreur sera signalée lors de l'exécution de ce code. 🎜🎜🎜🎜Cas dans lequel le point-virgule ne peut être omis🎜🎜🎜🎜Habituellement, si l'instruction commence par (, [, /, + Lorsqu'il commence par , -, cela peut être interprété comme faisant partie de la ligne d'instructions précédente. En fait, il commence par /, +, <. il existe tr peu d commen par code>-, mais les instructions commençant par (, [ sont très courantes , et je peux généralement les ajouter de manière défensive au début de la ligne 🎜.

Plus tôt, nous avons découvert l'insertion automatique de points-virgules, regardons maintenant quelques exemples

let hey = &#39;hey&#39;
[&#39;liu&#39;,&#39;liuxing&#39;].forEach(console.log)
Copier après la connexion

Pensez une seconde au résultat ci-dessus ? L'exécution de ce code lancera

Uncaught TypeError: Cannot read property &#39;forEach&#39; of undefined
Copier après la connexion

Basé sur la règle 1. Le code ci-dessus sera analysé dans le code suivant

let hey = &#39;hey&#39;[&#39;liu&#39;,&#39;liuxing&#39;].forEach(console.log)
Copier après la connexion

On peut voir qu'en utilisant une instruction commençant par [ sans point-virgule devant cela est susceptible de provoquer un problème. [开头的语句,前面没有分号,很可能导致出错。

再来看一个(开头的语句的示例代码

const a = 1
const b = 2
const c = a + b
(a + b).toString()
Copier après la connexion

你会以为上面的代码结果是“3”吗?但是实际上它会抛出错误b is not a function,因为根据 ASI 规则,它会被解析成如下代码:

const a = 1;const b = 2;const c = a + b(a + b).toString()
Copier après la connexion

我们就不一一介绍/, +, - 作为语句开头的情况了,这种情况比较少,大家可以自己试试。只需要记住语句以([/+-开头时,语句前需要加上分号即可!

下面再在看看使用return的情况,

(() => {
  return
  {
    name: &#39;Liu Xing&#39;
  }
})()
Copier après la connexion

你的期待值是不是返回一个带有 name 的对象,但是它却返回了undefined。这是 ASI 自动在return给加上了分号。在这儿就得正确的换行以确保代码正确运行。我们可以看出除了正确的的分号,我们还需要正确合理的换行来使代码结构更为清晰。

总结

我们了解了 JavaScript 的分号自动插入机制,知道了 JavaScript 什么时候会自动加入分号,在([、 /+-

Regardons un autre exemple de code d'une instruction commençant par (

rrreeePensez-vous que le résultat du code ci-dessus est "3" ? Mais en fait, cela générera l'erreur b n'est pas une fonction, car selon les règles ASI, elle sera analysée dans le code suivant : rrreeeNous n'introduireons pas /, +, - un par un. est utilisé comme début d'une instruction. Cette situation est relativement rare. Vous pouvez l'essayer vous-même. Il vous suffit de vous rappeler que l'instruction commence par (). , [, Lorsque vous commencez par /, +, -, vous devez ajouter un point-virgule avant l'instruction. !

Jetons un coup d'œil à l'utilisation de return, 🎜rrreee 🎜Votre valeur attendue est de renvoyer un objet avec name, mais il renvoie undefined. par ASI dans return. Un point-virgule est ajouté ici. Des sauts de ligne corrects sont nécessaires pour garantir que le code s'exécute correctement. Nous pouvons voir qu'en plus des points-virgules corrects, nous avons également besoin de sauts de ligne corrects et raisonnables. rendre la structure du code plus claire 🎜

Résumé🎜🎜Nous. avez découvert le mécanisme d'insertion automatique de point-virgule de JavaScript. Sachez quand JavaScript ajoutera automatiquement des points-virgules, dans (, [, /, +<.>, <code>-Nous devons ajouter un point-virgule avec précision au début. Le mécanisme d'insertion automatique de point-virgule nous offre deux options. Cela dépend de vos préférences ou de celles de votre équipe. tels que plus joli et Eslint peuvent automatiquement unifier les styles 🎜🎜【Recommandations associées : 🎜Tutoriel vidéo javascript🎜, 🎜Vidéo de programmation de base🎜】🎜

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal