JavaScript für ungeduldige Programmierer (ES2022-Ausgabe)
Bitte unterstützen Sie dieses Buch: kaufen Sie es oder spenden Sie
(Werbung, bitte nicht blockieren.)

21 Verwendung von Template-Literalen und Tagged Templates

Bevor wir uns mit den beiden Features Template Literal und Tagged Template beschäftigen, untersuchen wir zunächst die verschiedenen Bedeutungen des Begriffs Template.

21.1 Disambiguierung: „Template“

Die folgenden drei Dinge sind erheblich unterschiedlich, obwohl sie alle Template in ihren Namen tragen und obwohl sie alle ähnlich aussehen.

21.2 Template-Literale

Ein Template-Literal hat im Vergleich zu einem normalen String-Literal zwei neue Features.

Erstens unterstützt es String-Interpolation: Wenn wir einen dynamisch berechneten Wert innerhalb von ${} platzieren, wird er in einen String umgewandelt und in den von dem Literal zurückgegebenen String eingefügt.

const MAX = 100;
function doSomeWork(x) {
  if (x > MAX) {
    throw new Error(`At most ${MAX} allowed: ${x}!`);
  }
  // ···
}
assert.throws(
  () => doSomeWork(101),
  {message: 'At most 100 allowed: 101!'});

Zweitens können Template-Literale mehrere Zeilen umfassen.

const str = `this is
a text with
multiple lines`;

Template-Literale erzeugen immer Strings.

21.3 Tagged Templates

Der Ausdruck in Zeile A ist ein Tagged Template. Er ist gleichbedeutend mit dem Aufruf von tagFunc() mit den in Zeile B aufgeführten Argumenten im Array.

function tagFunc(...args) {
  return args;
}

const setting = 'dark mode';
const value = true;

assert.deepEqual(
  tagFunc`Setting ${setting} is ${value}!`, // (A)
  [['Setting ', ' is ', '!'], 'dark mode', true] // (B)
);

Die Funktion tagFunc vor dem ersten Backtick wird als Tag-Funktion bezeichnet. Ihre Argumente sind:

Die statischen (festen) Teile des Literals (die Template Strings) werden von den dynamischen Teilen (den Substitutions) getrennt gehalten.

Eine Tag-Funktion kann beliebige Werte zurückgeben.

21.3.1 Cooked vs. Raw Template Strings (Fortgeschritten)

Bisher haben wir nur die cooked Interpretation von Template Strings gesehen. Tag-Funktionen erhalten jedoch tatsächlich zwei Interpretationen:

Die Raw-Interpretation ermöglicht Raw String Literale über String.raw (später beschrieben) und ähnliche Anwendungen.

Die folgende Tag-Funktion cookedRaw verwendet beide Interpretationen:

function cookedRaw(templateStrings, ...substitutions) {
  return {
    cooked: Array.from(templateStrings), // copy only Array elements
    raw: templateStrings.raw,
    substitutions,
  };
}
assert.deepEqual(
  cookedRaw`\tab${'subst'}\newline\\`,
  {
    cooked: ['\tab', '\newline\\'],
    raw:    ['\\tab', '\\newline\\\\'],
    substitutions: ['subst'],
  });

Wir können auch Unicode-Codepunkt-Escapes (\u{1F642}), Unicode-Codierungs-Escapes (\u03A9) und ASCII-Escapes (\x52) in Tagged Templates verwenden.

assert.deepEqual(
  cookedRaw`\u{54}\u0065\x78t`,
  {
    cooked: ['Text'],
    raw:    ['\\u{54}\\u0065\\x78t'],
    substitutions: [],
  });

Wenn die Syntax eines dieser Escapes nicht korrekt ist, ist der entsprechende cooked Template String undefined, während die Raw-Version immer noch unverändert ist.

assert.deepEqual(
  cookedRaw`\uu\xx ${1} after`,
  {
    cooked: [undefined, ' after'],
    raw:    ['\\uu\\xx ', ' after'],
    substitutions: [1],
  });

Falsche Escapes führen zu Syntaxfehlern in Template-Literalen und String-Literalen. Vor ES2018 führten sie auch in Tagged Templates zu Fehlern. Warum wurde das geändert? Wir können jetzt Tagged Templates für Text verwenden, der zuvor illegal war – zum Beispiel:

windowsPath`C:\uuu\xxx\111`
latex`\unicode`

21.4 Beispiele für Tagged Templates (wie sie über Bibliotheken bereitgestellt werden)

