Ein Weg zum Verständnis von Vorlagenliteralen in JavaScript

Mit der 2015 veröffentlichten ECMAScript-Spezifikation ( ES6 ) wurde JavaScript eine neue Funktion hinzugefügt - Vorlagenliterale. Vorlagenliterale bieten uns einen neuen Mechanismus zum Erstellen von Zeichenfolgenwerten... Dieser Mechanismus verfügt über viele leistungsstarke Funktionen, z. B. die Vereinfachung der Erstellung mehrzeiliger Konstrukte und die Verwendung von Platzhaltern zum Einbetten von Ausdrucksergebnissen in Zeichenfolgen. Darüber hinaus gibt es hier eine weitere Möglichkeit - getaggte Vorlagenliterale. Dies ist eine erweiterte Form von Vorlagenliteralen. Mit Tag-Vorlagen können Sie Zeichenfolgen mithilfe von Ausdrücken in Zeichenfolgen und mithilfe von Sonderfunktionen erstellen. All dies erweitert die Fähigkeit von Programmierern, mit Zeichenfolgen zu arbeiten, und ermöglicht beispielsweise das Erstellen dynamischer Zeichenfolgen, die URLs sein können , oder das Schreiben von Funktionen zur Feinabstimmung von HTML-Elementen .







In diesem Artikel erfahren Sie mehr über die Unterschiede zwischen regulären Zeichenfolgenwerten, die in einfachen oder doppelten Anführungszeichen angegeben sind, und Vorlagenliteralen. Sie lernen verschiedene Arten der Deklaration von Zeichenfolgen mit unterschiedlichen Merkmalen kennen, einschließlich mehrzeiliger Zeichenfolgen und dynamischer Zeichenfolgen, die sich je nach Wert einer Variablen oder eines Ausdrucks ändern. Sie lernen, wie Sie mit markierten Vorlagen arbeiten, und sehen Beispiele aus der Praxis.

Zeichenfolgen deklarieren

In diesem Abschnitt erinnern wir uns daran, wie Zeichenfolgen in einfachen oder doppelten Anführungszeichen deklariert werden, und sehen uns dann an, wie dies bei Verwendung von Vorlagenliteralen geschieht.



Eine JavaScript-Zeichenfolge kann als eine Folge von Zeichen in einfachen Anführungszeichen ( ' ') betrachtet werden:

const single = 'Every day is a good day when you paint.'

Eine andere Möglichkeit, Zeichenfolgen zu deklarieren, besteht darin, doppelte Anführungszeichen ( " ") zu verwenden:

const double = "Be so very light. Be a gentle whisper."

In JavaScript gibt es keine wesentlichen Unterschiede zwischen solchen Zeichenfolgen. In anderen Sprachen kann die Verwendung anderer Anführungszeichen beim Deklarieren von Zeichenfolgen beispielsweise bedeuten, dass Zeichenfolgen einer Art interpoliert werden können, während andere dies nicht können. Unter "Interpolation" verstehen wir hier die Fähigkeit, die Werte von Platzhalterausdrücken zu berechnen, die als dynamische Teile von Zeichenfolgen fungieren und zur Bildung der resultierenden Zeichenfolgenwerte beitragen.



Welche Zeichenfolgen verwendet werden sollen, wenn sie in einfachen oder doppelten Anführungszeichen deklariert werden, hängt weitgehend von persönlichen Vorlieben und Codierungskonventionen ab. Wenn jedoch eine Zeichenfolge , die von einem dieser Typen von Anführungszeichen begrenzt Zitate des gleichen Typs enthält, müssen sie werden , entkommen . Zitate anderer Art in solchen Zeichenfolgen müssen nicht maskiert werden.

//     ,   
const single = '"We don\'t make mistakes. We just have happy accidents." - Bob Ross'

//     ,   
const double = "\"We don't make mistakes. We just have happy accidents.\" - Bob Ross"

console.log(single);
console.log(double);

Wenn Sie ein Methodenpaar log()aufrufen, werden zwei identische Leitungen an die Konsole gesendet.

"We don't make mistakes. We just have happy accidents." - Bob Ross
"We don't make mistakes. We just have happy accidents." - Bob Ross

