What are "tagged literal templates" in JavaScript?

In recent weeks, the company Vercel sparked controversy by releasing a new feature, partly illustrated by the following code:

sql`INSERT INTO products (name) VALUES (${formData.get('name')})`;

If you glance at this code, you'll probably only see a JavaScript string, commonly known as a "template string". And you may have noticed a potential vulnerability: an SQL flaw.

In reality, none of that is true!

And what makes the difference is that little 'sql' right before the string, which is what's called a "tagged template string" (or "tagged literal template").

To put it simply, this 'tag' is a function that takes our template string as a parameter and is able to transform it. In the example above, the 'sql' tag escapes certain characters to prevent injections, and it even executes the SQL query!

To show how this kind of tag works internally, here's an example of a tag template that lets us "censor" inappropriate words from an input text:

// List of bad words
const badWords = ['crap', 'darn', 'heck', 'jerk', 'butt', 'douche'];

// Tagged literal function to replace bad words by ****
function safe (strings, ...values) {
  return strings.reduce((acc, str, i) => {
    if(i > values.length - 1) return acc + str;
    const word = badWords.indexOf(values[i]) > -1 ? '****' : values[i];
    return acc + str + (word);
  }, '');
}

const data = 'crap';

// Test without tagged literal
console.log(`Hi, ${data}!`);
// Test with tagged literal
console.log(safe`Hi, ${data}!`);

Output:

Hi, crap!
Hi, ****

As you can see, a tag is simply a function where you retrieve all the parts of the template string (the template, and the separate data) in order to process them.

Find more details about this feature on the dedicated MDN documentation page!

Personally, I find this feature interesting, but since it's fairly little known (and little used) among developers, I think the syntax can quickly lead to confusion, so use it with caution!