JavaScript/Objekte/String/template-literal
Template-Literale sind eine besondere Form von Zeichenketten, die mit ECMAScript 6 in den Sprachstandandard aufgenommen wurden. Sie entsprechen semantisch in etwa den aus PHP bekannten heredoc-Strings.
Ein Template-Literal unterscheidet sich syntaktisch von einem String dadurch, dass es `Backticks` (rückwärts geneigte Hochkommas) als Begrenzerzeichen verwendet, statt der bekannten ' oder " Zeichen. Darüber hinaus kann ein Template-Literal auch über mehrere Zeilen hinweg gehen, die Zeilenumbrüche werden in ein Linefeed-Zeichen (\n) umgewandelt.
Das Backtick-Zeichen ` mit dem ASCII-Code 96 finden Sie auf deutschen Tastaturen als Gravis-Akzent, rechts neben dem ß. Dies ist eine sogenannte Tot-Taste, wenn Sie sie drücken, wird zunächst kein Zeichen ausgegeben. Tippen Sie direkt nach einem Gravis ein Zeichen, dass diesen Akzent tragen kann, kombiniert Ihr Computer Akzent und Zeichen. Wenn Sie ein Gravis als Backtick nutzen wollen, drücken Sie deshalb direkt nach dem Gravis die Leertaste, um eine versehentliche Kombination zu vermeiden.
Achtung!
Innerhalb eines Template-Literals können, begrenzt durch ${ und }, beliebige Javascript-Ausdrücke eingesetzt werden. Das ermöglicht das kompakte Zusammensetzen längerer Zeichenketten aus vielen festen und variablen Teilen.
auto = { marke: "Acme",
modell: "08/15",
treibstoff: "Kerosin",
verbrauch: "17 gal" };
info = `Ein ${auto.marke} ${auto.modell} verbraucht ${auto.verbrauch} ${auto.treibstoff} auf 100 km.`;
formFeld = { label: "Name", formVar: "name", wert: 4711 };
html = `<div>
<label for='${formFeld.formVar}'>${formFeld.label}:
<input type='text' name='${formFeld.formVar}' value='${formFeld.wert}'>
</label>
</div>`;
<div>
<label for='name'>Name:
<input type='text' name='name' value='4711'>
</label>
</div>
Soll innerhalb eines Template-Literals ein Backtick oder die Zeichenfolge ${ als Text verwendet werden, so ist ein Backslash als Escape-Zeichen voranzustellen:
var a = 1,
b = 2,
c = 3;
var muster = `Das Template \`\${a} + \${b} = \${c}\` wird für a=${a}, b=${b} und c=${c} zu "${a} + ${b} = ${c}"`
Tagged Template Literal
Als Tagged Template Literal bezeichnet man eine spezielle Verknüpfung einer Funktion mit einem Templateliteral. Die Funktion wird in diesem Zusammenhang als das Tag bezeichnet. JavaScript verwendet hierfür eine spezielle Syntax, bei der der Funktionsname direkt vor das Templateliteral geschrieben wird
Mittels eines Tagged Templateliterals kann man das Parsen eines Templateliterals und das Einsetzen der Werte in das Resultat voneinander trennen. Das Parsen übernimmt weiterhin Javascript, die weitere Verarbeitung das angegebene Tag. Das Ergebnis des Parsers besteht aus den Abschnitten, die als Klartext im Templateliteral standen, und den Werten für die verwendeten Platzhalter. Die Textabschnitte werden der Tag-Funktion im ersten Parameter bereitgestellt, die ermittelten Werte für die Platzhalter als weitere Parameter.
Der erste Parameter mit den Textabschnitten ist einem Array ähnlich. Er enthält wie ein Array die gefundenen Textabschnitte an den Indexpositionen ab 0, und es gibt auch eine length-Eigenschaft. Zusätzlich gibt es aber noch die Eigenschaft raw, die wiederum ein Array darstellt und die Textabschnitte in ihrer Sourcecode-Form enthält, d.h. Escape-Sequenzen sind darin nicht in ihre Unicode-Entsprechung übersetzt worden. Das raw-Array ist nützlich, wenn man Templates hat, deren Inhalt nicht den Escaping-Regeln von JavaScript folgt, wie beispielsweise LaTeX.
const sh = "SelfHTML";
alert(quote`Hallo ${sh}!`; // Zeigt Hallo "SelfHTML"!
function quote(parts, value) {
return parts[0] + '"' + value + '"' + parts[1];
}
quote erwartet ein Template aus zwei Textabschnitten und einem Platzhalterwert. Sie ergänzt den Platzhalterwert um Anführungszeichen, setzt ihn mit den beiden Textabschnitten zusammen und gibt die entstandene Zeichenkette zurück.Ein Templateliteral mit einem Platzhalter am Anfang oder Ende erfährt eine Sonderbehandlung, die Ihnen die Verarbeitung erleichtert. In einem Templateliteral wie `Hallo ${var}` könnte man naiv sagen, dass es einen Textabschnitt und einen Platzhalterwert gibt und der Tag-Funktion das Array [ "Hallo " ] als erstes Argument übergeben. Eine Tag-Funktion wüsste dann aber nicht, ob dieser Abschnitt vor oder hinter den Platzhalterwert gehört. Deshalb fügt JavaScript noch einen Leerstring ein und übergibt Ihnen [ "Hallo ", "" ]. Das entsprechende geschieht, wenn ein Platzhalter am Anfang des Templateliterals steht, so dass Sie immer genau einen Textabschnitt mehr haben als Platzhalterwerte.
Das folgende Beispiel zeigt die Verwendung von raw in einer Tag-Funktion, die Templates mit LaTeX-Befehlen ermöglicht. Normalerweise muss man für einen Latex-Befehl jeden Backslash verdoppeln; um \frac{1}{2} zu erzeugen, müsste man `\\frac{${zähler}}{${nenner}}` schreiben. Denn in `\frac...` würde JavaScript eine gültige Escapesequenz \f erkennen und das ASCII-Steuerzeichen U+000C (Seitenvorschub) erzeugen. Mit Hilfe einer Tagfunktion und den raw-Abschnitten kann man das verhindern:
const zähler=3, nenner=5;
console.log(`\frac{${zähler}}{${nenner}}`); // gibt einen FormFeed und rac{3}{5} aus!
console.log(latex`\frac{${zähler}}{${nenner}}`);
function latex(parts, ...values) {
let result = parts.raw[0];
for (let i=0; i<values.length; i++) {
result += values[i] + parts.raw[i+1];
}
return result;
}
latex müssen Sie nicht selbst programmieren, sie ist unter anderem Namen bereits vorhanden: String.raw.
Weblinks
- Jason Orendorffs Blog: ES6 In Depth: Template strings
- Jack Hsus Blogbeitrag mit der Idee zu dem Formatierer: I18N with ES2015 Template Literals
- Mozilla Developer Network: Template literals
