Template Literals

3.1 Expressions imbriquées

Dans les template literals, tu peux utiliser n'importe quelles expressions, y compris des appels de fonctions, des opérateurs ternaires et même des template literals à l'intérieur d'autres template literals.

Exemple :

Dans l'expression ${a + b}, l'opération mathématique est effectuée, et le résultat est inséré dans la chaîne result.

    
      const a = 5;
      const b = 10;

      const result = `The result of ${a} + ${b} is ${a + b}.`;
      console.log(result); // "The result of 5 + 10 is 15."
    
  

3.2 Template literals imbriqués

Les template literals peuvent être imbriqués, ce qui te permet de créer des chaînes complexes.

Exemple :

L'appel de la méthode greet() de l'objet user est imbriqué dans le template literal message.

    
      const user = {
        name: 'Bob',
        age: 25,
        greet() {
          return `Hello, ${this.name}!`;
        }
      };

      const message = `${user.greet()} You are ${user.age} years old.`;

      console.log(message); // "Hello, Bob! You are 25 years old."
    
  

3.3 Template literals étiquetés (Tagged Templates)

Les template literals étiquetés permettent d'appeler une fonction pour traiter les chaînes de template. Cela te donne la possibilité de faire des manipulations supplémentaires avec les chaînes, comme l'internationalisation, l'insertion sécurisée de HTML, etc.

Syntaxe :

    
      function tag(strings, ...values) {
        // traitement des chaînes et des valeurs
        return résultat;
      }

      const result = tag`Chaîne template avec ${variable}`;
    
  

Exemple :

La fonction highlight() traite les chaînes et les valeurs, en enveloppant les valeurs dans des balises HTML <span> avec la classe highlight.

    
      function highlight(strings, ...values) {
        return strings.reduce((result, str, i) =>
          `${result}${str}${values[i] || ''}`, '');
      }

      const name = 'Carol';
      const hobby = 'painting';
      const message = highlight`My name is ${name} and I love ${hobby}.`;

      console.log(message);
      // "My name is <span class="highlight">Carol</span> and I love <span class="highlight">painting</span>."
    
  

3.4 Insertion sécurisée des valeurs

Les template literals aident à éviter certains problèmes de sécurité courants, comme le XSS (cross-site scripting), en insérant des valeurs de manière sécurisée. C'est particulièrement utile lors de l'insertion de données utilisateur dans du HTML.

Exemple :

La fonction safeHTML() remplace les caractères dangereux dans les valeurs pour éviter les attaques XSS.

    
      function safeHTML(strings, ...values) {
        return strings.reduce((result, str, i) =>
          `${result}${str}${String(values[i]).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}`, '');
      }

      const userInput = '<script>alert("XSS")</script>';
      const message = safeHTML`User input: ${userInput}`;

      console.log(message);
      // "User input: &lt;script&gt;alert("XSS")&lt;/script&gt;"