JavaScript/Objekte/String/template-literal

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

Kompabilitätsinformationen bei kangax

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!

Manche Geräte erzeugen auf diese Weise kein Backtick, sondern ein typographisches Akzentzeichen, das wie ein Backtick aussieht, aber von JavaScript nicht als solcher erkannt wird.

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.

Beispiel
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.`;
Ergibt: "Ein Acme 08/15 verbraucht 17 gal Kerosin auf 100 km.";
Beispiel
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>`;
Ergibt:
<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:

Beispiel
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}"`
Ergibt: Das Template `${a} + ${b} = ${c}` wird für a=1, b=2 und c=3 zu "1 + 2 = 3"

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.

Beispiel
const sh = "SelfHTML";
alert(quote`Hallo ${sh}!`;     // Zeigt Hallo "SelfHTML"!

function quote(parts, value) {
   return parts[0] + '"' + value + '"' + parts[1];
}
Die Tag-Funktion 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:

Beispiel
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;
}
Die Tag-Funktion latex setzt die raw-Werte der Textabschnitte und die Platzhalterwerte abwechselnd zusammen.
Beachten Sie: Die Funktion latex müssen Sie nicht selbst programmieren, sie ist unter anderem Namen bereits vorhanden: String.raw.


Weblinks