Einführung in Vorlagenliterale.

Die Manipulation von Zeichenfolgen ist eine sehr häufige Aufgabe in der Programmierung, insbesondere beim Erstellen interaktiver Webanwendungen. Wenn Sie schon einmal mit JavaScript gearbeitet haben, mussten Sie wahrscheinlich einige Variablen in Strings einfügen.
In älteren Versionen von JavaScript bedeutete dies, dass der Operator verwendet wurde, um Zeichenfolgen durch einen Prozess namens String-Verkettung miteinander zu verbinden. Allerdings mit der Einführung von Vorlagenliteralen im JavaScript ES6(2015)-Update. Wir haben jetzt eine sauberere Möglichkeit, Variablen in Strings einzufügen, die sogenannte String-Interpolation.

Was sind Vorlagenliterale?

Vorlagenliterale ermöglichen uns die einfachere Bearbeitung von Zeichenfolgen. Sie sind in Backticks (`) anstelle von (') oder (") eingeschlossen und unterstützen die String-Interpolation durch Verwendung der (${})-Syntax, um Variablen oder Funktionsaufrufe direkt in einen String zu platzieren.

Hier ist ein Beispiel dafür, wie Vorlagenliterale die String-Interpolation vereinfachen.

const name = "John"
const age = 24

// Old method using concatenation
const greeting = "Hello, "   name   "! You are "   age   " years old."

// New method using template literals
const greetingWithTemplateLiteral = `Hello, ${name}! You are ${age} years old.`

console.log(greetingWithTemplateLiteral) // Outputs: Hello, John! You are 24 years old.

Vorteile der Verwendung von Vorlagenliteralen

1. Verbesserte Lesbarkeit

Bei der Verwendung der Zeichenfolgenverkettung konnte man sich leicht in einer Reihe von Zeichen verlieren, insbesondere bei der Arbeit mit längeren Zeichenfolgen. Vorlagenliterale vermeiden dies, indem sie es Ihnen ermöglichen, Zeichenfolgen auf eine Weise zu schreiben, die einfacher zu befolgen ist.

const product = "laptop"
const price = 1400

console.log(`The price of the ${product} is $${price}`)
// Outputs: The price of the laptop is $1400

2. Mehrzeilige Zeichenfolgen

Vor Vorlagenliteralen mussten Sie Escape-Zeichen wie \n verwenden, um mehrzeilige Zeichenfolgen zu erstellen. Jetzt können Sie sie in Backticks(`) schreiben.

// Old method
const multiLineString1 = "This is the first line"   "\n"   "This is the second line"   "\n"   "This is the third line"

// New method
const multiLineString2 = `This is the first line
This is the second line
This is the third line`

console.log(multiLineString1)
console.log(multiLineString2)
/* Both output:
This is the first line
This is the second line
This is the third line
*/

3. Ausdrucksbewertung

Sie können auch Berechnungen durchführen, Funktionen aufrufen oder Daten innerhalb von Zeichenfolgen bearbeiten.

const a = 1
const b = 10

console.log(`The sum of a and b is ${a   b}`) 
// Outputs: The sum of a and b is 11

const upperCaseName = (name) => name.toUpperCase()
console.log(`Your name in uppercase is ${upperCaseName("John")}`)
// Outputs: Your name in uppercase is JOHN

Häufige Anwendungsfälle in JavaScript

1. HTML-Generierung

Anstatt HTML-Strings mit Verkettung zu erstellen, können Sie Variablen mit Interpolation direkt in den String einfügen.

const name = "John"
const htmlContent = `
  
Hello, ${name}!
  
Welcome to the site.
`

2. Nachrichten protokollieren

Sie können Variablen auch direkt in Protokollnachrichten einfügen, ohne dass eine Verkettung erforderlich ist.

const user = "John"
const action = "logged in"

console.log(`User ${user} just ${action}`)
// Outputs: User John just logged in

3. URLs erstellen

Vorlagenliterale erleichtern auch die Erstellung von URLs.

const userId = 123
const apiUrl = `https://api.example.com/user/${userId}/details`

console.log(apiUrl)
// Outputs: https://api.example.com/user/123/details

4. Bedingte Logik

Ein weiterer großartiger Anwendungsfall ist Bedingte Logik. Mit Vorlagenliteralen können Sie Zeichenfolgen einfache Bedingungen zuweisen, indem Sie den ternären Operator (? :) verwenden, der eine Abkürzung für eine if-else-Bedingung ist.
Logische Operatoren wie && (und) oder || (or) kann auch verwendet werden, um bedingte Teile zu einer Zeichenfolge hinzuzufügen. Dadurch entfällt die Notwendigkeit zusätzlicher if-else-Anweisungen oder einer Verkettung.

const isMember = true
console.log(`User is ${isMember ? 'a member' : 'not a member'}`) 
// Outputs: User is a member

Sie können auch komplexere Ausdrücke innerhalb von Vorlagenliteralen hinzufügen.

/* In this example, the condition age >= 18 is evaluated
the result is either “an adult” or “a minor” based on the value of age*/
const age = 24

const message = `You are ${age >= 18 ? 'an adult' : 'a minor'}`

console.log(message) 
// Outputs: You are an adult

/*In this, if isLoggedIn is true and username exists
username is displayed or else, it defaults to “Guest” */
const isLoggedIn = true
const username = "John"

const greeting = `Welcome ${isLoggedIn && username ? username : 'Guest'}`

console.log(greeting)
// Outputs: Welcome John

Abschluss

Vorlagenliterale in JavaScript bieten eine sauberere und effizientere Möglichkeit, die String-Interpolation zu handhaben. Ob Sie nun Webinhalte erstellen, Nachrichten protokollieren oder besser lesbaren Code erstellen – diese Methode bietet Ihnen die Flexibilität, die Sie benötigen.

Wenn Sie das nächste Mal mit Variablen und Strings jonglieren, versuchen Sie es mit Vorlagenliteralen. Sie werden schnell erkennen, warum dies meine bevorzugte Methode für die Arbeit mit JavaScript ist.

Ressourcen

1. MDN Web Docs – Vorlagenliterale
2. GitHub – Phase 1 Review Strings Lab
3. W3 Schools – JavaScript-Vorlagenzeichenfolgen