ES2015 – Teil 5: Verbesserte Objektliterale und Templatestrings

Im heutigen Artikel kümmern wir uns wieder um zwei neue Features der ES2015 Spezifikation. JavaScript verbessert in dieser Version die Definition von Objektliteralen und führt Templatestrings für bessere Lesbarkeit ein. Und was heißt das jetzt?

Was ist ein Objektliteral?

Diese Frage ist ganz einfach zu klären: Ein Objektliteral ist ein Objekt, das mit geschweiften Klammern erzeugt wird. Also so:

In ES2015 hat diese Schreibweise nun so einige Verbesserungen erhalten. Gehen wir diese einfach Schritt für Schritt durch!

 

Methodendefinition

In ES5 musste man Methoden in einem Objektliteral so definieren:

Dies wurde in ES2015 nun etwas abgekürzt und verschönert:

 

 

Abkürzungsdefinition von Attributen

Ein wenig syntaktischer Zucker ist bei der Attributsdefinition dazugekommen. Oft hat man eine Variable, deren Inhalt man in ein Attribut mit demselben Namen schreiben möchte. Zum Beispiel so:

Hier wurde eine Abkürzung eingeführt. Gebe ich also in ES2015 nur den Variablennamen an wird der Inhalt automatisch in das passende Attribut geschrieben:

 

Dynamische Attributsnamen

Wird der Namen eines Attributs dynamisch erzeugt haben wir auch hier jetzt bessere Möglichkeiten:

In diesem Beispiel wäre der Attributsnamen dann person.full_name.

 

 

Prototyp bei der Erzeugung setzen

Und noch einen letzten Punkt: In ES2015 können wir den Prototyp eines Objekts direkt bei der Erzeugung setzen.

 

Templatestrings

Templatestrings in ES2015 sollen uns das Leben erleichtern wenn wir beispielsweise HTML Code in unserem JavaScript haben (eben Templates). Du hattest die Situation bestimmt schon mal, dass du etwas wie das hier in deinen Code eingebaut hast:

Unübersichtlich, verwirrend und auch einfach hässlich! Templatestrings to the rescue!

Was nehmen wir aus diesem Beispiel alles mit?

  1. Templatestrings werden mit einem Gravis (der accent grave aus dem Französischunterricht) gestartet und beendet
  2. Sie können sich über mehrere Zeilen erstrecken (was in ES5 für Strings nicht erlaubt war)
  3. Variablen innerhalb eines Templatestrings können wir mit ${} ausgeben

 

 

Natürlich gibt es trotzdem etwas zu bedenken: Wenn unsere IDE kein ES2015 beherrscht wird das Syntaxhighlighting ziemlich chaotisch aussehen. Wir müssen also sicherstellen, dass ES2015 auch eingestellt ist.

 

Wie findest du die neuen Änderungen? Meiner Meinung nach machen Sie das Programmieren in JavaScript übersichtlicher und schneller. Hinterlass uns gerne einen Kommentar unter dem Artikel mit deiner Meinung.

Schreibe einen Kommentar

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

*