Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

JavaScript/Objekte/String/template-literal

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari
  • ECMA 6

Kompabilitätsinformationen bei kangax

Template-Literale sind eine besondere Form von Zeichenketten, die mit ECMAScript 6 in den Sprachstandandard aufgenommen wurden. Sie entsprechen semantisch in etwa den aus PHP bekannten heredoc-Strings.

Ein Template-Literal unterscheidet sich syntaktisch von einem String dadurch, dass es `Backticks` (rückwärts geneigte Hochkommas) als Begrenzerzeichen verwendet, statt der bekannten ' oder " Zeichen. Darüber hinaus kann ein Template-Literal auch über mehrere Zeilen hinweg gehen, die Zeilenumbrüche werden in ein Linefeed-Zeichen (\n) umgewandelt.

Innerhalb eines Template-Literals können, begrenzt durch ${ und }, beliebige Javascript-Ausdrücke eingesetzt werden. Das ermöglicht das kompakte Zusammensetzen längerer Zeichenketten aus vielen festen und variablen Teilen.

Beispiel
auto = { marke: "Acme",
         modell: "08/15",
         treibstoff: "Kerosin",
         verbrauch: "17 gal" };
  
info = `Ein ${auto.marke} ${auto.modell} verbraucht ${auto.verbrauch} ${auto.treibstoff} auf 100 km.`;
Ergibt: "Ein Acme 08/15 verbraucht 17 gal Kerosin auf 100 km.";
Beispiel
formFeld = { label: "Name", formVar: "name", wert: 4711 };

html = `<div>
  <label for='${formFeld.formVar}'>${formFeld.label}:
    <input type='text' name='${formFeld.formVar}' value='${formFeld.wert}'>
  </label>
</div>`;
Ergibt:
<div>
  <label for='name'>Name:
    <input type='text' name='name' value='4711'>
  </label>
</div>

Soll innerhalb eines Template-Literals ein Backtick oder die Zeichenfolge ${ als Text verwendet werden, so ist ein Backslash als Escape-Zeichen voranzustellen:

Beispiel
var a = 1,
    b = 2, 
    c = 3;
var muster = `Das Template \`\${a} + \${b} = \${c}\` wird für a=${a}, b=${b} und c=${c} zu "${a} + ${b} = ${c}"`
Ergibt: Das Template `${a} + ${b} = ${c}` wird für a=1, b=2 und c=3 zu "1 + 2 = 3"

Tagged Template Literal[Bearbeiten]

Als Tagged Template Literal bezeichnet man eine spezielle Verknüpfung eines ausführbaren Objekts[1] mit einem Template-Literal. Das ausführbare Objekt wird in diesem Zusammenhang als das Tag bezeichnet.

Mittels eines Tagged Template-Literals kann man das Parsen eines Template-Literals und das Einsetzen der Werte in das Resultat voneinander trennen. Das Parsen übernimmt weiterhin Javascript, die weitere Verarbeitung das angegebene Tag. Das Ergebnis des Parsers besteht aus den String-Segmenten, die als Klartext im Template-Literal standen, und den Werten für die verwendeten Platzhalter. Die String-Segmente werden der Tag-Funktion als Array im ersten Parameter bereitgestellt, die ermittelten Werte als weitere Parameter. Im einfachsten Fall enthält das Template-Literal keine Platzhalter, dann bekommt die Tag-Funktion lediglich ein Array der Länge 1 übergeben:

(bitte über die Färbung hinwegsehen, das Wiki versteht ES6 nicht zu 100%)
alert(asEntities `Hallo <"> Self & HTML`);

function asEntities(x) {
   return x[0].replace('&', '&amp;').replace('"', '&quot;').replace('<', '&lt;').replace('>', '&gt;');
}

Wenn das Template-Literal Platzhalter verwendet, hat man beim Programmieren der Tag-Funktion die Wahl, die Werte der Platzhalter in einzelnen Parametern oder über einen Restparameter entgegenzunehmen. Die Schwierigkeit beim Programmieren der Tag-Funktion besteht darin, dass die Interpretation der Platzhalterwerte vom Template abhängt, und die Template-Literale keine Möglichkeit anbieten, einem Platzhalter eine semantische Bedeutung mitzugeben. Wenn eine solche Semantik benötigt wird, muss man sich eigene Methoden überlegen, diese Semantik zu beschreiben. Beispielsweise könnte man folgendes schreiben:

Beispiel
var menge = 5.32,
    betrag = 17.15,
    treibstoff = "Ethanol";

var text = formatString `Der Preis für ${menge}:f(2) Liter ${treibstoff} beträgt ${betrag}:c(EUR)`;

function formatString(teile, ...werte) {
   var result = teile[0];
   var formatter;
   for (int i=0; i<werte.length; i++) {
      var formatter = getFormatter(teile[i+1]);
      result += formatter(werte[i]) + teile[i+1];   
   }
   return result;
}

function getFormatter(textPart) {
   if (textPart.length < 2 || textPart[0] != ':')
      return identityFormatter;
   var formatCode = textPart[1];
   // Die weitere Magik sei als Übung dem Leser überlassen. 
   // Je FormatCode ist ein passender Formatter zu liefern
}

function identityFormatter(x) {
   return x;
}

Diese Tag-Funktion versucht, aus dem dem Textteil, der auf den jeweiligen Wert folgt, ein Formatierungscode herauszuinterpretieren. Ein Formatierungscode beginnt hier mit einem Doppelpunkt, gefolgt von einem Formatierungszeichen. Dahinter können in Klammern noch Parameter für das Formatierungszeichen folgen. f(2) würde z.B. eine Zahl mit zwei Nachkommastellen formatieren. c(EUR) einen Betrag in der Währung Euro. Wird kein Formatierungscode erkannt, wird der Wert unverändert übernommen (sprich: seine standardmäßige toString Methode verwendet). Dazu liefert getFormatter den identityFormatter zurück. Ansonsten wird passend zum erkannten Formatcode eine Funktion zurückgegeben, die für diesen Formatcode die Formatierung übernimmt. Es würde hier den Rahmen sprengen, diesen Teil auszuprogrammieren, es sollte nur der Ansatz gezeigt werden, um eine Idee für die Möglichkeiten zu liefern, die Tagged Template Literale bieten.

Man sollte hierbei aber nicht vergessen, dass es fertige Template-Libraries gibt, die einem den Selbstbau abnehmen und den Vorzug haben, bereits getestet zu sein.

Besonderheiten der Tag-Funktionsparameter[Bearbeiten]

Das Array mit Textteilen, das der Tag-Funktion als erster Parameter übergeben wird, ist durch eine Eigenschaft namens raw erweitert. In dieser Eigenschaft findet sich wiederum ein Array, in dem die Teile des Template-Strings exakt so zu finden sind, wie sie im Sourcecode standen. Das kann man zum einen dazu nutzen, seine eigenen Escape-Regeln einzubringen, aber vielleicht möchte man ja auch den exakten Sourcecode beibehalten. Das [String] Objekt liefert eine Methode raw mit, die genau dafür da ist. Sie setzt das Template-Literal in einen String um, in dem alle Escape-Sequenzen noch vorhanden sind.

Beispiel
var text = "Fischers Fritze Frischt Fische Fische",
    original = String.raw `Einleitung\nNun beginnt der Text: {text}\nSchluss`;

var l = original.length; // ergibt 80, nicht 78!
  1. z.B. einer Funktion - in ES6 ist das etwas komplizierter

Weblinks[Bearbeiten]