The javascript phrase
test`That ${person} is a ${age}.`
Has never been useful to me and so I have never really understood it. Today I found something that relies on it. As a consequence, I had to figure out how it works. The usually awesome MDN gave working examples but did a terrible job of explaining what was going on. I hereby leap into the breach.
The first thing is that the syntax is a sort of function call with no parenthesis. It is a function name followed immediately by a literal. Weird to look at but there you have it.
The next thing is that the function execution has a big, complicated process behind it. When it is called, the JS engine does these things...
- It splits the template literal on the variable tags into an array. It's as if they did a regex to change the '${var}' to a comma and then split(',').
- Collect values for each variable mentioned and insert them into the function call in the order they appear.
Eg,
The effective function call ,
test(stringsArray, person, age));
This allows you to process the components of the literal in any way you want. Assemble the strings backwards? Sure. Put the values in the wrong place? Can do.
Below I constructed an example that acts as if there was no function. I felt like it helped me understand.
let person = 'Mike';
let age = 28;
function test(strings, ...keys) {
let output = '';
strings.forEach(item => {
const tmp = keys.shift();
output += `${item}${unset(tmp) ? tmp : ''}`;
});
return output;
}
let output = test`That ${person} is a ${age}.`;
console.log(output);
// That Mike is a 28.