Template-Literale

Parameter

• ${expression} – ein beliebiger Ausdruck; das Ergebnis wird in eine Zeichenkette umgewandelt.
• tag`…` – eine Funktion vor dem Template erhält die Textteile und die Werte der Ausdrücke getrennt (Tagged Template).

Rückgabewert

Eine Zeichenkette (bei einem Tag das, was die Funktion zurückgibt).

Beispiele

const product = { name: 'Kaffee', price: 17.9, qty: 2 };
console.log(`${product.name}: ${product.qty} × ${product.price} EUR = ${product.qty * product.price} EUR`);
console.log(`Auf Lager: ${product.qty > 0 ? 'ja' : 'nein'}`);
const html = `<li>
  ${product.name}
</li>`;
console.log(html);

Ausgabe:

Kaffee: 2 × 17.9 EUR = 35.8 EUR
Auf Lager: ja
<li>
  Kaffee
</li>

Ein Tag, der die Werte für HTML maskiert:

const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
const safe = (parts, ...values) => parts.reduce((v, p, i) => v + esc(values[i - 1]) + p);
const name = '<script>alert(1)</script>';
console.log(safe`<p>Hallo, ${name}</p>`);

Ausgabe:

<p>Hallo, &lt;script&gt;alert(1)&lt;/script&gt;</p>

Worauf Sie achten sollten

• Werte vom Benutzer, die mit ${…} und innerHTML ins HTML gelangen, ermöglichen XSS. Fügen Sie Text mit textContent ein oder maskieren Sie die Werte.
• Die Einrückung innerhalb eines mehrzeiligen Templates gehört zur Zeichenkette.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit September 2015, gilt als weithin verfügbar seit März 2018. Ab Version: Chrome 41, Firefox 34, Safari 9; Node.js 4.0.0. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
String.raw()
String.prototype.concat()
String()