Guide JavaScript, partie 6: exceptions, points-virgules, littéraux de modèle

Les sujets de cette partie de la traduction du didacticiel JavaScript seront la gestion des exceptions, les fonctionnalités de point-virgule automatique et les littéraux de modèle.

→ Partie 1: premier programme, fonctionnalités linguistiques, normes
→ Partie 2: style de code et structure du programme
→ Partie 3: variables, types de données, expressions, objets
→ Partie 4: caractéristiques
→ Partie 5: tableaux et boucles
→ Partie 6: exceptions, points-virgules, littéraux génériques
→ Partie 7: mode strict, ce mot-clé, événements, modules, calculs mathématiques
→ Partie 8: Présentation des fonctionnalités d'ES6
→ Partie 9: Présentation des normes ES7, ES8 et ES9

Gestion des exceptions

Lorsqu'un problème se produit lors de l'exécution du code, il est exprimé comme une exception en JavaScript. Si vous ne prenez pas de mesures pour gérer les exceptions, alors, lorsqu'elles se produisent, le programme s'arrête et un message d'erreur s'affiche dans la console.

Considérez l'extrait de code suivant.

let obj = {value: 'message text'} let notObj let fn = (a) => a.value console.log(fn(obj)) //message text console.log('Before') //Before console.log(fn(notObj)) //,    console.log('After') 

Ici, nous avons une fonction que nous prévoyons d'utiliser pour traiter les objets qui ont la propriété value . Elle rend cette propriété. Si vous utilisez cette fonction aux fins prévues, c'est-à-dire pour lui transférer un objet avec lequel elle est conçue pour fonctionner, aucune erreur ne sera générée lors de son exécution. Mais si vous lui passez quelque chose d'inapproprié, dans notre cas, une variable déclarée mais non initialisée, une erreur se produit lorsque vous essayez d'accéder à la propriété value de valeur undefined . Un message d'erreur apparaîtra dans la console, l'exécution du programme s'arrêtera.

Voici à quoi cela ressemble lorsque vous exécutez ce code dans Node.js.


Exception TypeError dans Node.js

Si quelque chose comme cela se produit dans le code JS d'une page Web, un message similaire sera envoyé à la console du navigateur. Si cela se produit dans un vrai programme, par exemple - dans le code du serveur Web, ce comportement est extrêmement indésirable. Ce serait bien d'avoir un mécanisme qui permet, sans arrêter le programme, de rattraper l'erreur, puis de prendre des mesures pour la corriger. Un tel mécanisme existe en JavaScript, il est représenté par la construction try...catch .

Tryconstruction essayer ... attraper

