JavaScript
Vorlagenliterale

Einführung

Syntax

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

Bemerkungen

Grundlegende Interpolation und mehrzeilige Zeichenketten

Vorlagenliterale sind eine spezielle Art von Zeichenfolgenliteral, die anstelle des Standards '...' oder "..." . Sie werden durch Anführungszeichen der Zeichenfolge mit Backticks anstelle der standardmäßigen einfachen oder doppelten Anführungszeichen deklariert: `...` .

Vorlagenliterale können Zeilenumbrüche enthalten und beliebige Ausdrücke können mit der Substitutionssyntax ${ expression } eingebettet werden. Standardmäßig werden die Werte dieser Substitutionsausdrücke direkt in der Zeichenfolge verkettet, in der sie angezeigt werden.

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

console.log(`Game Over!

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

Game Over!

John's score was 740.

Rohe Saiten

Die String.raw Tag-Funktion kann mit Vorlagenliteralen verwendet werden, um auf eine Version ihres Inhalts zuzugreifen, ohne etwaige Backslash-Escape-Folgen zu interpretieren.

String.raw`\n` enthält einen Backslash und den Kleinbuchstaben n, während `\n` oder '\n' stattdessen ein einzelnes Zeilenvorschubzeichen enthalten würde.

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

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

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

Markierte Saiten

Eine Funktion, die unmittelbar vor einem Vorlagenliteral identifiziert wurde, wird zur Interpretation in einem so genannten taglierten Vorlagenliteral verwendet . Die Tag-Funktion kann einen String zurückgeben, aber auch einen anderen Wert.

Das erste Argument der Tag-Funktion, strings , ist ein Array jedes konstanten Teils des Literal. Die übrigen Argumente, ...substitutions , enthalten die ausgewerteten Werte jedes ${} Substitutionsausdrucks.

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

Das strings Array verfügt über eine spezielle .raw Eigenschaft, die auf ein paralleles Array derselben konstanten Teile des Vorlagenliteral verweist, aber genau so, wie sie im Quellcode erscheinen, ohne dass Backslash- .raw ersetzt werden.

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-Vorlage mit Template-Strings

Sie können eine HTML`...` Funktion erstellen, um interpolierte Werte automatisch zu codieren. (Dies erfordert, dass interpolierte Werte nur als Text verwendet werden und sind möglicherweise nicht sicher, wenn interpolierte Werte in Code verwendet werden, z. B. Skripts oder Stile.)

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

Einführung

Vorlagenliterale verhalten sich wie Strings mit besonderen Merkmalen. Sie werden durch das hintere Häkchen `` und können sich über mehrere Zeilen erstrecken.

Vorlagenliterale können auch eingebettete Ausdrücke enthalten. Diese Ausdrücke werden durch ein $ -Zeichen und geschweifte Klammern angezeigt. {}

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

Es gibt viele andere Funktionen von Zeichenkettenlitern, z. B. Tagged Template Literals und Raw-Eigenschaft. Diese werden in anderen Beispielen gezeigt.