Tagged-Template-Funktionen
Verarbeiten Sie Template-Bestandteile mit Tag-Funktionen.
Tagged-Template-Funktionen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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 ist eine Tag-Funktion
Ein getaggtes Template ist ein Funktionsaufruf, bei dem der Funktionsname direkt vor einem Template-Literal steht. Die Funktion erhält die aufgeteilten Bestandteile des Templates und kann sie umformen.
function tag(strings, value) {
return strings[0] + value.toUpperCase() + strings[1]
}
console.log(tag(["Hi ", "!"], "bob"))Das Strings-Array
Das erste Argument, das eine Tag-Funktion erhält, ist ein Array der literalen Zeichenkettenbestandteile. Dabei handelt es sich um die Textabschnitte zwischen und neben den Platzhaltern.
function tag(strings) {
return strings.join("|")
}
console.log(tag(["a", "b", "c"]))Die Werte
Nach dem Strings-Array erhält die Tag-Funktion jeden interpolierten Wert als separates Argument. Mit einem Rest-Parameter werden diese Werte in einem Array gesammelt.
function tag(strings, ...values) {
return values.join(",")
}
console.log(tag(["", " and ", ""], "x", "y"))Die Zeichenkette wieder zusammensetzen
Eine typische Tag-Funktion durchläuft das Strings-Array und fügt jeden Wert zwischen den Bestandteilen ein. So wird die endgültige Zeichenkette mit der gewünschten Transformation neu aufgebaut.
function tag(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? values[i] : "")
})
return out
}
console.log(tag(["A", "B", "C"], 1, 2))Regel für die Länge des Strings-Arrays
Das Strings-Array enthält immer genau ein Element mehr als das Werte-Array. Es gibt Text vor dem ersten und nach dem letzten Platzhalter, selbst wenn einige Bestandteile leer sind.
function tag(strings, ...values) {
return "strings=" + strings.length + " values=" + values.length
}
console.log(tag(["", "", ""], 1, 2))Werte transformieren
Da die Tag-Funktion steuert, wie Werte eingefügt werden, können Sie sie formatieren. Hier wird jeder numerische Wert vor dem Einfügen verdoppelt.
function dbl(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? values[i] * 2 : "")
})
return out
}
console.log(dbl(["", " ", ""], 3, 4))Nicht-Zeichenketten zurückgeben
Eine Tag-Funktion muss keine Zeichenkette zurückgeben. Sie kann jeden beliebigen Wert zurückgeben, etwa ein aus den Template-Bestandteilen erstelltes Objekt oder Array.
function parts(strings, ...values) {
return { strings: strings, values: values }
}
const r = parts(["a", "b"], 9)
console.log(r.values[0])Die raw-Eigenschaft
Das Strings-Array besitzt außerdem eine raw-Eigenschaft, die die Zeichenketten ohne Verarbeitung der Escape-Sequenzen enthält. So funktioniert String.raw.
console.log(String.raw({ raw: ["a\\n", "b"] }, "X"))Interpolationen in Großbuchstaben
Ein häufig verwendeter Demo-Tag wandelt jeden interpolierten Wert in Großbuchstaben um, während der statische Text unverändert bleibt.
function loud(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? String(values[i]).toUpperCase() : "")
})
return out
}
console.log(loud(["name is ", "."], "alice"))Warum Tags verwenden
Tag-Funktionen ermöglichen leistungsfähige Muster: das Escaping nicht vertrauenswürdiger Eingaben, Internationalisierung, SQL- oder Abfrageerstellung sowie benutzerdefinierte Formatierung – alles gesteuert durch die Struktur der Vorlage.
function highlight(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? "[" + values[i] + "]" : "")
})
return out
}
console.log(highlight(["score: ", " pts"], 42))Werte ignorieren
Ein Tag kann die interpolierten Werte vollständig ignorieren und die Ausgabe ausschließlich anhand der statischen Teile erzeugen, was beispielsweise für Analysen oder Protokollierung nützlich ist.
function onlyStatic(strings) {
return strings.filter(function (s) { return s.length > 0 }).join(" ")
}
console.log(onlyStatic(["Hello ", " world ", ""]))Schnelltest
Testen Sie Ihr Wissen über Tag-Funktionen.
Zusammenfassung
Zusammenfassung: Getaggte Vorlagen rufen eine Funktion mit den analysierten Vorlagenteilen auf.
- Das erste Argument ist das Zeichenketten-Array
- Die übrigen Argumente sind die interpolierten Werte
- Strings enthält ein Element mehr als values
- Die Eigenschaft raw enthält den unverarbeiteten Text
function tag(s, ...v) { return s[0] + v[0] }
console.log(tag(["go "], "fast"))
Lerne JavaScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 59
- Lektionen
- 200
Häufig gestellte Fragen
Ist die Lektion „Tagged-Template-Funktionen“ kostenlos?
Ja — der vollständige Text von „Tagged-Template-Funktionen“ 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 „Tagged-Template-Funktionen“?
Verarbeiten Sie Template-Bestandteile mit Tag-Funktionen. 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 3 von 4.
Wie lange dauert die Lektion „Tagged-Template-Funktionen“?
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