La construction try...catch vous permet d'attraper et de gérer les exceptions. À savoir, il comprend un bloc try , qui comprend du code qui peut provoquer une erreur, et un catch , dans lequel le contrôle est transféré lorsqu'une erreur se produit. try blocs d' try n'incluent pas absolument tout le code du programme. Les parties de celui-ci qui peuvent provoquer des erreurs d'exécution y sont placées. Par exemple, les appels à des fonctions qui doivent fonctionner avec certaines données reçues de sources externes. Si la structure de ces données est différente de celle attendue par la fonction, une erreur peut se produire. Voici à quoi ressemble le diagramme de conception try...catch .

 try { // ,     } catch (e) { //  } 

Si le code est exécuté sans erreur, le catch (gestionnaire d'exceptions) n'est pas exécuté. Si une erreur se produit, l'objet d'erreur y est transféré et certaines actions sont entreprises pour lutter contre cette erreur.

Nous appliquons cette construction dans notre exemple, protégeant avec son aide les sections dangereuses du programme - celles dans lesquelles la fonction fn() appelée.

 let obj = {value: 'message text'} let notObj let fn = (a) => a.value try {   console.log(fn(obj)) } catch (e) {   console.log(e.message) } console.log('Before') //Before try {   console.log(fn(notObj)) } catch (e) {   console.log(e.message) //Cannot read property 'value' of undefined } console.log('After') //After 

Examinons les résultats de l'exécution de ce code dans Node.js.


Gestion des erreurs dans Node.js

Comme vous pouvez le voir, si vous comparez cet exemple avec le précédent, maintenant tout le code est exécuté, et celui qui se trouve avant la ligne de problème, et celui qui se trouve après. Nous «traitons» l'erreur en imprimant simplement sur la console les valeurs de la propriété message de l'objet Error . Quelle sera la gestion de l'erreur qui s'est produite dans le code réellement utilisé dépend de l'erreur.

Nous avons discuté du bloc try...catch ci-dessus, mais, en fait, cette construction inclut un autre bloc - finally .

▍ enfin bloquer

Le bloc finally contient du code qui s'exécute, qu'une erreur soit survenue ou non dans le code qui s'exécute dans le bloc try . Voici à quoi ça ressemble.

 try { //  } catch (e) { //  } finally { //  } 

Le bloc finally peut également être utilisé si le bloc try...catch...finally n'a pas de catch . Dans cette approche, il est utilisé de la même manière que dans la construction avec le catch , par exemple, pour libérer les ressources occupées dans le bloc try .

▍ Blocs d'essai imbriqués

Les blocs d'essai peuvent être imbriqués ensemble. Dans ce cas, l'exception est gérée dans le catch le plus proche.

 try { //  try {   //   } finally {   // -  } } catch (e) { } 

Dans ce cas, si une exception se produit dans le bloc try interne, elle sera traitée dans le catch externe.

▍ Exception auto-générée

Des exceptions peuvent être levées par vous-même à l'aide de l'instruction throw . Voici à quoi ça ressemble.

 throw value 

Après l'exécution de cette instruction, le contrôle est transféré vers le catch le plus proche, ou si un tel bloc est introuvable, le programme s'arrête. La valeur d'exception peut être n'importe quoi. Par exemple, un objet d'erreur défini par l'utilisateur.

À propos des points-virgules

L'utilisation de points-virgules en JavaScript est facultative. Certains programmeurs s'en passent, s'appuyant sur un système d'arrangement automatique pour eux, et ne les plaçant que là où c'est absolument nécessaire. Certaines personnes préfèrent les placer autant que possible. L'auteur de ce document fait référence à la catégorie des programmeurs qui veulent se passer des points-virgules. Il dit qu'il a décidé de s'en passer à l'automne 2017 en configurant Prettier pour les supprimer partout où vous pouvez le faire sans leur insertion explicite. À son avis, le code sans point-virgule semble plus naturel et plus facile à lire.

On peut peut-être dire que la communauté des développeurs JS est divisée, par rapport aux points-virgules, en deux camps. Dans le même temps, il existe également des guides de style JavaScript qui prescrivent des points-virgules explicites et des guides qui recommandent de s'en passer.

Tout cela est possible grâce au fait que JavaScript dispose d'un système de points-virgules automatiques (Automatic Semicolon Insertion, ASI). Cependant, le fait que dans le code JS, dans de nombreuses situations, vous pouvez vous passer de ces caractères, et le fait que les points-virgules soient placés automatiquement lors de la préparation du code pour l'exécution, ne signifie pas que le programmeur n'a pas besoin de connaître les règles selon lesquelles cela se produit. L'ignorance de ces règles entraîne des erreurs.

▍ Règles pour les points-virgules automatiques

L'analyseur JavaScript ajoute automatiquement des points-virgules lors de l'analyse du texte du programme dans les situations suivantes:

1. Lorsque la ligne suivante commence par un code qui interrompt le code actuel (le code d'une certaine commande peut se trouver sur plusieurs lignes).
2. Lorsque la ligne suivante commence par le caractère } , ce qui ferme le bloc actuel.
3. Lorsque la fin du fichier avec le code du programme est détectée.
4. Dans la ligne de la commande de return .
5. Dans la ligne de la commande break .
6. Dans la ligne de la commande throw .
7. Dans la ligne avec la commande continue .

▍ Exemples de code qui ne fonctionne pas comme prévu

Voici quelques exemples illustrant les règles ci-dessus. Par exemple, que pensez-vous qui sera affiché à la suite de l'exécution du fragment de code suivant?

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

Lorsque vous essayez d'exécuter ce code, une erreur Uncaught TypeError: Cannot read property 'forEach' of undefined sera Uncaught TypeError: Cannot read property 'forEach' of undefined système Uncaught TypeError: Cannot read property 'forEach' of undefined , sur la base de la règle n ° 1, il essaie d'interpréter le code comme suit.

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

Le problème peut être résolu en mettant un point-virgule après l'avant-dernière ligne du premier exemple.

Voici un autre morceau de code.

 (1 + 2).toString() 

Le résultat de son exécution sera la sortie de la chaîne "3" . Mais que se passe-t-il si quelque chose comme cela apparaît dans l'extrait de code suivant?

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

Dans cette situation, une erreur TypeError: b is not a function apparaîtra TypeError: b is not a function car le code ci-dessus sera interprété comme suit.

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

Voyons maintenant un exemple basé sur la règle 4.

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

Vous pourriez penser que cette IIFE renverra un objet contenant la propriété color , mais en fait ce n'est pas le cas. Au lieu de cela, la fonction retournera undefined car le système ajoute un point-virgule après la commande return .

Afin de résoudre un problème similaire, l'accolade ouvrante du littéral objet doit être placée sur la même ligne que la commande de return .

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

Si vous regardez le fragment de code suivant, vous pourriez penser qu'il affichera 0 dans la boîte de message.

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

Mais il renvoie 2, car, conformément à la règle n ° 1, ce code est représenté comme suit.

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

Vous devez être prudent lorsque vous utilisez des points-virgules en JavaScript. Vous pouvez rencontrer des partisans ardents des points-virgules et leurs adversaires. En fait, lorsque vous décidez si des points-virgules sont nécessaires dans votre code, vous pouvez compter sur le fait que JS prend en charge leur substitution automatique, mais chacun doit décider par lui-même s'ils sont nécessaires dans son code ou non. L'essentiel est d'appliquer l'approche choisie de manière cohérente et raisonnable. Concernant le placement des points-virgules et la structure du code, nous pouvons recommander les règles suivantes:

• À l'aide de la commande return , organisez ce qu'elle doit renvoyer de la fonction sur la même ligne que la commande. Il en va de même pour les commandes break , throw , continue .
• Portez une attention particulière aux situations où une nouvelle ligne de code commence par un crochet, car cette ligne peut être automatiquement combinée avec la précédente et présentée par le système comme une tentative d'appeler une fonction ou une tentative d'accès à un élément de tableau.

En général, on peut dire que si vous mettez des points-virgules vous-même ou comptez sur leur placement automatique, testez le code afin de vous assurer qu'il fonctionne exactement comme prévu.

Les guillemets et les caractères génériques

Parlons des fonctionnalités de l'utilisation de guillemets en JavaScript. À savoir, nous parlons des types de devis suivants autorisés dans les programmes JS:

• Citations simples.
• Double guillemets.
• Retour citations.

Les guillemets simples et doubles, en général, peuvent être considérés comme identiques.

 const test = 'test' const bike = "bike" 

Il n'y a pratiquement aucune différence entre eux. Peut-être que la seule différence notable est que dans les chaînes entre guillemets simples, vous devez échapper au caractère d'un guillemet simple, et dans les chaînes entre guillemets doubles, le caractère est double.

 const test = 'test' const test = 'te\'st' const test = 'te"st' const test = "te\"st" const test = "te'st" 

Dans différents guides de style, vous pouvez trouver à la fois une recommandation pour l'utilisation de guillemets simples et une recommandation pour l'utilisation de guillemets doubles. L'auteur de ce document dit que dans le code JS, il s'efforce d'utiliser exclusivement des guillemets simples, en utilisant des guillemets doubles uniquement dans le code HTML.

Les backticks sont apparus en JavaScript avec la sortie de la norme ES6 en 2015. Ils, entre autres nouvelles fonctionnalités, permettent de décrire facilement des chaînes multi-lignes. De telles chaînes peuvent également être spécifiées à l’aide de guillemets réguliers - en utilisant la séquence d’échappement \n . Cela ressemble à ceci.

 const multilineString = 'A string\non multiple lines' 

Les virgules inversées (généralement le bouton pour les saisir se trouve à gauche de la touche numérique 1 du clavier) se passent de \n .

 const multilineString = `A string on multiple lines` 

Mais les possibilités de guillemets ne se limitent pas à cela. Donc, si une chaîne est décrite à l'aide de guillemets, il est possible de lui substituer des valeurs du calcul des expressions JS en utilisant la construction ${} .

 const multilineString = `A string on ${1+1} lines` 

Ces chaînes sont appelées des littéraux de modèle.

Les littéraux de modèle ont les caractéristiques suivantes:

• Ils prennent en charge le texte multiligne.
• Ils permettent d'interpoler des chaînes; des expressions intégrées peuvent y être utilisées.
• Ils vous permettent de travailler avec des modèles balisés, permettant de créer vos propres langues spécifiques au domaine (DSL, Domain-Specific Language).

Parlons de ces fonctionnalités.

TextTexte multiligne

Lorsque vous définissez des textes sur plusieurs lignes avec des guillemets, vous devez vous rappeler que les espaces dans ces textes sont tout aussi importants que les autres caractères. Par exemple, considérez le texte multiligne suivant.

 const string = `First               Second` 

Sa conclusion donnera approximativement ce qui suit.

 First               Second 

Autrement dit, il s'avère que lorsque ce texte a été entré dans l'éditeur, il est possible que le programmeur s'attende à ce que les mots First et Second , lors de la sortie, apparaissent strictement l'un sous l'autre, mais en fait ce n'est pas le cas. Pour contourner ce problème, vous pouvez commencer le texte multiligne avec un saut de ligne et, immédiatement après avoir fermé le guillemet arrière, appeler la méthode trim() , qui supprimera les espaces au début ou à la fin de la ligne. Ces caractères, en particulier, incluent des espaces et des tabulations. Les caractères de fin de ligne seront également supprimés.

Cela ressemble à ceci.

 const string = ` First Second`.trim() 

▍ Interpolation

Par interpolation, nous entendons ici la conversion de variables et d'expressions en chaînes. Cela se fait en utilisant la construction ${} .

 const variable = 'test' const string = `something ${ variable }` //something test 

Vous pouvez ajouter n'importe quoi au bloc ${} - même des expressions.

 const string = `something ${1 + 2 + 3}` const string2 = `something ${foo() ? 'x' : 'y' }` 

Le texte something 6 entrera dans la constante de string , soit le texte something x ou le texte something y sera écrit dans la constante string2 . Cela dépend si la fonction foo() retourne vrai ou faux (l'opérateur ternaire est utilisé ici, qui, si ce qui est avant le point d'interrogation est vrai, retourne ce qui vient après le point d'interrogation, sinon retourne ce que vient après le colon).

▍Modèles balisés

Les modèles balisés sont utilisés dans de nombreuses bibliothèques populaires. Parmi eux, les composants stylés , Apollo , GraphQL .

La sortie de ces modèles est soumise à une logique définie par la fonction. Voici un exemple légèrement révisé dans l'une de nos publications illustrant comment travailler avec des chaînes de modèle balisées.

 const esth = 8 function helper(strs, ...keys) { const str1 = strs[0] //ES const str2 = strs[1] //is let additionalPart = '' if (keys[0] == 8) { //8   additionalPart = 'awesome' } else {   additionalPart = 'good' } return `${str1}${keys[0]}${str2}${additionalPart}.` } const es = helper`ES ${esth} is ` console.log(es) //ES 8 is awesome. 

Ici, si le nombre 8 écrit dans la constante esth , la ligne ES 8 is awesome sera en es . Sinon, il y aura une autre ligne. Par exemple, si esth chiffre 6 , il semblera que ES 6 is good .

Les composants stylisés utilisent des modèles balisés pour définir des chaînes CSS.

 const Button = styled.button` font-size: 1.5em; background-color: black; color: white; `; 

Chez Apollo, ils sont utilisés pour définir des requêtes GraphQL.

 const query = gql` query {   ... } ` 

En sachant comment fonctionnent les modèles balisés, il est facile de comprendre que styled.button et gql des exemples précédents ne sont que des fonctions.

 function gql(literals, ...expressions) { } 

Par exemple, la fonction gql() renvoie une chaîne qui peut être le résultat de tout calcul. Le paramètre literals de cette fonction est un tableau contenant le contenu d'un modèle littéral divisé en parties, les expresions contiennent les résultats de l'évaluation des expressions.

Analysons la ligne suivante.

 const string = helper`something ${1 + 2 + 3} ` 

La fonction d' helper obtient le tableau de literals contenant deux éléments. Dans le premier, il y aura something texte avec un espace après, dans le second, il y aura une ligne vide - c'est-à-dire ce qui est entre l'expression ${1 + 2 + 3} et la fin de la ligne. Il y aura un élément dans le tableau des espressions - 6 .
Voici un exemple plus complexe.

 const string = helper`something another ${'x'} new line ${1 + 2 + 3} test` 

Ici, dans la fonction d' helper , le tableau suivant obtiendra comme premier paramètre.

 [ 'something\nanother ', '\nnew line ', '\ntest' ] 

Le deuxième tableau ressemblera à ceci.

 [ 'x', 6 ] 

Résumé

Aujourd'hui, nous avons parlé de la gestion des exceptions, de la substitution automatique des points-virgules et des littéraux de modèle en JavaScript. La prochaine fois, nous examinerons quelques concepts plus importants de la langue. En particulier - travailler en mode strict, minuteries, calculs mathématiques.

Chers lecteurs! Utilisez-vous les capacités des modèles balisés en JavaScript?