En JavaScript, les template strings permettent d'intégrer des expressions dans des strings, ce qu'on appelle aussi l'interpolation de strings.
Cette fonctionnalité étend les capacités de l'objet global String intégré.
Pour créer une template string en JavaScript, il suffit d'entourer le texte de backticks. Le texte peut ainsi contenir des retours à la ligne et d'autres caractères spéciaux, et on peut aussi y intégrer des variables et d'autres expressions.
const num1 = 1;
const num2 = 2;
`Adding ${num1} and ${num2} gives ${num1 + num2}.`;
// => Adding 1 and 2 gives 3.
Dans l'exemple ci-dessus, les backticks (``) servent à représenter une template string. Le ${...} est l'espace réservé qui sert à la substitution.
Tous les types qui ne sont pas des strings sont convertis implicitement en strings.
Ce sujet est abordé dans le concept conversion de types.
Tous les types d'expressions peuvent être utilisés avec les template strings.
const track = 'JavaScript';
`This track on exercism.org is ${track.toUpperCase()}.`;
// => This track on exercism.org is JAVASCRIPT.
Quand tu as besoin de formater des strings sur plusieurs lignes :
`This is an example of using template
strings to accomplish multiple
lines`;
Grâce aux possibilités de substitution, on peut aussi introduire de la logique pour déterminer ce que doit être la string obtenue.
Un exemple est l'intégration d'un opérateur ternaire.
Cet opérateur est une forme courte pour écrire une instruction if/else.
La syntaxe est condition ? consequent-expression : alternative-expression.
Si la condition est truthy, l'opérande situé à gauche des deux-points sera renvoyé.
Sinon, le résultat de l'expression ternaire est l'opérande situé à droite des deux-points.
const grade = 95;
`You have ${grade > 90 ? 'passed' : 'failed'} the exam.`;
// => You have passed the exam.
Dans cet exercice, tu vas écrire du code pour aider une entreprise de panneaux à créer des messages personnalisés pour ses panneaux.
Implémente la fonction buildSign(occasion, name) qui prend une string comme paramètre occasion et une string contenant le nom d'une personne comme paramètre name.
Ces deux paramètres seront insérés dans un template string pour produire le message du panneau.
buildSign('Birthday', 'Rob');
// => "Happy Birthday Rob!"
Implémente la fonction buildBirthdaySign(age) qui prend un âge et, selon cet âge, détermine une partie du message sur le panneau.
Si l'âge est de 50 ans ou plus, le panneau désignera la personne comme mature, sinon il la désignera comme young.
Le résultat attendu exact est montré ci-dessous :
buildBirthdaySign(50);
// => "Happy Birthday! What a mature fellow you are."
buildBirthdaySign(45);
// => "Happy Birthday! What a young fellow you are."
Implémente la fonction graduationFor(name, year) qui prend un nom comme paramètre de type string et une année comme paramètre de type nombre, et qui utilise l'interpolation de strings pour créer une phrase destinée à un panneau, en utilisant un retour à la ligne pour séparer les deux lignes du message.
graduationFor('Hannah', 2022);
/* => "Congratulations Hannah!
Class of 2022"
*/
Implémente la fonction costOf(sign, currency) qui prend une string contenant le contenu du panneau et une string représentant la devise.
Le panneau a un prix de base de 20 dans la devise donnée. De plus, chaque lettre coûte 2. (Les espaces sont inclus dans le calcul.)
La phrase renvoyée inclut le coût de création du panneau, écrit avec deux chiffres après la virgule, suivi de la string de la devise.
costOf('Happy Birthday Rob!', 'dollars');
// => "Your sign costs 58.00 dollars."
Inscris-toi sur Exercism pour apprendre et maîtriser JavaScript avec 37 concepts159 exercices, et un vrai mentorat humain, le tout gratuitement.