✨ JavaScript Template Literals & Tagged Templates

La façon amusante de faire parler votre code

En JavaScript, écrire une chaîne de caractères n’est plus seulement dire "Bonjour"…
Maintenant, les chaînes parlent, dansent et même racontent des blagues 😎💃

Les Template Literals et les Tagged Templates sont les super-héros cachés de JS. Écrire du code sans eux, c’est comme essayer de prendre son café du matin sans café — quelque chose semble manquer ☕🤯

1️⃣ Qu’est-ce qu’un Template Literal ?

“Backticks magiques & chaînes parlantes JS”

Chaîne normale :

const name = "Cansu";
console.log("Bonjour, " + name + "!");

• 😬 Ennuyeux, long et un peu difficile à lire
• L’utilisation de + peut parfois provoquer des erreurs

Avec les template literals :

const name = "Cansu";
console.log(`Bonjour, ${name}!`);

• 🎉 Plus court et plus propre
• Utilisez ${…} pour intégrer directement des variables JS dans la chaîne
• Plus agréable à lire pour les yeux 👀💖

Astuce : Vous pouvez intégrer n’importe quelle expression JS, pas seulement des variables :

console.log(`2 + 2 = ${2 + 2}`); // 2 + 2 = 4

2️⃣ Chaînes Multiligne

“Dites adieu aux casse-têtes de retour à la ligne !”

Chaîne normale :

console.log("Ceci est la ligne 1\nCeci est la ligne 2\nCeci est la ligne 3");

• Utiliser \n est un peu dépassé et sujet aux erreurs 😅

Avec les template literals :

console.log(`Ceci est la ligne 1
Ceci est la ligne 2
Ceci est la ligne 3`);

• Pas besoin de retours à la ligne manuels
• Code plus propre et lisible
• Vous pouvez même ajouter des emojis pour le fun :

console.log(`😀 Ligne 1
🎉 Ligne 2
🚀 Ligne 3`);

3️⃣ HTML Dynamique / Modèles de Message

“JS fait parler le HTML”

Pour les développeurs frontend, c’est une mini magie 🧙‍♂️

const user = { name: "Cansu", age: 28, role: "Développeur Frontend" };

const html = `
  <div class="user-card">
    <h2>${user.name}</h2>
    <p>Âge : ${user.age}</p>
    <p>Rôle : ${user.role}</p>
  </div>
`;

console.log(html);

• Intégrez des données dynamiques directement dans les chaînes
• Code plus propre et lisible
• Mini sorcellerie frontend ✨

Astuce : Pour les HTML ou messages multi-lignes, les template literals préservent l’indentation et le format.

4️⃣ Tagged Templates

“Donner des super-pouvoirs aux chaînes”

Les template literals ne servent pas seulement à joindre des chaînes — les tagged templates vous permettent de manipuler, traiter et personnaliser vos chaînes 💪

function emphasize(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] ? `**${values[i]}**` : "");
  }, "");
}

const name = "Cansu";
const age = 28;

const message = emphasize`Bonjour, je suis ${name} et j’ai ${age} ans !`;
console.log(message); 
// Bonjour, je suis **Cansu** et j’ai **28** ans !

• strings → parties de la chaîne
• values → valeurs ${…}
• Résultat → chaîne formatée comme vous le souhaitez

Astuce : Avec les tagged templates, vous pouvez :

• Ajouter des emojis
• Changer majuscules/minuscules
• Logger, valider ou localiser des chaînes

5️⃣ Exemple Amusant : Modèle de Message avec Emoji

function emoji(strings, ...values) {
  return strings.reduce((acc, str, i) => acc + str + (values[i] ? `🔥${values[i]}🔥` : ""), "");
}

const task = "Apprendre JavaScript";
const status = "génial";

const funMessage = emoji`Aujourd'hui, ${task} est vraiment ${status} !`;
console.log(funMessage);
// Aujourd'hui, 🔥Apprendre JavaScript🔥 est vraiment 🔥génial🔥 !

🎉 Maintenant, les chaînes peuvent s’exprimer, JS parle de façon amusante !

• Le code devient plus interactif
• Le niveau d’humour augmente
• Chaque lecteur JS sourit 😎

6️⃣ Astuces Pratiques & Idées Originales

Intégrer des expressions :

console.log(`5 + 5 = ${5 + 5}`); // 10

Appeler des fonctions :

function shout(text) { return text.toUpperCase() + "!!!"; }
console.log(`Bonjour, ${shout("cansu")}`); // Bonjour, CANSU!!!

Localisation / Formatage de date & nombre :

const price = 2500;
console.log(`Prix : ${price.toLocaleString("fr-FR")}₺`); // Prix : 2 500₺

HTML + CSS dynamique :

const color = "red";
const html = `<p style="color: ${color}">Ce texte est ${color} !</p>`;

Debugging rapide :

console.log(`DEBUG: variable=${variable}`);

7️⃣ Résumé Humoristique

Template Literals = Les chaînes parlantes de JS
Tagged Templates = Les chaînes super puissantes et humoristiques de JS

• Ne les utilisez pas → les chaînes restent silencieuses 😴
• Utilisez-les → le code devient fluide, lisible et amusant 🎉

💡 Mini Défi :
Créez votre propre modèle de message emoji avec un tagged template et montrez à vos amis l’humour JS 😎🔥