Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

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

ECMAScript 6 besser verstehen: Template Strings

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Dr. Web Redaktion
  • 18. Dezember 2015
Bookmarke mich
Share on pocket

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 < values.length; index++) {
        output += strings[index] + values[index];
    }

    output += strings[index]
    return output;
}

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

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 < values.length; index++) { var valueString = values[index].toString(); if (valueString.indexOf("<") !== -1) { // Far more complex tests can be implemented here 🙂 return "String analyzed and refused!"; } output += strings[index] + values[index]; } output += strings[index] return output; } result.innerHTML = myTagFunction `You have ${items.length} item(s) in your basket for a total of $${total}`;

"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 < values.length; index++) {
        output += strings.raw[index] + values[index];
    }

    output += strings.raw[index]

    console.log(strings.length, values.length);
    return output;
}

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

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)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, Markus Seyfferth und Jörg Mrusek.

Agenturpartner

Berlin Translate

Berlin

Rocket Backlinks

Aalen

Optimerch GmbH

Dortmund

BIZ Digital Marketing

Nürtingen

aeosys

Soest

Alle Agenturpartner

Jobs

Senior Online Marketing Manager und stv. Geschäftsführer

Innsbruck

Cloud Engineer Container & Kubernetes

Karlsruhe

Frontend Development & Project Management

Remote

SEO Manager – Vollzeit

Remote

Elektroinstallateur – Rechenzentrum

Karlsruhe

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Grav CMS: Blitzschnell, einfach und modern

Grav CMS ist eines der interessantesten neuen Content Management Systeme am Markt. Es geht einen völlig anderen Weg als bisher bekannte Ansätze und kommt sehr

 →   

Du lernst nie aus: 20+ internationale Online-Schulungsangebote

Glücklicherweise sind die Zeiten vorbei, in denen sich Wissen hinter den Mauern altehrwürdiger Schulen oder in den Tiefen riesiger Bibliotheken verschanzte. Weite Teile der Weltbevölkerung

 →   

Atomic Design: So gestaltest du deine Website modular

Begrifflichkeiten im Webdesign sind häufig nicht viel mehr als Worthülsen. Der Begriff „Atomic Design” darf zu diesen Hülsen gezählt werden. Denn er dient nur seinem

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.