JavaScript Template-Strings

Template-Strings in JavaScript sind eine praktische String-Syntax, mit der Sie Ausdrücke und Variablen in Strings einbetten können.

Template-Strings verwenden Backticks``als Begrenzungszeichen des String-Literals.

Template-Literale sind Literale, die mit Backticks (`) begrenzt werden und mehrzeilige Strings, String-Interpolation mit eingebetteten Ausdrücken und eine spezielle Struktur namens getaggte Templates ermöglichen.

Syntax

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

Parameters

  • String-Text: Der String-Text, der Teil des Template-Literals wird. Fast alle Zeichen sind erlaubt, einschließlich Zeilenumbrüchen und anderer Whitespace-Zeichen. Wenn jedoch keine Tag-Funktion verwendet wird, verursachen ungültige Escape-Sequenzen Syntaxfehler.

  • Ausdruck: Der Ausdruck, der an der aktuellen Position eingefügt wird und dessen Wert in einen String umgewandelt oder an tagFunction übergeben wird.

  • tagFunction: Wenn angegeben, wird sie mit dem Array der Template-Strings und Substitutionsausdrücke aufgerufen, und der Rückgabewert wird der Wert des Template-Literals.

Beispiele

let text = `Hello EXAMPLE!`;

Selbst ausprobieren »

Browser-Unterstützung

Template-Literale sind ein neues ES6-Feature (JavaScript 2015) und werden derzeit von einigen der neuesten Browser unterstützt:

Chrome Edge Firefox Safari Opera
Unterstützt Unterstützt Unterstützt Unterstützt Unterstützt

In Template-Strings können Sie sowohl einfache als auch doppelte Anführungszeichen verwenden:

Beispiele

let text = `Er'wird oft "Example" genannt`;

Selbst ausprobieren »

Template-Strings unterstützen auch mehrzeiligen Text, ohne dass spezielle Escape-Zeichen erforderlich sind:

Beispiele

const multiLineText = `
  Dies ist
  ein mehr-zeiliger
  Text.
`;

Selbst ausprobieren »

Um ein Backtick in einem Template-Literal zu escapen (`), müssen Sie einen Backslash vor dem Backtick hinzufügen (\）。

`\`` === "`"; // true

Template-Literale werden von Backticks (`) anstelle von doppelten Anführungszeichen (") oder einfachen Anführungszeichen ('）。

Zusätzlich zu gewöhnlichen Strings können Template-Literale auch Platzhalter enthalten – einen eingebetteten Ausdruck, der durch ein Dollarzeichen und geschweifte Klammern begrenzt wird:${expression}。

Der String und die Platzhalter werden an eine Funktion übergeben (entweder an die Standardfunktion oder an eine benutzerdefinierte Funktion). Die Standardfunktion (wenn keine benutzerdefinierte Funktion bereitgestellt wird) führt einfach eine String-Interpolation durch, um Platzhalter zu ersetzen, und verkettet dann diese Teile zu einem einzigen String.

Template-Strings ermöglichen uns die Verwendung von Variablen:

Beispiele

const name = 'Example'; const age = 30; const message = `Mein Name ist ${name} und I'm ${age} Jahre alt.`;

Selbst ausprobieren »

In den obigen Beispielen sind${name}und${age}die Ausdrucksteile des Template-Strings, die in${}inside enthalten sind und zur Laufzeit ausgewertet werden.

Template-Strings ermöglichen es dir, Variablen zu referenzieren, Funktionsaufrufe durchzuführen und beliebige JavaScript-Ausdrücke im String auszuführen.

Template-Strings ermöglichen es uns, Ausdrücke zu verwenden:

Beispiele

let price = 10;
let VAT = 0.25;

let total = `Gesamt: ${(price * (1 + VAT)).toFixed(2)}`;

Selbst ausprobieren »

Verwende Template-Strings als HTML-Vorlagen:

Beispiele

let header = "";
let tags = ["EXAMPLE", "GOOGLE", "TAOBAO"];

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;

Selbst ausprobieren »
Andere Erweiterungen