Template-Literale hingegen werden mit backticks ( ` `) deklariert :

const template = `Find freedom on this canvas.`

Einfache oder doppelte Anführungszeichen müssen hier nicht vermieden werden:

const template = `"We don't make mistakes. We just have happy accidents." - Bob Ross

Aber Backticks in solchen Strings müssen entkommen:

const template = `Template literals use the \` character.`

Vorlagenliterale bieten alle Funktionen regulärer Zeichenfolgen. Daher können Sie wahrscheinlich alle Zeichenfolgen in Ihrem Projekt durch Vorlagenliterale ersetzen, ohne etwas zu verlieren. In den meisten Fällen legen Codierungskonventionen jedoch fest, dass Vorlagenliterale nur verwendet werden sollen, wenn ihre speziellen Funktionen benötigt werden. Gewöhnliche Zeichenfolgen werden immer mit einfachen oder doppelten Anführungszeichen deklariert, um die Codekonsistenz zu gewährleisten. Die Codebasis des Projekts ist beim Schreiben, das diesem Standard folgt, für Entwickler, die bisher nicht damit vertraut sind, leichter zu lesen.



Nachdem wir über das Deklarieren von Zeichenfolgen mit einfachen Anführungszeichen, doppelten Anführungszeichen und hinteren Anführungszeichen gesprochen haben, können wir nun die erste Stärke von Vorlagenliteralen untersuchen. Nämlich - auf die Möglichkeit, mehrzeilige Strings zu beschreiben.

Mehrzeilige Zeichenfolgen

In diesem Abschnitt werden wir zunächst darüber sprechen, wie mehrzeilige Zeichenfolgen vor ES6 deklariert wurden, und dann untersuchen, wie Vorlagenliterale diese Aufgabe vereinfachen.



Wenn Sie in einem Texteditor eine aus mehreren Zeilen bestehende Zeichenfolgenvariable eingeben mussten, wurde zunächst der Operator für die Verkettung von Zeichenfolgen verwendet . Das folgende Beispiel für die Verkettung von Zeichenfolgen veranschaulicht diese Idee:

const address =
  'Homer J. Simpson' +
  '742 Evergreen Terrace' +
  'Springfield'

Mit diesem Ansatz können Sie lange Zeilen in kleine Abschnitte aufteilen und diese in einem Texteditor in mehreren Zeilen anordnen. Dies hat jedoch keinerlei Einfluss darauf, wie sich die letzte Zeile entwickeln wird. In diesem Fall befindet sich der Wert der Zeichenfolgenkonstante in einer Zeile. Die Teile, aus denen der Zeichenfolgenwert zusammengesetzt wird, werden nicht durch Zeilenvorschübe oder Leerzeichen getrennt. Wenn Sie eine Konstante auf der Konsole drucken address, wird dort Folgendes angezeigt:

Homer J. Simpson742 Evergreen TerraceSpringfield

Ein anderer Ansatz zum Schreiben solcher Zeilen in Code-Editoren besteht darin, das Backslash-Zeichen ( \) zu verwenden, das am Ende von Zeilenfragmenten platziert wird. Danach werden in einer neuen Zeile neue Fragmente gefunden:

const address =
  'Homer J. Simpson\
  742 Evergreen Terrace\
  Springfield'

Bei diesem Ansatz bleiben beispielsweise die Leerzeichen vor Zeilenfragmenten erhalten, aber der Wert der Variablen wird beim Drucken auf der Konsole wieder durch eine einzelne Zeile dargestellt:

Homer J. Simpson  742 Evergreen Terrace  Springfield

Sie können eine echte mehrzeilige Zeichenfolge mit dem Zeilenvorschubzeichen ( \n) erstellen :

const address =
  'Homer J. Simpson\n' +
  '742 Evergreen Terrace\n' +
  'Springfield'

Wenn ein in der Konsole gespeicherter Zeichenfolgenwert angezeigt wird address, umfasst dieser Wert mehrere Zeilen:

Homer J. Simpson
742 Evergreen Terrace
Springfield

