La différence entre ajouter des points-virgules et ne pas ajouter de points-virgules dans le code JS

Cette question a été abordée dans de nombreux articles dans la spécification ESlint, elle est également divisée en deux camps selon qu'il faut ou non ajouter un point-virgule. ou pas, la clé est que vous devez comprendre l'impact des points-virgules sur JavaScript. Avant de commencer, vous pouvez jeter un œil à la question d'entretien suivante :

Ce code peut-il fonctionner normalement ?

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

Si vous exécutez ce code, l'erreur suivante apparaîtra :

Uncaught TypeError: 1 is not a function

C'est quoi ce bordel ! 1 is not a function ? Nous n'avions pas l'intention d'exécuter le chiffre 1. Pourquoi le chiffre 1 n'est-il pas une fonction ? Ce genre d'erreur est difficile à trouver et tourne souvent autour de la ligne de code problématique ? Cette erreur doit être due au fait que le code ci-dessus est considéré comme la même ligne au moment de l'exécution, et le concept est le suivant :

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

Par conséquent, le () de la fonction immédiate est ajouté à 1, qui est un syntaxe pour appeler une fonction, Par conséquent, une erreur de 1 is not a function se produira. Pour éviter cette erreur, vous devez utiliser un point-virgule :

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

ASI ajoute automatiquement un point-virgule

ASI est le abréviation de "Automatic Semicolon Insertion", lors de l'exécution Parfois, un point-virgule sera automatiquement inséré dans certaines lignes brisées de code Ce mécanisme permet à certains codes de s'exécuter normalement sans ajouter de point-virgule, comme dans l'exemple suivant : <.>

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

En raison du

dans le code est une expression unaire, qui ne peut placer des variables que sur le côté gauche de l'expression ++ ou sur le côté droit de Sans le mécanisme ASI, le. le code sera converti en instructions d'erreur comme . Mais heureusement, avec ASI, des points-virgules seront automatiquement ajoutés lors du fonctionnement réel, donc l'erreur ci-dessus ne se produira pas. La relation entre var b = 1 ++ b

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

return et point-virgule

Regardons un autre exemple dans le code suivant, écrivez la valeur à renvoyer après une ligne vide après

. de l'opération ? return

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

En raison de la correction de l'ASI dans ce code de programme, un point-virgule sera ajouté après

, donc return est séparé de la valeur de retour attendue et le contenu de return est vide. valeur, le résultat final ne peut être que return. undefined

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

Comment gérer les points-virgules ?

À l'origine, ASI était par bonne intention et était utilisé pour corriger des extraits de code qui n'incluaient pas de points-virgules, mais il n'a pas joué son rôle à certains endroits . (Par exemple, la fonction immédiate introduite au début de cet article), entraînant des erreurs dans le code ; même certains codes ne provoqueront pas d'erreurs, mais les résultats d'exécution de votre code seront des milliers de kilomètres différents de ceux attendus.

La manière de résoudre le problème ASI est la suivante :

Dans tous les cas, ajoutez des points-virgules. C'est à vous de décider de la répartition du code
• .
N'oubliez pas que les points-virgules ne seront pas ajoutés automatiquement. Lorsque la règle du point-virgule ne sera pas automatiquement insérée, ajoutez manuellement

ne sera pas automatiquement ajoutée. > est la suivante :

n'ajoutera pas

automatiquement les règles de point-virgule :

Le code de la nouvelle ligne commence à partir des caractères

,
1. , (. Ce genre de situation [ apparaît généralement directement, entraînant l'échec de l'exécution du code. /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)

Les nouvelles lignes commencent par

,
1. , +, - La plupart de ces situations affecteront les résultats de l'opération, elles doivent donc être fusionnées en une seule. doubler. *％

   var a = 2
   var b = a
   +a

Les nouvelles lignes commencent par

ou
1. Cette utilisation se produit souvent, principalement parce que la séparation est ajoutée pour éviter que le code ne soit trop long. Cette situation n'affecte pas l'exécution. et rend le code plus facile à lire s'il est utilisé à bon escient. ,.

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

Si vous rencontrez une situation où vous devez ajouter un point-virgule, en plus d'ajouter un point-virgule à la fin de l'instruction, vous pouvez également ajouter le point-virgule devant "ne sera pas automatiquement ajoutez un point-virgule", par exemple

lui-même n'ajoutera pas automatiquement un point-virgule. Vous pouvez ajouter

au début lorsque cela est nécessaire (la spécification ESLint Standard JS utilise cette méthode pour éviter les erreurs). ()

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

;Résumé

Certaines personnes pensent que ne pas ajouter de points-virgules peut rendre le code plus propre et plus rationalisé, et dans la plupart des cas, il n'y aura pas d'erreurs, donc beaucoup de gens tapent le code Pas de point-virgule est ajouté.

Cependant, je préfère des spécifications plus strictes, peut-être parce que je suis passé du back-end au front-end et que j'y suis habitué. Quant à savoir comment choisir, tant que vous comprenez les restrictions de fonctionnement, quel que soit le style qui vous convient, tant que vous l'aimez.

Pour plus de connaissances sur la programmation, veuillez visiter :

Introduction à la programmation

 ! !

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!