JavaScript String Templates

Synonyme:

  • Template Literals
  • Template Strings
  • String-Vorlagen
  • Back-Tics-Syntax

Back-Tics-Syntax

Template-String-LiteralsVerwenden Sie Back-Tics (``) anstatt Anführungszeichen (""), um Strings zu definieren:

Beispiel

let text = `Hello World!`;

Probieren Sie es selbst aus

Anführungszeichen im String

Durch die VerwendungTemplate-String-Literals，Sie können gleichzeitig einfache und doppelte Anführungszeichen in einem String verwenden:

Beispiel

let text = `He's often called "Johnny"`;

Probieren Sie es selbst aus

Mehrzeilige Strings

Template-String-LiteralsMehrzeilige Strings sind erlaubt:

Beispiel

let text =
The quick
brown fox
springt über
the lazy dog`;

Probieren Sie es selbst aus

Interpolation

Template-String-LiteralsSie bietet eine einfache Methode, um Variablen und Ausdrücke in Strings einzufügen.

Diese Methode wird als String-Interpolation (string interpolation) bezeichnet.

Syntax

${...}

Variablen-Ersetzung

Template-String-LiteralsVariablen in Strings sind erlaubt:

Beispiel

let firstName = "Bill";
let lastName = "Gates";
let text = `Welcome ${firstName}, ${lastName}!`;

Probieren Sie es selbst aus

Die automatische Ersetzung von Variablen durch tatsächliche Werte wird alsString-Interpolation.

Ersetzung durch Ausdruck

Template-String-LiteralsAusdrücke in Strings sind erlaubt:

Beispiel

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

Probieren Sie es selbst aus

Die automatische Ersetzung von Ausdrücken durch tatsächliche Werte wird als String-Interpolation bezeichnet.

HTML-Vorlagen

Beispiel

let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}
html += `</ul>`;

Probieren Sie es selbst aus

Browser-Unterstützung

Internet Explorer unterstützt dies nichtTemplate-String-Literals.

Die erste Browser-Version, die Template-String-Literals vollständig unterstützt, ist:

Chrome IE Firefox Safari Opera
Chrome 41 Edge 13 Firefox 34 Safari 10 Opera 29
März 2015 November 2015 Dezember 2014 September 2016 April 2015

Vollständige String-Referenz

Für eine vollständige Referenz besuchen Sie bitte unsere vollständige JavaScript String-Referenzhandbuch.

Dieses Handbuch enthält eine Beschreibung und Beispiele aller String-Attribute und -Methoden.