A more advanced form of template literals are tagged templates.
Tags allow you to parse template literals with a function. The first argument of a tag function contains an array of string values. The remaining arguments are related to the expressions.
The tag function can then perform whatever operations on these arguments you wish, and return the manipulated string. (Alternatively, it can return something completely different, as described in one of the following examples.)
The name of the function used for the tag can be whatever you want.
let person = 'Mike';
let age = 28;
function myTag(strings, personExp, ageExp) {
let str0 = strings[0];
let str1 = strings[1];
let str2 = strings[2];
let ageStr;
if (ageExp > 99){
ageStr = 'centenarian';
} else {
ageStr = 'youngster';
}
return `${str0}${personExp}${str1}${ageStr}${str2}`;
}
let output = myTag`That ${ person } is a ${ age }.`;
console.log(output);
Tag functions don't even need to return a string!
function template(strings, ...keys) {
return (function(...values) {
let dict = values[values.length - 1] || {};
let result = [strings[0]];
keys.forEach(function(key, i) {
let value = Number.isInteger(key) ? values[key] : dict[key];
result.push(value, strings[i + 1]);
});
return result.join('');
});
}
let t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A');
let t2Closure = template`${0}${'foo'}!`;
t2Closure('Hello', {foo: 'World'});
let t3Closure = template`I'm ${'name'}. I'm almost ${'age'} years old.`;
t3Closure('foo', {name: 'MDN', age: 30});
t3Closure({name: 'MDN', age: 30});