Die Verwendung des Zeilenumbruchs zum Erstellen mehrzeiliger Zeichenfolgen ist jedoch nicht besonders bequem und einfach. Auf der anderen Seite ist das Erstellen mehrzeiliger Zeichenfolgen mithilfe von Vorlagenliteralen viel einfacher und bequemer. Keine Notwendigkeit, Zeichenfolgen zu verketten, keine Notwendigkeit, Zeilenumbruch oder Backslash zu verwenden. Um mehrzeilige Zeichenfolgen mit Vorlagenliteralen zu erstellen, drücken Sie ganz einfach am Ende des nächsten Zeilenfragments die Taste Enterund fahren Sie mit der Eingabe der nächsten Zeile des Vorlagenliterals fort:

const address = `Homer J. Simpson
742 Evergreen Terrace
Springfield`

Wenn Sie diese Konstante an die Konsole ausgeben, sieht der Text genauso aus wie im Editor:

Homer J. Simpson
742 Evergreen Terrace
Springfield

Hierbei ist zu beachten, dass Leerzeichen zwischen den Backticks, die zum Ausrichten des Codes verwendet werden, im resultierenden Vorlagenliteral enthalten sind. Betrachten Sie das folgende Beispiel:

const address = `Homer J. Simpson
                 742 Evergreen Terrace
                 Springfield`

Während diese Art der Codierung das Lesen erleichtert, sieht das, was nach der Ausgabe auf die Konsole gelangt, nicht sehr attraktiv aus:

Homer J. Simpson
                 742 Evergreen Terrace
                 Springfield

Nachdem wir uns nun mit mehrzeiligen Zeichenfolgen befasst haben, wollen wir darüber sprechen, wie Sie die Ergebnisse der Auswertung verschiedener Ausdrücke in Zeichenfolgen einbetten können, die auf unterschiedliche Weise deklariert wurden, dh über die Interpolation von Ausdrücken.

Ausdrucksinterpolation

Zuvor wurde vor ES6 die Verkettung verwendet, um dynamische Zeichenfolgen zu erstellen, die Variablen- oder Ausdruckswerte enthielten:

const method = 'concatenation'
const dynamicString = 'This string is using ' + method + '.'

Wenn Sie dynamicStringauf der Konsole ausgeben , erhalten Sie Folgendes:

This string is using concatenation.

Bei Verwendung von Vorlagenliteralen können Ausdrücke mithilfe von Platzhaltern in die Zeichenfolge eingebettet werden. Ein Platzhalter ist ein Ansichtskonstrukt ${}. In diesem Fall wird alles, was in geschweiften Klammern enthalten ist, als JavaScript-Code behandelt, und alles außerhalb dieser Konstruktion wird als Zeichenfolge behandelt:

const method = 'interpolation'
const dynamicString = `This string is using ${method}.`

Bei der Ausgabe dynamicStringan die Konsole erhalten Sie das folgende Ergebnis:

This string is using interpolation.

Ein häufiges Beispiel für das Einbetten von Werten in Zeichenfolgen ist das Erstellen dynamischer URLs. Die Verwendung von Verkettung für diesen Zweck führt zum Auftreten von umständlichen und unbequemen Konstruktionen. Hier ist beispielsweise eine Funktion , die eine OAuth- Zugriffszeichenfolge generiert :

function createOAuthString(host, clientId, scope) {
  return host + '/login/oauth/authorize?client_id=' + clientId + '&scope=' + scope
}

createOAuthString('https://github.com', 'abc123', 'repo,user')

Wenn Sie das Ergebnis dieser Funktion auf die Konsole drucken, erhalten Sie Folgendes:

https://github.com/login/oauth/authorize?client_id=abc123&scope=repo,user

Bei der Verwendung der Interpolation müssen Programmierer nicht mehr auf die Anführungszeichen achten, die Teile der Zeichenfolge begrenzen, und darauf, wo genau sich der Verkettungsoperator befindet. Hier ist das gleiche Beispiel, das mithilfe von Vorlagenliteralen neu geschrieben wurde:

function createOAuthString(host, clientId, scope) {
  return `${host}/login/oauth/authorize?client_id=${clientId}&scope=${scope}`
}

createOAuthString('https://github.com', 'abc123', 'repo,user')

Das Ergebnis der Funktion ist wie folgt:

