JavaScript String Format - Comment utiliser l'interpolation de chaîne dans JS

L'ajout de littéraux de modèle dans ECMAScript 6 (ES6) nous permet d'interpoler des chaînes en JavaScript.

En termes plus simples, nous pouvons utiliser des espaces réservés pour injecter des variables dans une chaîne. Vous pouvez voir un exemple d'interpolation de chaîne à l'aide de littéraux de modèle dans l'extrait de code ci-dessous:

const age = 4.5; const earthAge = `Earth is estimated to be ${age} billion years old.`; console.log(earthAge); 

Tout d'abord, vous verrez que nous utilisons des backticks pour les littéraux de template. En plus de cela, nous avons également le format de ${placeholder}, qui nous permet d'insérer une valeur dynamique dans la chaîne. Tout ce qu'il contient ${}est évalué comme JavaScript.

Par exemple, nous pourrions écrire Earth is estimated to be ${age + 10} billion years old.et cela fonctionnerait comme si nous le faisions const age = 4.5 + 10;.

Comment l'avons-nous fait avant?

Avant les modèles littéraux, nous l'aurions fait comme ceci:

const earthAge = "Earth is estimated to be " + age + " billion years old."; 

Comme vous pouvez le voir, nous avons déjà beaucoup de guillemets pour une simple chaîne. Imaginez que nous devions insérer une poignée de variables. Il peut rapidement se transformer en une chaîne complexe qui n'est pas très lisible. Ainsi, les littéraux de modèle rendent les chaînes plus propres et plus lisibles.

Cependant, ce n'est qu'un cas. Voyons plus de cas d'utilisation pour les littéraux de modèle.

Chaînes multilignes

Les chaînes multilignes sont une autre utilisation pratique des chaînes de modèle. Avant les littéraux de modèle, nous avons utilisé \npour les nouvelles lignes, comme dans console.log('line 1\n' + 'line 2').

Pour deux lignes, cela pourrait être bien. Mais imaginez que nous voulons cinq lignes. Là encore, la chaîne devient inutilement complexe.

const earthAge = `Earth is estimated to be ${age} billion years old. Scientists have scoured the Earth searching for the oldest rocks to radiometrically date. In northwestern Canada, they discovered rocks about 4.03 billion years old. `; 

L'extrait de code ci-dessus montre une fois de plus à quel point il devient simple et propre d'écrire des chaînes multilignes avec des littéraux de modèle.

À titre d'exercice, essayez de convertir la chaîne ci-dessus pour utiliser la concaténation et la nouvelle ligne \n.

Expressions

Avec les littéraux de modèle, nous pouvons également utiliser des expressions dans les chaînes. Qu'est-ce que ça veut dire?

Par exemple, nous pourrions utiliser des expressions mathématiques telles que la multiplication de deux nombres. L'extrait ci-dessous illustre exactement cela:

const firstNumber = 10; const secondNumber = 39; const result = `The result of multiplying ${firstNumber} by ${secondNumber} is ${firstNumber * secondNumber}.`; console.log(result); 

Sans les littéraux de modèle, nous devrions faire quelque chose comme ceci:

const result = "The result of multiplying " + firstNumber + " by " + secondNumber + " is " + firstNumber * secondNumber + "."; 

L'écriture d'une chaîne comme celle-ci peut rapidement devenir complexe et déroutante. Comme nous continuons à le voir, les littéraux de modèle facilitent et plus élégamment l'incorporation d'expressions dans la chaîne.

Opérateur ternaire

Avec l'interpolation de chaîne, nous pouvons même utiliser un opérateur ternaire à l'intérieur d'une chaîne. Cela nous permet de vérifier la valeur d'une variable et d'afficher différentes choses en fonction de cette valeur.

Regardons l'exemple ci-dessous:

const drinks = 4.99; const food = 6.65; const total = drinks + food; const result = `The total bill is ${total}. ${total > 10 ? `Your card payment will be declined` : `Your card payment will be accepted`}.` console.log(result); 

Dans l'exemple ci-dessus, nous vérifions si le montant total est supérieur à dix dollars, par exemple.

Si le montant est supérieur à dix, nous informons l'utilisateur que le paiement par carte sera refusé. Dans le cas contraire, le paiement par carte est accepté. Comme vous pouvez le voir, l'interpolation de chaînes nous permet de faire des choses sympas avec des chaînes.

Conclusion

L'ajout de littéraux de modèle dans ES6 nous permet d'écrire des chaînes de meilleure qualité, plus courtes et plus claires. Cela nous donne également la possibilité d'injecter des variables et des expressions dans n'importe quelle chaîne. Essentiellement, tout ce que vous écrivez entre les accolades ( ${}) est traité comme du JavaScript.

Ainsi, nous pouvons utiliser des littéraux de modèle pour:

  • écrire des chaînes multilignes
  • intégrer des expressions
  • écrire des chaînes avec l'opérateur ternaire

Si vous aimez ce que j'écris, il y a de fortes chances que vous aimiez ce que j'écris. Pensez à vous abonner à ma liste de diffusion. Si vous n'êtes pas fan des newsletters , nous pouvons toujours rester en contact sur Twitter .