Dois-je ajouter des points-virgules au code JS ?

Les points-virgules en JavaScript divisent les communautés. Certaines personnes préfèrent de toute façon utiliser des points-virgules. D'autres préfèrent ne pas ajouter de point-virgule.

À l'automne 2017, après des années d'utilisation des points-virgules, j'ai décidé d'essayer de me passer des points-virgules lorsque cela était nécessaire et j'ai configuré Prettier pour supprimer automatiquement les points-virgules de mon code, à moins que la structure de code nécessaire ne l'exige.

Maintenant, je trouve que ne pas utiliser de points-virgules est très naturel, je pense que de tels codes sont plus beaux, ils sont plus concis et lisibles.

Cela est tout à fait possible car JavaScript ne nécessite pas strictement de points-virgules. Lorsqu’un point-virgule est nécessaire quelque part, il l’ajoute en coulisses.

Ce processus est appelé insertion automatique de point-virgule.

Il est important de comprendre les règles d'utilisation des points-virgules pour éviter d'écrire du code bogué qui se comporte différemment de ce à quoi vous vous attendez.

Règles JavaScript pour l'ajout automatique de points-virgules

L'interpréteur JavaScript ajoutera automatiquement des points-virgules lorsqu'il détecte les circonstances particulières suivantes lors de l'interprétation du code source :

• Lorsque la ligne de code suivante commence, interrompez la ligne de code en cours (le code peut être écrit sur plusieurs lignes)

• Lorsque la ligne suivante commence par }, fermez le bloc actuel

• Lorsque la fin du code source est atteinte

• Lorsque l'instruction return est sur la ligne actuelle

• Quand l'instruction break est sur la ligne actuelle

• Quand le lancer est déclaré sur la ligne actuelle

• Quand continuer est déclaré sur la ligne actuelle

avec vos exemples de code

Pensez différemment à ces règles, voici quelques exemples.

Regardez l'exemple :

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

Vous obtiendrez l'erreur Uncaught TypeError : Impossible de lire la propriété 'forEach' de undefined car, sur la base de la règle 1, JavaScript tentera d'interpréter le code comme

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

Ce code :

(1 + 2).toString()

s'imprime sous la forme "3".

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

génère à la place une TypeError : b n'est pas une exception de fonction car JavaScript essaie de l'interpréter comme

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

Un autre exemple basé sur la règle 4 :

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

Vous vous attendez à ce que la valeur de retour de cette fonction immédiatement appelée soit un objet contenant une propriété color, mais ce n'est pas le cas. Au lieu de cela, il n'est pas défini car JavaScript insère un point-virgule après le retour.

Au lieu de cela, vous devriez mettre le crochet gauche après le retour :

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

Vous pensez que ce code affichera '0' :

1 + 1
-1 + 1 === 0 ? alert(0) : alert(2)

Au lieu de cela, il affichera 2, car JavaScript selon à la Règle 1 sera interprété comme :

1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

Conclusion

Attention. Certaines personnes ont un problème avec les points-virgules. Je m'en fiche, cet outil nous donne la possibilité de ne pas l'utiliser, afin d'éviter d'utiliser des points-virgules.

Je ne suggère rien, je vous laisse simplement prendre votre propre décision.

Il faut juste noter que même si la plupart du temps ces scénarios de base n'apparaissent jamais dans votre code.

Extrayez quelques règles, comme suit :

• Utilisez les déclarations de retour avec précaution. Si vous renvoyez quelque chose, ajoutez-le à la même ligne que le contenu renvoyé (semblable à casser, lancer, continuer)

• Ne commencez jamais une ligne avec des parenthèses, celles-ci peuvent se concaténer avec la ligne précédente pour former un appel de fonction ou une référence d'élément de tableau

Enfin, testez toujours votre code pour vous assurer qu'il fait ce dont vous avez besoin.

Tutoriel recommandé : "Tutoriel JS"

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!