Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →

Dr. Web » JavaScript & jQuery » ECMAScript 6 besser verstehen: Template Strings

ECMAScript 6 besser verstehen: Template Strings

Artikel weiterempfehlen

  • Aktualisiert am 22. Februar 2023
  • Jetzt kommentieren
  • Markus Seyfferth von Markus Seyfferth
Lesedauer: 3 Minuten

Inhaltsverzeichnis

Willkommen zum zweiten Teil unserer Artikelserie zu ECMAScript 6. Eines der Features, das ich am neuen Microsoft Edge, der neuen Browser Rendering Engine von Microsoft, am meisten mag, ist ihre umfangreiche Unterstützung von ECMAScript 6. In dieser Serie stelle ich einige der coolen Dinge vor, die man mit ECMAScript 6 tun kann, vor allem, wenn man große Web-Anwendungen schreibt.

ECMAScript 6 besser verstehen: Template Strings

Im ersten Teil habe ich euch in das Thema Klassen und Vererbung eingeführt. In diesem Artikel konzentriere ich mich auf Template Strings, ausgehend von meinen eigenen Erfahrungen beim Erstellen von Embedded Expressions.

Eine Lösung für das „Line Return“-Problem

Wenn ich an babylon.js arbeite, habe ich mit Code für Shader zu tun. Für ein besseres Verständnis würde ich sagen, man könnte diesen Code am ehesten als einen Haufen Text beschreiben, der wie C aussieht.

Ein Beispiel dafür findet sich hier.

Das Problem bei sehr langen Texten in JavaScript ist der Zeilenwechsel. Wie oft haben wir Dinge wie diese hier geschrieben?

var myTooLongString = "A long time ago, in a galaxy far," +
                      "far away...." +
                      "It is a period of civil war." +
                      "Rebel spaceships, striking" +
                      "from a hidden base, have won" +
                      "their first victory against" + 
                      "the evil Galactic Empire.";

Bei mehr als 200 Zeilen langem Code für Shaders wird das richtig anstrengend.

Glücklicherweise besitzt ECMAScript 6 das neue Template Strings-Feature. Neben anderen schönen Erleichterungen, die dieses Feature bietet, unterstützt ein Template String vor allem direkt mehrzeilige Strings:

var myTooLongString = `A long time ago, in a galaxy far
far away....
It is a period of civil war.
Rebel spaceships, striking
from a hidden base, have won
their first victory against
the evil Galactic Empire`;

Weil innerhalb eines Template String alle Zeichen von Bedeutung sind, kann man keine Leerzeichen an den Anfang der Zeilen einfügen.

Als JavaScript-Entwickler haben wir drei Arten, um Strings zu definieren:

  • Mit “”
  • Mit ‘’
  • Mit „ (auch als „backtick“ oder Gravis bzw. „accent grave“) bezeichnet.

Und was ist daran nun ein Template?

Die Unterstützung mehrzeiligen Codes ist nicht das einzige Feature von Template Strings. So kann man Template Strings auch dafür nutzen, um Platzhalter mit Variablenwerten zu ersetzen, wie ihr es z.B. mit printf in C/C++ oder string.Format in C# sicher schon getan habt:

var items = [];
items.push("banana");
items.push("tomato");
items.push("light saber");

var total = 100.5;

result.innerHTML = `You have ${items.length} item(s) in your basket for a total of $${total}`;

Dieser Code führt zu folgender Ausgabe:

You have 3 item(s) in your basket for a total of $100.5

Ganz praktisch oder?
Hier zur Erinnerung, wie das mit ECMAScript 5 ging:

result.innerHTML = "You have " + items.length + " item(s) in your basket for a total of $" + total;

Mit Tags noch einen Schritt weiter gehen

Im letzten Schritt der Spezifikation von Template Strings geht es darum, vor dem String selbst eine eigene Funktion einzufügen (custom function), um einen Template String mit einem „Tag“ zu erstellen:

var myUselessFunction = function (strings,...values) {
    var output = "";
    for (var index = 0; index 

Die Funktion dient hier dazu, sowohl Zugang zu den konstanten Teilen des Strings als auch zu den Variablen-Werten zu bekommen.
Im vorhergehenden Beispiel sehen Strings und Werte (values) wie folgt aus:

  • strings[0] = “You have “
  • values[0] = 3
  • strings[1] = “items in your basket for a total of $”
  • values[1] = 100.5
  • strings[2] = “”

Wie wir sehen, ist jeder Value[n] umgeben von konstanten Strings (strings[n] und strings[n + 1]).

Das gibt uns Kontrolle darüber, wie der endgültige Output-String aufgebaut ist. Im vorigen Beispiel haben wir nur das grundsätzliche Verhalten von Template Strings reproduziert. Wir können aber auch noch weiter gehen und dem String eine coole Verarbeitung (processing) mitgeben.

Hier zum Beispiel ist ein Stückchen Code, welches Strings blockiert, die versuchen, benutzerdefinierte DOM-Elemente einzuschleusen:

var items = [];
items.push("banana");
items.push("tomato");
items.push("light saber");

var total = "Trying to hijack your site 
"; var myTagFunction = function (strings,...values) { var output = ""; for (var index = 0; index

"Getaggte" Template Strings sind für viele Anwendungen geeignet, wie z.B. Sicherheit, Ortsbestimmung, das Erstellen einer eigenen, domain-spezifischen Sprache und mehr.

Raw Strings

Tagging-Funktionen haben eine besondere Option, wenn sie auf konstante Strings zugreifen: Sie nutzen strings.raw um "unescaped" String-Values zu erhalten. Das heißt z.B. im Fall von “\n” wird das nicht als einzelnes Zeichen betrachtet, sondern tatsächlich als zwei Zeichen “\” und “n”.

Hauptziel ist es, uns zu ermöglichen, auf den String zugreifen zu können, so wie er eingegeben wurde:

var myRawFunction = function (strings,...values) {
    var output = "";
    for (var index = 0; index 

Dieser Code führt zu folgender Ausgabe:

You have 3 item(s) in your basket\n. For a total of $100.5

Man kann auch eine neue String-Funktion nutzen: String.raw(). Diese bereits eingebaute Funktion führt genau das aus, was unser voriges Beispiel bereits getan hat:

result.innerHTML = String.raw `You have ${items.length} item(s) in your basket\n.For a total of $${total}`;

Fazit

Microsoft Edge und die aktuellen Versionen von Chrome (41+), Opera(28+) and Firefox (35+) unterstützen Template Strings. In welcher Breite ECMAScript 6 allgemein unterstützt wird, kannst du hier nachschlagen. Wer Anwendungen für das moderne Web erstellen will, für den sind Template Strings eine sinnvolle Sache.

Einen vollständigen Überblick zu den neuen Web-Standards und Features, die Microsoft Edge mitbringt – wie z.B. WebAudio – bietet die Liste von http://dev.modern.ie/platform/status.

Mehr Tipps, Tricks und Hilfen rund um JavaScript

Microsoft hält eine ganze Reihe kostenloser Lehrangebote zu zahlreichen Open Source JavaScript-Themen bereit – und seit der Veröffentlichung von Microsoft Edge tun wir in diesem Bereich noch sehr viel mehr. Auch von mir gibt es Tutorials:

  • Introduction to WebGL 3D and HTML5 and Babylon.JS
  • Building a Single Page Application with ASP.NET and AngularJS
  • Cutting Edge Graphics in HTML

Außerdem haben wir da noch die Schulungsreihe unseres Teams:

  • Practical Performance Tips to Make your HTML/JavaScript Faster (7-teilige Serie von Responsive Design, über Casual Games bis zu optimierter Performance)
  • The Modern Web Platform JumpStart (Grundlagen zu HTML, CSS und JS)
  • Developing Universal Windows App with HTML and JavaScript JumpStart (unter Nutzung der JS, die wir bereits für eine App erstellt haben)

Praktisch sind zudem die folgenden kostenlosen Tools: Visual Studio Community, Azure Trial und Cross Browser Testing Tools für Mac, Linux oder Windows.

Dieser Artikel ist Teil der Web-Dev Tech-Series von Microsoft. Wir freuen uns Microsoft Edge (früher Project Spartan genannt) und seine neue Rendering Engine mit euch zu teilen. Kostenlose Virtual Machines oder Remote Testings für Mac, iOS, Android oder Windows gibt es hier: @ dev.modern.IE.

(dpe)

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Lust auf mehr?

  • Dieter Petereit Dieter Petereit
  • 7. März 2018

Wenn das Webdesign verschwindet: Headless Browser brauchen keine schöne Gestalt

Ist der Browser, wie wir ihn heute kennen, ein Auslaufmodell? Können wir auch ohne ihn das Web nutzen? Die Antwort auf die zweite Frage ist ein klares Ja. Das Headless Web macht es möglich.
  • Design, JavaScript & jQuery, Programmierung, UX Design
  • Dieter Petereit Dieter Petereit
  • 16. Februar 2018

Einfache Lösungen für dynamisches Webdesign mit HTML5-Data-Attributen

Lebendige Effekte auf Websites können dir im Wettbewerb um die Aufmerksamkeit der Nutzer gute Dienste leisten. Du denkst vielleicht direkt an parallaxes Scrolling. Das aber ist nicht die einzige Option für dynamisches Webdesign.
  • Design, HTML, JavaScript & jQuery, Programmierung, UX Design
  • Denis Potschien Denis Potschien
  • 14. Juni 2017

JavaScript und Suchmaschinen: Das solltest du beachten

Noch vor einigen Jahren war JavaScript mehr als umstritten. Nervige Werbe-Pop-ups führten dazu, dass die Programmiersprache oft ganz grundsätzlich blockiert wurde. Mittlerweile ist JavaScript aus dem modernen Webdesign nicht mehr wegzudenken. Vor allem im mobilen Internet spielt JavaScript eine wichtige Rolle – unter anderem zur Medienwiedergabe, aber auch für Geolocation und moderne Navigationen. Doch wie gut verträgt sich JavaScript mit Suchmaschinen? Was musst du beachten?
  • JavaScript & jQuery, SEO
  • Denis Potschien Denis Potschien
  • 26. Mai 2017

Framework jQuery: die Vorteile und Nachteile

Frameworks wie jQuery gehören zu den bekanntesten und weit verbreitetsten Helfer, die auf Websites eingesetzt werden. Das Framework ermöglicht es, schnell und unkompliziert auf HTML-Elemente zuzugreifen und diese zu manipulieren oder per CSS zu gestalten. Ich selbst bin kein großer Freund von solchen Frameworks und versuche, sie – wo immer es geht – zu vermeiden. Das funktioniert nicht immer, ist aber häufig problemlos machbar.
  • JavaScript & jQuery, Programmierung, Webdesign
  • Markus Seyfferth Markus Seyfferth
  • 31. Juli 2016

PHP 7 und WordPress: Kannst Du den Turbo bereits zünden? [Infografik]

Seit dem dritten Dezember 2015 ist die neueste Version von PHP erhältlich. Um Altlasten zu beseitigen, entschied man sich dazu, teilweise die Abwärtskompatibilität aufzugeben. Für WordPress-User stellt sich nun die Frage, ob PHP7 bereits nutzbar ist und welche Vorteile die Nutzung bringen kann. Daher werfen wir einen kurzen Blick auf diese wichtigen Fragen.
  • Programmierung, Tipps, Tricks & Tutorials, WordPress
  • Denis Potschien Denis Potschien
  • 9. Juli 2016

Mit Anime.js animierst du CSS, SVG und mehr ganz einfach

Zu den zahlreichen Frameworks für Animationen gesellt sich mit anime.js ein weiteres. Im Gegensatz zu den vielen anderen Frameworks erlaubt anime.js nicht nur die Animation per CSS-Eigenschaften. Du kannst damit auch SVG- und HTML-Eigenschaften per Animation verändern. Gerade im modernen Webdesign ist das SVG-Format kaum wegzudenken. Das Framework kommt jedenfalls zur rechten Zeit.
  • JavaScript & jQuery, Programmierung

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens 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
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

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

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

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 ↑