Tagged Templates eignen sich hervorragend zur Unterstützung kleiner eingebetteter Sprachen (sogenannte domänenspezifische Sprachen). Wir fahren mit einigen Beispielen fort.

21.4.1 Tag-Funktionsbibliothek: lit-html

lit-html ist eine Templating-Bibliothek, die auf Tagged Templates basiert und von dem Frontend-Framework Polymer verwendet wird.

import {html, render} from 'lit-html';

const template = (items) => html`
  <ul>
    ${
      repeat(items,
        (item) => item.id,
        (item, index) => html`<li>${index}. ${item.name}</li>`
      )
    }
  </ul>
`;

repeat() ist eine benutzerdefinierte Funktion zum Schleifen. Ihr zweiter Parameter erzeugt eindeutige Schlüssel für die vom dritten Parameter zurückgegebenen Werte. Beachten Sie das verschachtelte Tagged Template, das von diesem Parameter verwendet wird.

21.4.2 Tag-Funktionsbibliothek: re-template-tag

re-template-tag ist eine einfache Bibliothek zum Komponieren von regulären Ausdrücken. Mit re getaggte Templates erzeugen reguläre Ausdrücke. Der Hauptvorteil besteht darin, dass wir reguläre Ausdrücke und einfachen Text über ${} interpolieren können (Zeile A).

const RE_YEAR = re`(?<year>[0-9]{4})`;
const RE_MONTH = re`(?<month>[0-9]{2})`;
const RE_DAY = re`(?<day>[0-9]{2})`;
const RE_DATE = re`/${RE_YEAR}-${RE_MONTH}-${RE_DAY}/u`; // (A)

const match = RE_DATE.exec('2017-01-27');
assert.equal(match.groups.year, '2017');

21.4.3 Tag-Funktionsbibliothek: graphql-tag

Die Bibliothek graphql-tag ermöglicht es uns, GraphQL-Abfragen über Tagged Templates zu erstellen.

import gql from 'graphql-tag';

const query = gql`
  {
    user(id: 5) {
      firstName
      lastName
    }
  }
  `;

Zusätzlich gibt es Plugins zum Vorverkompilieren solcher Abfragen in Babel, TypeScript usw.

21.5 Raw String Literale

Raw String Literale werden über die Tag-Funktion String.raw implementiert. Sie sind String-Literale, bei denen Backslashes keine besondere Funktion haben (wie das Escapen von Zeichen usw.).

assert.equal(String.raw`\back`, '\\back');

Dies hilft immer dann, wenn Daten Backslashes enthalten – zum Beispiel Strings mit regulären Ausdrücken.

const regex1 = /^\./;
const regex2 = new RegExp('^\\.');
const regex3 = new RegExp(String.raw`^\.`);

Alle drei regulären Ausdrücke sind äquivalent. Bei einem normalen String-Literal müssen wir den Backslash zweimal schreiben, um ihn für dieses Literal zu escapen. Bei einem Raw String Literal müssen wir das nicht tun.

Raw String Literale sind auch nützlich für die Angabe von Windows-Dateipfaden.

const WIN_PATH = String.raw`C:\foo\bar`;
assert.equal(WIN_PATH, 'C:\\foo\\bar');

21.6 (Fortgeschritten)

Alle verbleibenden Abschnitte sind fortgeschritten.

21.7 Mehrzeilige Template-Literale und Einrückung

Wenn wir mehrzeiligen Text in Template-Literale einfügen, stehen zwei Ziele im Konflikt: Einerseits sollte das Template-Literal eingerückt sein, damit es in den Quellcode passt. Andererseits sollten die Zeilen seines Inhalts in der linken Spalte beginnen.

Zum Beispiel

function div(text) {
  return `
    <div>
      ${text}
    </div>
  `;
}
console.log('Output:');
console.log(
  div('Hello!')
  // Replace spaces with mid-dots:
  .replace(/ /g, '·')
  // Replace \n with #\n:
  .replace(/\n/g, '#\n')
);

Aufgrund der Einrückung passt das Template-Literal gut in den Quellcode. Leider wird auch die Ausgabe eingerückt. Und wir wollen den Zeilenumbruch am Anfang und den Zeilenumbruch plus zwei Leerzeichen am Ende nicht.

Output:
#
····<div>#
······Hello!#
····</div>#
··

Es gibt zwei Möglichkeiten, dies zu beheben: über ein Tagged Template oder durch Trimming des Ergebnisses des Template-Literals.

21.7.1 Fix: Template-Tag zum Einrücken entfernen

