JavaScript - Modèles Tagués

Bonjour, futurs magiciens JavaScript ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde des Modèles Tagués. Ne vous inquiétez pas si vous n'en avez jamais entendu parler auparavant - à la fin de cette leçon, vous taguerez des modèles comme un pro !

Qu'est-ce que les Modèles Tagués ?

Les modèles tagués sont une fonctionnalité puissante introduite dans ES6 (ECMAScript 2015) qui vous permet d'analyser des littéraux de modèle avec une fonction. Je sais que cela peut sembler un peu intimidant, mais imaginez-le comme donner des supers pouvoirs à vos chaînes de modèle !

En termes plus simples, les modèles tagués vous permettent de traiter une chaîne de modèle avant qu'elle ne soit finalement rendue. C'est comme avoir un assistant personnel qui peut modifier vos messages avant que vous ne les envoyiez.

Syntaxe de Base

Commençons par la syntaxe de base :

function monTag(strings, ...valeurs) {
// Votre magie se trouve ici
}

const resultat = monTag`Hello, ${nom} !`;

Dans cet exemple, monTag est notre fonction de modèle tagué. Elle reçoit deux types d'arguments :

1. Un tableau de littéraux de chaîne
2. Les valeurs interpolées (celles à l'intérieur de ${})

Pourquoi Utiliser les Modèles Tagués ?

Vous vous demandez peut-être : "Pourquoi me soucier des modèles tagués ?" Eh bien, laissez-moi vous raconter une petite histoire.

Il était une fois un jeune développeur nommé Alex. Alex construisait une application de messagerie et voulait s'assurer que personne ne pouvait envoyer du HTML nocif dans leurs messages. Les modèles tagués sont venus à la rescousse ! Alex les a utilisés pour nettoyer les entrées des utilisateurs et prévenir d'éventuels risques de sécurité.

Les modèles tagués sont extrêmement utiles pour :

• Nettoyer les entrées des utilisateurs
• L'internationalisation (i18n)
• Le stylisme (comme dans styled-components pour React)
• Et bien plus encore !

Exemples de Modèles Tagués

Plongons dans quelques exemples pour voir les modèles tagués en action !

Exemple 1 : Un Simple Salut

function saluer(strings, ...valeurs) {
return `${strings[0]}${valeurs[0].toUpperCase()}${strings[1]}`;
}

const nom = "alice";
console.log(saluer`Hello, ${nom} !`);
// Output : Hello, ALICE!

Dans cet exemple, notre fonction saluer prend le nom et le convertit en majuscules. Le tableau strings contient ["Hello, ", "!"], et le tableau valeurs contient ["alice"].

Exemple 2 : Échappement HTML

function htmlSure(strings, ...valeurs) {
const echapperHtml = (str) => {
return str.replace(/&/g, "&")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
};

return strings.reduce((result, string, i) => {
return result + string + (valeurs[i] ? echapperHtml(valeurs[i]) : '');
}, '');
}

const entreeUtilisateur = '<script>alert("XSS attack!")</script>';
console.log(htmlSure`Entrée utilisateur : ${entreeUtilisateur}`);
// Output : Entrée utilisateur : &lt;script&gt;alert(&quot;XSS attack!&quot;)&lt;/script&gt;

Cet exemple montre comment nous pouvons utiliser des modèles tagués pour échapper du HTML potentiellement nocif. Notre fonction htmlSure remplace les caractères spéciaux par leurs équivalents entités HTML.

Exemple 3 : Styling avec des Modèles Tagués

function css(strings, ...valeurs) {
return strings.reduce((result, string, i) => {
return result + string + (valeurs[i] || '');
}, '');
}

const couleur = 'red';
const taillePolice = '20px';

const styles = css`
color: ${couleur};
font-size: ${taillePolice};
`;

console.log(styles);
// Output :
//   color: red;
//   font-size: 20px;

Cet exemple démontre comment les modèles tagués peuvent être utilisés pour le stylisme, similaire à la manière dont ils sont utilisés dans des bibliothèques comme styled-components.

Utilisation Avancée : Méthodes de Modèles Tagués

Les modèles tagués peuvent également avoir des méthodes attachées à eux. Jetons un œil à un exemple :

function devise(strings, ...valeurs) {
const resultat = strings.reduce((acc, str, i) => {
return acc + str + (valeurs[i] || '');
}, '');

return {
toString() {
return resultat;
},
USD() {
return '$' + resultat;
},
EUR() {
return '€' + resultat;
}
};
}

const montant = 100;
const formate = devise`${montant}`;

console.log(formate.toString()); // Output : 100
console.log(formate.USD()); // Output : $100
console.log(formate.EUR()); // Output : €100

Dans cet exemple, notre tag devise retourne un objet avec des méthodes, permettant des options de formatage flexibles.

Conclusion

Les modèles tagués sont une fonctionnalité puissante en JavaScript qui permet une manipulation et un traitement complexes des chaînes. Ce ne sont pas seulement une manière élégante de concaténer des chaînes - ils ouvrent un monde de possibilités pour créer un code plus sûr, plus flexible et plus expressif.

Souvenez-vous, comme avec tout outil puissant, les modèles tagués devraient être utilisés avec discernement. Ils sont parfaits pour des cas d'utilisation spécifiques comme la désinfection, l'internationalisation ou la création de langages spécifiques au domaine, mais pour une interpolation de chaînes simple, les littéraux de modèle standards sont souvent suffisants.

Maintenant que vous avez appris sur les modèles tagués, pourquoi ne pas essayer de créer les vôtres ? Commencez petit, peut-être avec une fonction de formatage simple, et progressez progressivement vers des cas d'utilisation plus complexes. Bon codage, futurs maîtres JavaScript !

Méthode	Description
strings.raw	Donne accès aux chaînes brutes dans les littéraux de modèle
String.raw	Une fonction de tag intégrée pour obtenir la forme de chaîne brute des littéraux de modèle

Credits: Image by storyset