JavaScript
Template letterali

introduzione

Sintassi

• message = `Benvenuto, $ {user.name}!`
• pattern = new RegExp (String.raw`Welcome, (\ w +)! `);
• query = SQL`INSERT INTO Valori utente (nome) ($ {nome}) `

Osservazioni

Interpolazione di base e stringhe multilinea

I letterali modello sono un tipo speciale di stringa letterale che può essere utilizzato al posto dello standard '...' o "..." . Sono dichiarati citando la stringa con i backtick invece delle virgolette singole o doppie standard: `...` .

I valori letterali del modello possono contenere interruzioni di riga e espressioni arbitrarie possono essere incorporati utilizzando la sintassi di sostituzione ${ expression } . Per impostazione predefinita, i valori di queste espressioni di sostituzione vengono concatenati direttamente nella stringa in cui vengono visualizzati.

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

console.log(`Game Over!

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

Game Over!

John's score was 740.

Archi grezzi

La funzione di tag String.raw può essere utilizzata con letterali di modello per accedere a una versione dei loro contenuti senza interpretare le sequenze di escape backslash.

String.raw`\n` conterrà una barra rovesciata e la lettera minuscola n, mentre `\n` o '\n' conterrà invece un singolo carattere di nuova riga.

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

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

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

Stringhe con tag

Una funzione identificata immediatamente prima che un modello letterale venga utilizzato per interpretarlo, in quello che viene chiamato un modello letterale con tag . La funzione tag può restituire una stringa, ma può anche restituire qualsiasi altro tipo di valore.

Il primo argomento della funzione tag, strings , è una matrice di ogni pezzo costante del letterale. Gli argomenti rimanenti, ...substitutions , contengono i valori valutati di ciascuna espressione di sostituzione ${} .

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"}

Le Array di strings hanno una proprietà .raw speciale che fa riferimento a una matrice parallela degli stessi pezzi costanti del modello letterale ma esattamente come appaiono nel codice sorgente, senza che le backslash-escape siano rimpiazzate.

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"]

Modelli HTML con stringhe di modelli

È possibile creare una funzione di tag di stringa modello HTML`...` per codificare automaticamente i valori interpolati. (Ciò richiede che i valori interpolati vengano utilizzati solo come testo e potrebbero non essere sicuri se i valori interpolati vengono utilizzati in codice come script o stili).

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>
`;

introduzione

I template letterali agiscono come stringhe con caratteristiche speciali. Sono racchiuse da "back-tick `` e possono essere suddivise su più righe.

I modelli letterali possono contenere anche espressioni incorporate. Queste espressioni sono indicate da un segno $ e parentesi graffe {}

//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

Esistono molte altre funzionalità di String Literals come Tagged Template Literals e Raw. Questi sono dimostrati in altri esempi.