Die erste Lösung besteht darin, einen benutzerdefinierten Template-Tag zu verwenden, der unerwünschte Leerzeichen entfernt. Er verwendet die erste Zeile nach dem anfänglichen Zeilenumbruch, um zu bestimmen, in welcher Spalte der Text beginnt, und kürzt die Einrückung überall. Er entfernt auch den Zeilenumbruch ganz am Anfang und die Einrückung ganz am Ende. Ein solcher Template-Tag ist dedent von Desmond Brand.

import dedent from 'dedent';
function divDedented(text) {
  return dedent`
    <div>
      ${text}
    </div>
  `.replace(/\n/g, '#\n');
}
console.log('Output:');
console.log(divDedented('Hello!'));

Diesmal ist die Ausgabe nicht eingerückt.

Output:
<div>#
  Hello!#
</div>

21.7.2 Fix: .trim()

Die zweite Lösung ist schneller, aber auch schmutziger.

function divDedented(text) {
  return `
<div>
  ${text}
</div>
  `.trim().replace(/\n/g, '#\n');
}
console.log('Output:');
console.log(divDedented('Hello!'));

Die String-Methode .trim() entfernt die überflüssigen Leerzeichen am Anfang und am Ende, aber der Inhalt selbst muss in der linken Spalte beginnen. Der Vorteil dieser Lösung ist, dass wir keine benutzerdefinierte Tag-Funktion benötigen. Der Nachteil ist, dass es hässlich aussieht.

Die Ausgabe ist dieselbe wie bei dedent.

Output:
<div>#
  Hello!#
</div>

21.8 Einfaches Templating über Template-Literale

Obwohl Template-Literale wie Text-Templates aussehen, ist nicht sofort ersichtlich, wie man sie für (Text-)Templating verwendet: Ein Text-Template erhält seine Daten aus einem Objekt, während ein Template-Literal seine Daten aus Variablen erhält. Die Lösung besteht darin, ein Template-Literal im Body einer Funktion zu verwenden, deren Parameter die Templating-Daten empfängt – zum Beispiel:

const tmpl = (data) => `Hello ${data.name}!`;
assert.equal(tmpl({name: 'Jane'}), 'Hello Jane!');

21.8.1 Ein komplexeres Beispiel

Als komplexeres Beispiel möchten wir ein Array von Adressen nehmen und eine HTML-Tabelle erzeugen. Dies ist das Array:

const addresses = [
  { first: '<Jane>', last: 'Bond' },
  { first: 'Lars', last: '<Croft>' },
];

Die Funktion tmpl(), die die HTML-Tabelle erzeugt, sieht wie folgt aus:

const tmpl = (addrs) => `
<table>
  ${addrs.map(
    (addr) => `
      <tr>
        <td>${escapeHtml(addr.first)}</td>
        <td>${escapeHtml(addr.last)}</td>
      </tr>
      `.trim()
  ).join('')}
</table>
`.trim();

Dieser Code enthält zwei Templating-Funktionen:

Die erste Templating-Funktion erzeugt ihr Ergebnis, indem sie ein Tabellenelement um ein Array wickelt, das sie zu einem String zusammenfügt (Zeile 10). Dieses Array wird erzeugt, indem die zweite Templating-Funktion auf jedes Element von addrs angewendet wird (Zeile 3). Es enthält daher Strings mit Tabellenzeilen.

Die Hilfsfunktion escapeHtml() wird verwendet, um spezielle HTML-Zeichen zu escapen (Zeile 6 und Zeile 7). Ihre Implementierung ist in der nächsten Unterabschnitt gezeigt.

Rufen wir tmpl() mit den Adressen auf und protokollieren das Ergebnis:

console.log(tmpl(addresses));

Die Ausgabe ist:

<table>
  <tr>
        <td>&lt;Jane&gt;</td>
        <td>Bond</td>
      </tr><tr>
        <td>Lars</td>
        <td>&lt;Croft&gt;</td>
      </tr>
</table>

21.8.2 Einfaches HTML-Escaping

Die folgende Funktion escapet einfachen Text, damit er in HTML unverändert angezeigt wird:

function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;') // first!
    .replace(/>/g, '&gt;')
    .replace(/</g, '&lt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
    .replace(/`/g, '&#96;')
    ;
}
assert.equal(
  escapeHtml('Rock & Roll'), 'Rock &amp; Roll');
assert.equal(
  escapeHtml('<blank>'), '&lt;blank&gt;');

  Übung: HTML-Templating

Übung mit Bonus-Herausforderung: exercises/template-literals/templating_test.mjs

  Quiz

Siehe Quiz-App.

Kommentare
Weiter: 22 Symbole