Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » JavaScript & jQuery » JavaScript: Template-String erlaubt Variablen und Umbrüche in Zeichenketten

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

  • Aktualisiert am 19. April 2023
  • von Denis Potschien
  • JavaScript & jQuery, Programmierung, Webdesign
  •  

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 („${…}“).

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

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 1Zeile 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.

Inhaltsverzeichnis

Agenturpartner in Innsbruck

Edit Content

VABELHAVT

Durch mein Studium und meine kontinuierlichen Weiterbildungen bin ich mit den aktuellsten digitalen Trends vertraut und verhelfe Ihrem Unternehmen zu mehr Sichtbarkeit im Internet.

— Lars Boob,
Geschäftsführer
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.

Schreibe einen Kommentar Antworten abbrechen

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

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

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

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen