Grundlagen der String-Interpolation
Betten Sie Ausdrücke in Template-Literale ein.
Grundlagen der String-Interpolation ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Template-Literale
Template-Literale sind eine Möglichkeit, Zeichenketten mit dem Backtick-Zeichen statt mit Anführungszeichen zu erstellen. Sie ermöglichen es, Ausdrücke direkt in eine Zeichenkette einzubetten, ohne sie manuell zu verketten.
Ein Platzhalter wird mit einem Dollarzeichen gefolgt von geschweiften Klammern geschrieben, die einen Ausdruck einschließen. JavaScript wertet den Ausdruck aus und fügt seinen Wert in die Zeichenkette ein.
const name = "Alice"
const greeting = "Hello, " + name + "!"
console.log(greeting)Interpolationssyntax
In einem Template-Literal platzieren Sie einen Ausdruck zwischen einer öffnenden Dollar-Klammer und einer schließenden geschweiften Klammer. Der Ausdruck wird ausgewertet und in eine Zeichenkette umgewandelt.
Das folgende Beispiel verwendet eine einfache Verkettung, um dasselbe Ergebnis wie bei der Interpolation zu erzeugen. So wird die Idee verständlich, ohne die Literal-Syntax zu zeigen.
const product = "Book"
const price = 12
const line = product + " costs " + price + " dollars"
console.log(line)Warum Interpolation hilfreich ist
Eine Verkettung mit dem Plusoperator wird schwer lesbar, wenn Sie viele Variablen und literalen Text mischen. Bei der Interpolation bleibt der umgebende Text erhalten und nur die dynamischen Teile werden eingesetzt.
- Weniger Plusoperatoren
- Keine versehentlichen Leerzeichenfehler
- Klarere Absicht
const user = "Bob"
const count = 3
console.log(user + " has " + count + " messages")Beliebige Ausdrücke einbetten
Ein Platzhalter kann jeden gültigen Ausdruck enthalten, nicht nur eine Variable. Arithmetische Ausdrücke, Funktionsaufrufe und Eigenschaftszugriffe funktionieren ebenfalls.
const a = 5
const b = 7
console.log("Sum is " + (a + b))
console.log("Max is " + Math.max(a, b))Funktionen innerhalb aufrufen
Sie können eine Funktion aufrufen und ihren Rückgabewert in die Zeichenkette einfließen lassen. Das Beispiel zeigt die entsprechende Form mit Verkettung.
function upper(s) { return s.toUpperCase() }
const word = "hello"
console.log("Loud: " + upper(word))Eigenschaftszugriff
Objekteigenschaften können direkt innerhalb eines Platzhalters ausgelesen werden. Hier lesen wir Felder aus einem Benutzerobjekt aus.
const user = { name: "Eve", age: 30 }
console.log("Name: " + user.name + ", Age: " + user.age)Zahlen werden zu Zeichenketten
Wenn eine Zahl in einem Zeichenkettenkontext verwendet wird, wird sie automatisch in ihre Textdarstellung umgewandelt. Bei der Interpolation findet dieselbe Typumwandlung statt.
const total = 19.99
console.log("Total: $" + total)Ternäre Ausdrücke in Platzhaltern
Bedingte Logik mit dem ternären Operator passt in einen Platzhalter und ermöglicht es, inline zwischen zwei Werten zu wählen.
const score = 72
const grade = score >= 60 ? "Pass" : "Fail"
console.log("Result: " + grade)Verschachtelte Ausdrücke
Platzhalter können Methodenketten und verschachtelte Aufrufe enthalten. Was auch immer der Ausdruck ergibt, wird eingefügt.
const items = ["a", "b", "c"]
console.log("Joined: " + items.join("-"))
console.log("Count: " + items.length)Viele Werte kombinieren
Template-Literale spielen ihre Stärke aus, wenn ein Satz mehrere Variablen miteinander verknüpft. Vergleichen Sie die lesbare interpolierte Version, die im Text beschrieben wird, mit dieser entsprechenden Verkettung.
const city = "Paris"
const temp = 21
const sky = "sunny"
console.log("In " + city + " it is " + temp + "C and " + sky)Das Dollarzeichen maskieren
Wenn eine wörtliche Dollar-Klammer-Sequenz als Text und nicht als Platzhalter erscheinen soll, maskieren Sie das Dollarzeichen innerhalb eines Template-Literals mit einem umgekehrten Schrägstrich. In normalen Zeichenketten ist keine Maskierung erforderlich.
const text = "Use $\{x\} for a placeholder"
console.log(text)Kurze Überprüfung
Testen Sie Ihr Verständnis der Interpolation.
Zusammenfassung
Zusammenfassung: Template-Literale verwenden Backticks und Platzhalter, um Ausdrücke in Zeichenketten einzubetten.
- Ein Platzhalter wertet jeden Ausdruck aus
- Werte werden in Zeichenketten umgewandelt
- Interpolation ist übersichtlicher als eine lange Verkettung
- Maskieren Sie das Dollarzeichen, wenn es wörtlich erscheinen soll
const n = "World"
console.log("Hello, " + n + "!")Häufig gestellte Fragen
Ist die Lektion „Grundlagen der String-Interpolation“ kostenlos?
Ja — der vollständige Text von „Grundlagen der String-Interpolation“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Grundlagen der String-Interpolation“?
Betten Sie Ausdrücke in Template-Literale ein. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um JavaScript Academy zu starten?
Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Grundlagen der String-Interpolation“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Grundlagen der String-Interpolation
- Mehrzeilige Strings
- Tagged-Template-Funktionen
- Praktische Anwendungsfälle für Tagged Templates