Template Literale in JavaScript | Erklärt

JavaScript ist eine hochrangige Web-Programmiersprache, die uns einen String-Datentyp bietet, bei dem wir Zeichenfolgen speichern können. Zeichenfolgen können in JavaScript mit einzelnen Zitaten oder Doppelzitaten ("oder" ") implementiert werden. var mystring = "Hallo Welt!";

Der String-Datentyp ist jedoch begrenzt und bietet nicht viele Funktionen wie eine Programmiersprache auf hoher Ebene (Python, Ruby) seinen Entwicklern. Dieses Problem wurde gelöst, als JavaScript eingeführt wurde Vorlagenliterale in ES6. Lassen Sie uns sehen, welche Vorlagenliterale in diesem Beitrag in JavaScript sind.

Vorlagenliterale

Vorlagenliterale geben uns die Möglichkeit, mit Strings mit mehr Kontrolle und mehr Leistung über den herkömmlichen String -Datentyp zu arbeiten. Im Gegensatz zu Zeichenfolgen verwenden Vorlagenliterale Backnpfer “ Anstatt einzelne oder doppelte Anführungszeichen wie unten gezeigt:

var mystring = 'Hallo Welt!';

Einige der Features -Vorlagenzeichenfolge sind uns:

• Interpolation: Zuweisen von Variablen und Ausdrücken in einer Vorlage wörtlich.
• Multiline Saiten: Wir brauchen nicht /N Um in eine andere Zeile zu gehen, gehen wir einfach in eine andere Zeile in Template Literal und der Browser weiß, dass er diese Zeichenfolge auf einer anderen Zeile zeigen muss.
• Tagged Vorlagen: Es ändert die Vorlage wörtlich und gibt nach dem Ändern der Vorlage die resultierende Zeichenfolge zurück. Tagged Vorlagen sind genau wie Funktionen mit der Ausnahme, dass sie ohne die genannt werden () Klammern.

Erforschen wir diese Funktionen einzeln:

Interpolation

Variablen und Ausdrücke können leicht mit Template -Literalen in Zeichenfolgen interpoliert werden. Einbetten eines Ausdrucks in die Vorlage. Literal ist bekannt als Interpolation. Wir können eine Interpolation erreichen, indem wir die verwenden $ sonvar Syntax. Lassen Sie uns ein Beispiel sehen:

var mystring = 'Hallo Welt!';
Konsole.log ('Er sagte: $ mystring');

Im obigen Code initialisieren wir eine Variable und greifen in einer Zeichenfolge mit der Interpolationssyntax auf sie zu. Und um das Ergebnis auf der Konsole anzuzeigen, verwenden wir die Konsole.log () Methode:

Multiline Saiten

Eine weitere Anwendung der Vorlage ist der Literal, dass wir uns einfach in mehreren Zeilen verwalten oder schreiben können. Vor Schablonen -Literalen war es ein bisschen schwierig und schwierig, da wir den Backslash in Doppelzitaten verwenden mussten, um dem Browser mitzuteilen, dass sich die Zeichenfolge in der nächsten Zeile befinden sollte. Zum Beispiel:

var mystring = "Hallo \ n"+"Welt!";
Konsole.log (mystring);

Im obigen Code haben wir eine Zeichenfolge initialisiert und verwendet \N dem Browser mitzuteilen, dass die Zeichenfolge danach \N sollte in der nächsten Zeile sein.

Lassen Sie uns nun sehen, wie wir mit Template Literal die gleiche Funktionalität erzielen können, in der wir einfach die zweite Zeichenfolge in eine andere Zeile schreiben werden:

var mystring = 'Hallo
Welt!';
Konsole.log (mystring);

Wir sehen.

Tagged Vorlagen

Ein weiterer leistungsstarker Feature -Template -Literale gibt uns die markierten Vorlagen, die einfach eine Vorlagenzeichenfolge ändern, indem wir einen Funktionsnamen zum Beginn der Vorlagenzeichenfolge anhängen. In einfacheren Worten ändert eine markierte Vorlage die Vorlage wörtlich und gibt die resultierende Zeichenfolge zurück.

Tagged -Vorlagen sind genau wie eine Funktion definiert. Wenn Sie jedoch ein Template -Tag aufrufen, verwenden Sie die nicht () Klammern. Die Syntax zur Initialisierung einer Tag -Funktion ist unten angegeben:

Funktion tagname (Literale,… Substitutionen)
// eine Zeichenfolge zurückgeben

Die Tag -Funktion nimmt zwei Argumente an; Das erste ist das Literale was auf die wörtlichen Saiten hinweist und die zweite ist die … Substitutionen in denen die nachfolgenden Eingaben für jede Substitution analysiert werden.

Schauen wir uns nun ein Beispiel an, um eine Tag -Funktion zu implementieren:

// Tag -Vorlage
Funktion myTagname (mystring)
Mystring zurückkehren;

// Erstellen markierte Vorlage
const output = myTagName'hello name ';
// Ergebnis anzeigen
Konsole.Protokoll (Ausgabe);

Im obigen Code haben wir eine Funktion erstellt, die eine Zeichenfolge zurückgibt. Danach haben wir eine markierte Vorlage erstellt und dann die obige Tag -Vorlagenfunktion aufgerufen, für die die verwendete Syntax ist: MyTagName'hello Name ' wo der MyTagName das Vorlagen -Tag ist und der Hallo Name Ist die Vorlage wörtlich. Am Ende haben wir das Ergebnis mit der Konsole angezeigt.log () Methode:

Schauen wir uns nun ein weiteres Beispiel an, in dem wir Literale und Substitutionen an die Tag -Funktion übergeben werden:

// Werte
lass Greet = "Hallo!";
lass name = "jhon";
// Tag -Funktion
Funktionstransformation (Literale,… Substitutionen)
Konsole.log (literale); // ["", " ich heiße "]
Konsole.log (Substitutionen); // ["Hallo", "Jhon"]

// Aufruf Tag der Wörtlichkeitsfunktion aufrufen
Transformation '$ greet Mein Name ist $ name';

Im obigen Code definieren wir zunächst die Transformation -Tag -Funktion, die zwei Argumente aufnimmt. "Literale", das ein Array ist und statische Inhalte hat („mein Name ist“), während der Parameter der Substitutionsruhe auch ein Array mit allen Tags ist (Greet, Name). Die Ausgabe des obigen Codes ist unten angezeigt:

Abschluss

Die von JavaScript bereitgestellte Standarddatenatyp -Zeichenfolge war nicht leistungsstark genug, daher führte JavaScript Template Literale in ES6 ein. Vorlagenliterale geben uns mehr Kraft über Strings und werden mit Backticks initialisiert “. In diesem Beitrag haben wir gesehen.