https://github.com/login/oauth/authorize?client_id=abc123&scope=repo,user

Mit der Methode trim () können Sie führende und nachfolgende Leerzeichen aus einer Zeichenfolge entfernen, die mit einem Vorlagenliteral erstellt wurde . Beispiel: Im folgenden Codeausschnitt wird ein HTML-Element erstelltMit einer benutzerdefinierten Referenz wird eine Pfeilfunktion verwendet :

const menuItem = (url, link) =>
  `
<li>
  <a href="${url}">${link}</a>
</li>
`.trim()

menuItem('https://google.com', 'Google')

Führende und nachfolgende Leerzeichen werden aus der letzten Zeile entfernt, um sicherzustellen, dass das Element korrekt gerendert wird:

<li>
  <a href="https://google.com">Google</a>
</li>

Ganze Ausdrücke können interpoliert werden, nicht nur Variablen. Zum Beispiel - wie hier, wo das Ergebnis des Hinzufügens von zwei Zahlen in eine Zeichenfolge eingebettet ist:

const sum = (x, y) => x + y
const x = 5
const y = 100
const string = `The sum of ${x} and ${y} is ${sum(x, y)}.`

console.log(string)

Hier werden Funktion sum()und Konstanten deklariert xund y. Danach verwendet die Zeile sowohl die Funktion als auch diese Konstanten. So sieht die Konstante aus, stringwenn sie auf der Konsole gedruckt wird:

The sum of 5 and 100 is 105.

Dieser Mechanismus kann besonders nützlich sein, wenn Sie den ternären Operator verwenden , mit dem Sie die Bedingungen beim Bilden einer Zeichenfolge überprüfen können:

const age = 19
const message = `You can ${age < 21 ? 'not' : ''} view this page`
console.log(message)

Die messageauf der Konsole gedruckte Konstante kann sich ändern, je nachdem, ob der Wert, der in gespeichert ist, größer oder kleiner als 21 ist age. Da dieser Wert in unserem Beispiel 19 ist, wird Folgendes an die Konsole gesendet:

You can not view this page

Jetzt wissen Sie, wie Sie bei der Verwendung von Vorlagenliteralen von der Ausdrucksinterpolation profitieren können. Im nächsten Abschnitt werden wir noch einen Schritt weiter gehen und Tagging-Muster untersuchen und über die Arbeit mit Ausdrücken sprechen, die in Bereichen übergeben werden, die Platzhaltern entsprechen.

Tag-Vorlagen

Tag-Vorlagen sind eine erweiterte Form von Vorlagenliteralen. Mit Tags versehene Vorlagen beginnen mit einer mit Tags versehenen Funktion, die das Vorlagenliteral analysiert und dem Entwickler mehr Kontrolle über den Prozess der dynamischen Zeichenfolgengenerierung gibt.



Im folgenden Beispiel erstellen wir eine Funktion tag, die wir in der Rolle einer Funktion verwenden möchten, mit der Operationen an einer Tag-Vorlage ausgeführt werden. Der zuerst genannte Parameter dieser Funktion stringsist ein Array von Zeichenfolgenliteralen. Inline-Ausdrücke werden unter Verwendung der Syntax der verbleibenden Parameter in den zweiten Parameter eingefügt . Um den Inhalt dieser Parameter anzuzeigen, können sie in der Konsole angezeigt werden:

function tag(strings, ...expressions) {
  console.log(strings)
  console.log(expressions)
}

Wenn Sie beim Erstellen einer Tag-Vorlage eine Funktion verwenden tag, können Sie die folgende Konstruktion erhalten:

const string = tag`This is a string with ${true} and ${false} and ${100} interpolated inside.`

Da die Funktion tageine Ausgabe an die Konsole ausführt stringsund expressionsbei der Ausführung dieses Codes Folgendes an die Konsole gesendet wird:

["This is a string with ", " and ", " and ", " interpolated inside."]
[true, false, 100]

Sie können sehen, dass der erste Parameter strings,, ein Array ist, das alle Zeichenfolgenliterale enthält:

"This is a string with "
" and "
" and "
" interpolated inside."

