0 Tage Serie
javascript / intermediate
Snippet

Tagged Template Literals

Tagged Templates ermöglichen es, Template-Literale mit einer Funktion zu verarbeiten. Das erste Argument ist ein Array von String-Literalen, und die restlichen Argumente sind die ausgewerteten Ausdrücke.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
function highlight(strings, ...values) {
return strings.reduce((acc, str, i) => {
const val = values[i] ? `[${values[i]}]` : '';
return acc + str + val;
}, '');
}
const author = 'Maria';
const action = 'escaped';
const message = highlight`${author} has ${action}!`;
console.log(message); // [Maria] has [escaped]!
Erklärung
1
function highlight(strings, ...values) { ... }
Die 'Tag'-Funktion, die die String-Teile und die interpolierten Werte verarbeitet.
2
highlight`${author}...`
Aufruf der Tag-Funktion ohne Klammern durch Voranstellen vor das Template-Literal.