Template Literals

Das Template Literal, das in ES6 eingeführt wurde, ist eine neue Art, einen String zu erstellen. Damit kommen neue Funktionen, die uns mehr Kontrolle über dynamische Strings in unseren Programmen geben. Vorbei sind die Zeiten langer String-Verkettungen!

Um ein Template Literal zu erstellen, verwenden wir anstelle von einfachen Anführungszeichen (') oder doppelten Anführungszeichen (") das Backtick-Zeichen (`). Dies erzeugt einen neuen String, den wir beliebig verwenden können.

Grundlegende Verwendung

let newString = `A string`;

Mehrzeilig

Das Tolle an Template Literals ist, dass wir jetzt mehrzeilige Strings erstellen können! Früher mussten wir, wenn ein String über mehrere Zeilen gehen sollte, das Zeichen \n oder eine neue Zeile verwenden.

// The old way
var myMultiString = 'Some text that I want\nOn two lines!';

Mit einem Template Literal String können wir einfach eine neue Zeile in den String einfügen, während wir ihn schreiben.

var myMultiString= `This will be
on two lines!`;

Dies erzeugt einen String mit einer neuen Zeile darin. Die Möglichkeit, dies mit Ausdrücken zu tun, macht Template Literals zu einer wirklich schönen Vorlagensprache für den Aufbau von HTML-Teilen, die wir später behandeln werden. Aber was ist mit der Verkettung? Schauen wir uns an, wie wir dynamisch Werte in unsere neuen Template Literals einfügen können.

Ausdrücke

In der neuen Syntax für Template Literals haben wir sogenannte Ausdrücke, und sie sehen so aus: ${expression}. Betrachten Sie den folgenden Code.

let name = `Ryan`;

console.log(`Hi my name is ${name}`);

Die ${}-Syntax ermöglicht es uns, einen Ausdruck darin einzufügen, und er liefert den Wert, der in unserem obigen Fall nur eine Variable ist, die einen String enthält! Hier gibt es etwas zu beachten: Wenn Sie Werte wie oben einfügen möchten, müssen Sie für die Variable name kein Template Literal verwenden. Es könnte einfach ein normaler String sein.

console.log(`Hi my name is ${'Ryan'}`);

Dies erzeugt die gleiche Ausgabe. Diese Ausdrücke tun mehr, als uns nur zu erlauben, Variablen einzufügen, die Strings enthalten. Wir können jede Art von Ausdrücken auswerten, die wir möchten.

let price = 19.99;
let tax = 1.13;

let total = `The total prices is ${price * tax}`;

Wir können dies auch mit einem komplexeren Objekt verwenden.

let person = {
    firstName: `Ryan`,
    lastName: `Christiani`,
    sayName() {
        return `Hi my name is ${this.firstName} ${this.lastName}`;
    }
};

Hier haben wir ein person-Objekt mit einer sayName()-Methode darauf. Wir können auf die Eigenschaften eines Objekts innerhalb der ${}-Syntax zugreifen.

HTML-Vorlagen

Mit der Möglichkeit, mehrzeilige Strings zu haben und Template Expressions zu verwenden, um Inhalte in unseren String einzufügen, ist dies sehr gut für HTML-Vorlagen in unserem Code geeignet.

Stellen wir uns vor, wir erhalten Daten von einer API, die ungefähr so aussehen:

{
    "id": 1,
    "name": "Bulbasaur",
    "base_experience": 64,
    "height": 7,
    "is_default": true,
    "order": 1,
    "weight": 69,
    ...
}

Diese „imaginäre“ API ist natürlich die pokeapi! Mit dieser Datenstruktur im Hinterkopf erstellen wir nun den Markup, der dieses Pokémon anzeigen würde.

function createMarkup(data) {
    return `
        <article class="pokemon">
            <h3>${data.name}</h3>
            <p>The Pokemon ${data.name} has a base experience of ${data.base_experience}, they also weigh ${data.weight}</p>
        </article>
    `
}

Ohne eine Bibliothek wie Handlebars oder Mustache zu verwenden, können wir in unserem JavaScript schöne und einfach zu bedienende Vorlagen erstellen!

Getaggte Vorlagen

Ein weiteres Merkmal von Template Literals ist die Möglichkeit, getaggte Template Literals zu erstellen. Sie erstellen eine Funktion und diese Funktion sieht aus wie jede andere Funktion, aber beim Aufrufen sieht sie anders aus.

function myTaggedLiteral(strings) {
    console.log(strings);
}

myTaggedLiteral`test`; 
// ["test"]

Beachten Sie, dass beim Aufruf der Funktion keine Klammern () verwendet werden! Wir wenden ein Template Literal dort an, wo die Klammern wären. Als Parameter unserer Funktion erhalten wir ein Array der Strings in unserem Literal. Lassen Sie uns den String, den wir an die Funktion senden, erweitern und einen Ausdruck einfügen und auch einen neuen Parameter in unserer Funktion einfügen.

function myTaggedLiteral(strings, value) {
    console.log(strings,value);
}

let someText = 'Neat';
myTaggedLiteral`test ${someText}`; 
// ["test", ""]
// "Neat"

Wenn wir einen Ausdruck verwenden, können wir ihn über die nächsten Parameter zugreifen, und das geht weiter. Sagen wir, wir fügen einen weiteren Ausdruck hinzu.

function myTaggedLiteral(strings, value, value2) {
    console.log(strings,value);
}

let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`; 
// ["test", ""]
// "Neat"
// 5

Das ist ziemlich mächtig: Es ermöglicht Ihnen, die in einem String verwendeten Daten zu nehmen und sie nach Belieben zu manipulieren.

Wiederverwendbare Vorlagen

Betrachten wir einen einfachen Anwendungsfall für Template Literals. Wenn Sie sich von oben erinnern, haben wir gesehen, wie gut Template Literals für die Erstellung von Vorlagen funktionieren! Lassen Sie uns das einen Schritt weiter gehen und eine Funktion erstellen, die es uns ermöglicht, wiederverwendbare Vorlagen zu erstellen. Die Idee ist, dass wir die anfängliche Vorlage erstellen und dann Daten übergeben können, die sie später verwenden soll.

const student = {
    name: "Ryan Christiani",
    blogUrl: "http://ryanchristiani.com"
}

const studentTemplate = templater`<article>
    <h3>${'name'} is a student at HackerYou</h3>
    <p>You can find their work at ${'blogUrl'}.</p>

</article>`;

const myTemplate = studentTemplate(student);
console.log(myTemplate);
// Output will look like this!
// <article>
//    <h3>Ryan Christiani is a student at HackerYou</h3>
//    <p>You can find their work at http://ryanchristiani.com.</p>
// </article>

Schauen wir uns die Implementierung unserer templater-Funktion an.

const templater = function(strings, ...keys) {

}

Das erste, was Ihnen auffallen wird, ist dieser ...keys-Parameter. Die ...-Syntax ist das, was man Rest-Parameter nennt; sie sammelt alle Parameter, die die Funktion hat, und erstellt ein Array für uns.

Als Nächstes möchten wir eine Funktion zurückgeben, die auf unser Objekt zugreift. Das Zurückgeben der Funktion ermöglicht es uns, unsere Studentendaten aufzurufen und zu übergeben, wie hier: studentTemplate(student).

const templater = function(strings, ...keys) {
    return function(data) {

    } 
}

Mit diesen Daten, die uns nun zur Verfügung stehen, müssen wir einige Manipulationen durchführen. Der Prozess ist wie folgt: Zuerst müssen wir eine Kopie des strings-Arrays erstellen. Wir erstellen eine Kopie, falls wir später auf das Original verweisen möchten. Dann müssen wir durch das Array von keys iterieren und für jeden davon die Daten aus dem Objekt abrufen, das dem Schlüssel entspricht (beachten Sie, wie wir in diesem Beispiel einen String im ${} übergeben) und ihn dort in unser Array einfügen, wo er benötigt wird. Schließlich müssen wir alles wieder zu einem String zusammenfügen und ihn aus der Funktion zurückgeben!

function templater(strings, ...keys) {
    return function(data) {
        let temp = strings.slice();
        keys.forEach((key, i) => {
            temp[i] = temp[i] + data[key];
        });
        return temp.join('');
    }
};

Sie werden feststellen, dass dies kein erschöpfendes Beispiel ist. Wir haben keine Möglichkeit, verschachtelte Daten oder Array-Werte zu verarbeiten; es handelt sich lediglich um Strings. Aber ich hoffe, dieses Beispiel hilft, zu veranschaulichen, was Sie mit getaggten Template Literals beginnen können.

---