Dieses Argument hat auch eine Eigenschaft raw, auf die Sie verweisen können strings.raw. Es enthält eine Zeile, in der keine Escape-Sequenzen verarbeitet wurden. Zum Beispiel ist es \nnur ein Zeichen \n, kein Zeilenvorschubbefehl.



Das zweite Argument ,, ...expressionsist ein Array, das alle Ausdrücke enthält:

true
false
100

Das Ergebnis ist, dass tagZeichenfolgenliterale und -ausdrücke an die Tag-Vorlagenfunktion übergeben werden . Beachten Sie, dass die Funktion nicht erforderlich ist, um eine Zeichenfolge zurückzugeben. Es kann mit den übergebenen Werten arbeiten und alles zurückgeben. Zum Beispiel könnten wir eine Funktion haben, die nichts beachtet und nur zurückgibt null. So wird die Funktion returnsNullim folgenden Beispiel geschrieben:

function returnsNull(strings, ...expressions) {
  return null
}

const string = returnsNull`Does this work?`
console.log(string)

Als Ergebnis der Ausführung dieses Codes wird in der Konsole Folgendes angezeigt:

null

Als Beispiel dafür, was Sie in einer mit Tags versehenen Vorlage tun können, können Sie Änderungen an jedem der Ausdrücke vornehmen, z. B. Änderungen, um Ausdrücke in HTML-Tags aufzunehmen. Erstellen wir eine Funktion bold, die Tags <strong>sowohl </strong>am Anfang als auch am Ende jedes Ausdrucks hinzufügt :

function bold(strings, ...expressions) {
  let finalString = ''

  //    
  expressions.forEach((value, i) => {
    finalString += `${strings[i]}<strong>${value}</strong>`
  })

  //    
  finalString += strings[strings.length - 1]

  return finalString
}

const string = bold`This is a string with ${true} and ${false} and ${100} interpolated inside.`

console.log(string)

Hier wird expressionseine forEach- Schleife verwendet , um das Array zu durchlaufen . Jedes Element ist in Tags eingeschlossen <strong></strong>.

This is a string with <strong>true</strong> and <strong>false</strong> and <strong>100</strong> interpolated inside.

In gängigen JavaScript-Bibliotheken finden Sie verschiedene Beispiele für die Verwendung von Tag-Vorlagen. Beispielsweise verwendet die graphql-Tag- Bibliothek ein Vorlagenliteral gql, um GraphQL-Abfragezeichenfolgen zu analysieren und sie in einen abstrakten Syntaxbaum (AST) umzuwandeln, den GraphQL versteht:

import gql from 'graphql-tag'

//        5
const query = gql`
  {
    user(id: 5) {
      firstName
      lastName
    }
  }
`

Die Funktion für markierte Vorlagen wird auch in der Bibliothek für gestaltete Komponenten verwendet , mit der Sie neue React-Komponenten aus regulären DOM- Elementen erstellen und zusätzliche CSS-Stile auf sie anwenden können :

import styled from 'styled-components'

const Button = styled.button`
  color: magenta;
`

// <Button>     

Alternativ können Sie die Standardmethode String.raw verwenden , um sie auf markierte Vorlagen anzuwenden und die Verarbeitung von Escape-Sequenzen zu verhindern:

const rawString = String.raw`I want to write /n without it being escaped.`
console.log(rawString)

Nach dem Ausführen dieses Codes wird in der Konsole Folgendes angezeigt:

I want to write /n without it being escaped.

Ergebnis

In diesem Artikel haben wir uns an die grundlegenden Informationen zu normalen Zeichenfolgenliteralen erinnert, die mit einfachen oder doppelten Anführungszeichen formatiert sind, und auch über Vorlagenliterale und Tag-Vorlagen gesprochen. Vorlagenliterale vereinfachen viele Aufgaben zur Verarbeitung von Zeichenfolgen. Insbesondere geht es darum, verschiedene Werte in Zeichenfolgen einzubetten und mehrzeilige Zeichenfolgen ohne Verkettung oder Escape zu erstellen. Das Taggen ist eine nützliche erweiterte Funktion für erweiterte Vorlagenliterale, die in vielen gängigen Bibliotheken verwendet wird.



Verwenden Sie Vorlagenliterale?