Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » JavaScript & jQuery » JavaScript: Template-String erlaubt Variablen und Umbrüche in Zeichenketten

JavaScript: Template-String erlaubt Variablen und Umbrüche in Zeichenketten

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Denis Potschien
  • 19. Juni 2015

Inhaltsverzeichnis

Arbeitet man mit JavaScript, kommt es immer wieder vor, dass Variablen oder Zeilenumbrüche  in einer Zeichenkette untergebracht werden müssen. Während man Variablen per Plus-Zeichen an eine Zeichenkette anhängt, ist das Einfügen von Zeilenumbrüchen nur als spezielle Steuerzeichen vorgesehen. Mit den neuen Template-String-Möglichkeiten von JavaScript, die derzeit noch experimentell sind, lassen sich Variablen und Umbrüche künftig deutlich unkomplizierter in einer Zeichenkette unterbringen.

javascript-templatestring-teaser_DE

Template-String auszeichnen

Die neuen Template-Strings erkennt man daran, dass sie anders als herkömmliche Zeichenketten nicht in Anführungszeichen stehen, sondern von sogenannten Backticks – ` – umschlossen sind. Es handelt sich hierbei um das Akut-Zeichen, welches vor allem im Französischen als „accent grave“ Verwendung findet. JavaScript erkennt Zeichenketten, die in Backticks stehen, als Template-Strings und interpretiert ihren Inhalt anders als einfache Zeichenketten.

var string = "Dies ist eine einfache Zeichenkette";
var templatestring = `Dies ist ein Template-String.`;

Will man beispielsweise Variablen in einer Zeichenkette unterbringen, ist dies per Template-Strings möglich, ohne die Zeichenkette für die Variable unterbrechen zu müssen. Variablen können quasi als Platzhalter in einen Template-String integriert werden.

var zahl1 = 10;
var zahl2 = 15;

var string = "Addiert man " + zahl1 + " mit " + zahl2 + ", ergibt das " + (zahl1 + zahl2) + ".";

var templatestring = `Addiert man ${zahl1} mit ${zahl2}, ergibt das ${zahl1 + zahl2}.`;

Das Beispiel zeigt, dass man sich bei Template-Strings die wiederkeherenden Anführungs- und Pluszeichen schenken kann und somit auf eine insgesamt kürzere Zeichenkette kommt. Das ist übersichtlicher und vor allem weniger anfällig für Fehler. Denn gerade fehlende Anführungszeichen sind eine häufige Fehlerquelle bei der Programmierung. Damit Variablen in Template-Strings zu erkennen sind, müssen sie in geschwungenen Klammern stehen und mit einem Dollar-Zeichen eingeleitet werden („${…}“).

Das Einfügen von Variablen in eine Zeichenkette, wie es die Template-Strings ermöglichen, gibt es auch bei anderen Programmiersprachen. So existiert eine ähnliche Auszeichnung von Variablen auch in PHP, wenngleich die Trennung von Zeichenkette und Variable in der Regel etwas performanter ist.

Template-String als Array ausgeben

Eine weitere Besonderheit der Template-Strings ist die Möglichkeit, Inhalt als Array auszugeben. Übergibt man einen Template-String an eine Funktion, lassen sich die einzelnen per Leerzeichen getrennten Zeichenketten separat auslesen.

function zerlegen(zeichenkette, wert1, wert2, wert3) {
  console.log(zeichenkette[0]); // "Addiert "
  console.log(wert1); // "10"
  console.log(wert2); // "15";
}
zerlegen `Addiert man ${zahl1} mit ${zahl2}, ergibt das ${zahl1 + zahl2}.`;

Im Beispiel wird die Funktion „zerlegen()“ erstellt, der vier Argumente übergeben werden können. Übergibt man dieser Funktion einen Template-String, werden alle Textbestandteile dem Array „zeichenkette“ zugewiesen. Der variable Inhalt, der per „${…}“ gekennzeichnet ist, wird den Variablen „wert1“, „wert2“ und „wert3“ zugeordnet.

Anders als bei der klassischen „split()“-Methode bleiben die Leerzeichen erhalten. Wichtig ist, dass beim Funktionsaufruf – anders als üblich – der Template-String nicht in Klammern stehen darf.

Zeilenumbrüche in Template-String

Will man in einer normalen Zeichenkette einen Zeilenumbruch unterbringen, muss man diesen mit dem Steuerzeichen „\n“ auszeichnen. In Template-Strings kann auf dieses Steuerzeichen verzichtet werden. Stattdessen reicht ein tatsächlicher Zeilenumbruch aus.

var string= "Zeile 1\nZeile 2";

var templatestring = `Zeile 1
Zeile 2`;

Würde man in einer normalen Zeichenkette einen tatsächlichen Zeilenumbruch unterbringen, würde dies zu einer Fehlermeldung führen. Allerdings ist es auch möglich, innerhalb von Template-Strings Steuerzeichen einzusetzen. Mit der Methode „String.raw()“ gibt man zudem etwaige Steuerzeichen in einem Template-String als solche aus.

console.log(`Zeile 1\nZeile 2`);

console.log(String.raw `Zeile1\nZeile2`);

Im zweiten Beispiel wandeln wir das Steuerzeichen nicht um, sondern geben es als „\n“ aus. Wie auch bei Funktionen, darf der Template-String nicht in Klammern an die Methode übergeben werden.

Browsersupport

Derzeit werden Template-Strings nur vom aktuellen Firefox ab der Version 34 und Chrome ab der Version 41 unterstützt. Template-Strings bereichern JavaScript nicht mit neuen Funktionen, können aber für übersichtlicheren und weniger fehleranfälligen Quelltext sorgen.

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

werbeagentur held traunstein logo

HELD Werbeagentur

Traunstein

United Ads Agentur Starnberg.

UnitedAds

Starnberg

Logo der Webdesign Agentur in Dresden mit Schriftzug DAZECON auf blauem Hintergrund.

DAZECON – Webdesign und Marketing

Dresden

Logo von Lausitz Design.

Internetagentur lausitz.design

Schleife

WPSteinheisser Photography

Ludwigsburg

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