JavaScript
Littéraux de modèle

Introduction

Syntaxe

• message = `Bienvenue, $ {user.name}!`
• pattern = new RegExp (String.raw`Welcome, (\ w +)! `);
• query = SQL`INSERT INTO Utilisateur (nom) VALUES ($ {name}) `

Remarques

Interpolation de base et chaînes multilignes

Les littéraux de modèle sont un type spécial de littéral de chaîne qui peut être utilisé à la place du standard '...' ou "..." . Ils sont déclarés en citant la chaîne avec des backticks au lieu des guillemets simples ou doubles standard: `...` .

Les littéraux de modèle peuvent contenir des sauts de ligne et des expressions arbitraires peuvent être incorporées à l'aide de la syntaxe de substitution ${ expression } . Par défaut, les valeurs de ces expressions de substitution sont concaténées directement dans la chaîne où elles apparaissent.

const name = "John";
const score = 74;

console.log(`Game Over!

${name}'s score was ${score * 10}.`);

Game Over!

John's score was 740.

Cordes brutes

La fonction de balise String.raw peut être utilisée avec des littéraux de modèle pour accéder à une version de leur contenu sans interpréter les séquences d'échappement à barre oblique inverse.

String.raw`\n` contiendra une barre oblique inverse et la lettre minuscule n, tandis que `\n` ou '\n' contiendrait un seul caractère de nouvelle ligne à la place.

const patternString = String.raw`Welcome, (\w+)!`;
const pattern = new RegExp(patternString);

const message = "Welcome, John!";
pattern.exec(message);

["Welcome, John!", "John"]

Les chaînes marquées

Une fonction identifiée immédiatement avant un littéral de modèle est utilisée pour l'interpréter, dans ce qu'on appelle un littéral de modèle balisé . La fonction tag peut renvoyer une chaîne, mais elle peut également renvoyer tout autre type de valeur.

Le premier argument de la fonction tag, strings , est un tableau de chaque élément constant du littéral. Les arguments restants, ...substitutions , contiennent les valeurs évaluées de chaque expression de substitution ${} .

function settings(strings, ...substitutions) {
  const result = new Map();
  for (let i = 0; i < substitutions.length; i++) {
    result.set(strings[i].trim(), substitutions[i]);
  }
  return result;
}

const remoteConfiguration = settings`
  label    ${'Content'}
  servers  ${2 * 8 + 1}
  hostname ${location.hostname}
`;

Map {"label" => "Content", "servers" => 17, "hostname" => "stackoverflow.com"}

Les strings Array a une propriété spéciale .raw référençant un tableau parallèle des mêmes pièces constantes du littéral de modèle mais exactement telles qu'elles apparaissent dans le code source, sans qu'aucune barre oblique inverse ne soit remplacée.

function example(strings, ...substitutions) {
  console.log('strings:', strings);
  console.log('...substitutions:', substitutions);
}

example`Hello ${'world'}.\n\nHow are you?`;

strings: ["Hello ", ".\n\nHow are you?", raw: ["Hello ", ".\\n\\nHow are you?"]]
substitutions: ["world"]

Templating HTML With String Strings

Vous pouvez créer une fonction HTML`...` balise de chaîne de caractères pour encoder automatiquement les valeurs interpolées. (Cela nécessite que les valeurs interpolées ne soient utilisées qu'en tant que texte et ne soient pas sûres si des valeurs interpolées sont utilisées dans du code tel que des scripts ou des styles.)

class HTMLString extends String {
  static escape(text) {
    if (text instanceof HTMLString) {
      return text;
    }
    return new HTMLString(
        String(text)
            .replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/\\/g, '&#39;'));
  }
}

function HTML(strings, ...substitutions) { 
  const escapedFlattenedSubstitutions =
      substitutions.map(s => [].concat(s).map(HTMLString.escape).join(''));
  const pieces = [];
  for (const i of strings.keys()) {
    pieces.push(strings[i], escapedFlattenedSubstitutions [i] || '');
  }
  return new HTMLString(pieces.join(''));
}

const title = "Hello World";
const iconSrc = "/images/logo.png";
const names = ["John", "Jane", "Joe", "Jill"];

document.body.innerHTML = HTML`
  <h1><img src="${iconSrc}" /> ${title}</h1>

  <ul> ${names.map(name => HTML`
    <li>${name}</li>
  `)} </ul>
`;

introduction

Les littéraux de template agissent comme des chaînes avec des fonctionnalités spéciales. Ils sont encadrés par le retour à la ligne `` et peuvent être répartis sur plusieurs lignes.

Les littéraux de modèle peuvent également contenir des expressions incorporées. Ces expressions sont indiquées par un signe $ et des accolades {}

//A single line Template Literal  
var aLiteral = `single line string data`;


//Template Literal that spans across lines       
var anotherLiteral = `string data that spans
         across multiple lines of code`;     

//Template Literal with an embedded expression
var x = 2;
var y = 3; 
var theTotal = `The total is ${x + y}`;     // Contains "The total is 5" 



//Comarison of a string and a template literal
var aString = "single line string data"
console.log(aString === aLiteral)                         //Returns true

Il existe de nombreuses autres fonctionnalités des littéraux de type chaîne, tels que les littéraux de modèles marqués et les propriétés brutes. Celles-ci sont démontrées dans d'autres exemples.