JavaScript
Template Literals

Invoering

Syntaxis

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

Opmerkingen

Basisinterpolatie en meerlijnige tekenreeksen

Sjabloonliteralen zijn een speciaal type tekenreeksliteraal dat kan worden gebruikt in plaats van de standaard '...' of "..." . Ze worden verklaard door de string met backticks te citeren in plaats van de standaard enkele of dubbele aanhalingstekens: `...` .

Sjabloonliteralen kunnen regeleinden bevatten en willekeurige expressies kunnen worden ingesloten met de syntaxis van de ${ expression } substitutie. Standaard worden de waarden van deze substitutie-expressies direct samengevoegd in de tekenreeks waar ze verschijnen.

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

console.log(`Game Over!

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

Game Over!

John's score was 740.

Ruwe snaren

De String.raw kan worden gebruikt met sjabloonliteralen om toegang te krijgen tot een versie van hun inhoud zonder eventuele backslash-escape-reeksen te interpreteren.

String.raw`\n` zal een backslash en de kleine letter n bevatten, terwijl `\n` of '\n' in plaats daarvan een enkel `\n` zou bevatten.

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

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

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

Getagde tekenreeksen

Een functie die direct voor een letterlijke sjabloon wordt geïdentificeerd, wordt gebruikt om deze te interpreteren, in wat een getagde sjabloon letterlijk wordt genoemd . De tagfunctie kan een string retourneren, maar het kan ook elk ander type waarde retourneren.

Het eerste argument voor de tag-functie, strings , is een array van elk constant stuk van het letterlijke. De overige argumenten, ...substitutions , bevatten de geëvalueerde waarden van elke substitutie-uitdrukking ${} .

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

De strings Array heeft een speciale .raw eigenschap die verwijst naar een parallelle array van dezelfde constante stukken van de sjabloon letterlijk maar precies zoals ze in de broncode verschijnen, zonder backslash-escapes te vervangen.

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

HTML-sjabloon met sjabloonreeksen

U kunt een HTML`...` maken om automatisch geïnterpoleerde waarden te coderen. (Dit vereist dat geïnterpoleerde waarden alleen als tekst worden gebruikt en mogelijk niet veilig zijn als geïnterpoleerde waarden worden gebruikt in code zoals scripts of stijlen.)

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

Invoering

Sjabloonliteralen werken als tekenreeksen met speciale functies. Ze worden omsloten door de back-tick `` en kunnen over meerdere lijnen worden gespannen.

Sjabloonliteralen kunnen ook ingesloten uitdrukkingen bevatten. Deze uitdrukkingen worden aangegeven met een $ -teken en 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

Er zijn veel andere functies van String Literals zoals Tagged Template Literals en Raw-eigenschap. Deze worden gedemonstreerd in andere voorbeelden.