Littéraux de modèle JavaScript (chaînes de modèle)

Table des matières

Littéraux de modèle pour les chaînes
Chaînes multilignes utilisant des littéraux de modèle
Interpolation d'expression
Modèles balisés

Dans ce didacticiel, vous découvrirez les littéraux de modèle JavaScript (chaînes de modèle) à l'aide d'exemples.

Les littéraux de modèle (chaînes de modèle) vous permettent d'utiliser des chaînes ou des expressions incorporées sous la forme d'une chaîne. Ils sont entourés de backticks ``. Par exemple,

 const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!

Remarque : le modèle littéral a été introduit en 2015 (également appelé ECMAScript 6 ou ES6 ou ECMAScript 2015). Certains navigateurs peuvent ne pas prendre en charge l'utilisation de littéraux de modèle. Pour en savoir plus, visitez le support JavaScript Template Literal.

Littéraux de modèle pour les chaînes

Dans les versions antérieures de JavaScript, vous utilisiez un guillemet simple ''ou un guillemet double ""pour les chaînes. Par exemple,

 const str1 = 'This is a string'; // cannot use the same quotes const str2 = 'A "quote" inside a string'; // valid code const str3 = 'A 'quote' inside a string'; // Error const str4 = "Another 'quote' inside a string"; // valid code const str5 = "Another "quote" inside a string"; // Error

Pour utiliser les mêmes guillemets dans la chaîne, vous pouvez utiliser le caractère d'échappement .

 // escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code

Au lieu d'utiliser des caractères d'échappement, vous pouvez utiliser des littéraux de modèle. Par exemple,

 const str1 = `This is a string`; const str2 = `This is a string with a 'quote' in it`; const str3 = `This is a string with a "double quote" in it`;

Comme vous pouvez le voir, les littéraux de modèle facilitent non seulement l'inclusion de citations, mais rendent également notre code plus propre.

Chaînes multilignes utilisant des littéraux de modèle

Les littéraux de modèle facilitent également l'écriture de chaînes multilignes. Par exemple,

À l'aide de littéraux de modèle, vous pouvez remplacer

 // using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)

avec

 const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)

La sortie de ces deux programmes sera la même.

 Il s'agit d'un long message qui s'étend sur plusieurs lignes du code.

Interpolation d'expression

Avant JavaScript ES6, vous utilisiez l' +opérateur pour concaténer des variables et des expressions dans une chaîne. Par exemple,

 const name = 'Jack'; console.log('Hello ' + name); // Hello Jack

Avec les littéraux de modèle, il est un peu plus facile d'inclure des variables et des expressions dans une chaîne. Pour cela, nous utilisons la $(… )syntaxe.

 const name = 'Jack'; console.log(`Hello $(name)`); // template literals used with expressions const result = `The sum of 4 + 5 is $(4 + 5)`; console.log(result); console.log(`$(result < 10 ? 'Too low': 'Very high')`)

Production

 Bonjour Jack La somme de 4 + 5 est 9 Très élevée

Le processus d'affectation de variables et d'expressions à l'intérieur du littéral de modèle est appelé interpolation.

Modèles balisés

Normalement, vous utiliseriez une fonction pour passer des arguments. Par exemple,

 function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);

Cependant, vous pouvez créer des modèles balisés (qui se comportent comme une fonction) à l'aide de littéraux de modèle. Vous utilisez des balises qui vous permettent d'analyser les littéraux de modèle avec une fonction.

Le modèle balisé est écrit comme une définition de fonction. Cependant, vous ne passez pas de parenthèses ()lors de l'appel du littéral. Par exemple,

 function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);

Production

 ("Bonjour Jack")

Un tableau de valeurs de chaîne est passé comme premier argument d'une fonction de balise. Vous pouvez également transmettre les valeurs et les expressions comme arguments restants. Par exemple,

 const name = 'Jack'; const greet = true; function tagExample(strings, nameValue) ( let str0 = strings(0); // Hello let str1 = strings(1); // , How are you? if(greet) ( return `$(str0)$(nameValue)$(str1)`; ) ) // creating tagged literal // passing argument name const result = tagExample`Hello $(name), How are you?`; console.log(result);

Production