Tagged template literals take the form of (strings: string[], ...values: any[]): any.

In your example,

let a = (x) => console.log(x);
a`1234`; // prints "Array [ "1234" ]"

x has the type string[], which is an array of all non-interpolated strings (basically anything that's not inside ${}). Because there are no interpolations, the array contains one element (the string "1234"). This is what is passed as the first argument to your function a.

Only template literals can be "tagged" with a function identifier, which is why you've noticed that it doesn't work with single or double-quoted strings, only backticks. I presume it would throw a syntax error if you tried to do it with a regular string, though I haven't tested that.

If you wanted to interpolate a value, you'd do so by receiving the value in the function (which is used as the tag) by adding additional parameters. Note that it is not a single parameter that is an array, but rather separate parameters. You can, of course, create an array from them by using the spread operator (...), as indicated in the function signature above. As in the (modified) example provided by MDN,

const person = 'Mike';
const age = 28;

function tag(strings, person, age) {
  const str0 = strings[0]; // "That "
  const str1 = strings[1]; // " is a "

  // There is technically a string after
  // the final expression (in our example),
  // but it is empty (""), so disregard.
  // const str2 = strings[2];

  const age_description = age > 99 ? 'centenarian' : 'youngster';
  return [str0, name, str1, ageDescription].join('');
}

const output = tag`That ${person} is a ${age}`;

console.log(output); // "That Mike is a youngster"

Note that as indicated in the comments, there is always a leading and trailing string, even if it happens to be empty. As such, if you began a template literal with an interpolation, strings[0] would be an empty string. In the same manner, ending with an interpolation leaves a trailing empty string, though this isn't as notable (a leading interpolation shifts all indexes by one, a trailing doesn't affect them).

Answer from jhpratt on Stack Overflow
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Template_literals
Template literals (Template strings) - JavaScript | MDN
Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.
🌐
Wes Bos
wesbos.com › tagged-template-literals
Tagged Template Literals - Wes Bos
October 25, 2016 - The way the tag template works is you simply make a function, and you take the name of the function that you want to run against the string, and you just put the name right in front of the template:
🌐
freeCodeCamp
freecodecamp.org › news › a-quick-introduction-to-tagged-template-literals-2a07fd54bc1d
A quick introduction to Tagged Template Literals
March 15, 2019 - Tagged template literals were enabled by a new technology introduced in ES6, called “template literals”. This is simply a syntax that makes string interpolation possible in JavaScript.
Top answer
1 of 1
5

Tagged template literals take the form of (strings: string[], ...values: any[]): any.

In your example,

let a = (x) => console.log(x);
a`1234`; // prints "Array [ "1234" ]"

x has the type string[], which is an array of all non-interpolated strings (basically anything that's not inside ${}). Because there are no interpolations, the array contains one element (the string "1234"). This is what is passed as the first argument to your function a.

Only template literals can be "tagged" with a function identifier, which is why you've noticed that it doesn't work with single or double-quoted strings, only backticks. I presume it would throw a syntax error if you tried to do it with a regular string, though I haven't tested that.

If you wanted to interpolate a value, you'd do so by receiving the value in the function (which is used as the tag) by adding additional parameters. Note that it is not a single parameter that is an array, but rather separate parameters. You can, of course, create an array from them by using the spread operator (...), as indicated in the function signature above. As in the (modified) example provided by MDN,

const person = 'Mike';
const age = 28;

function tag(strings, person, age) {
  const str0 = strings[0]; // "That "
  const str1 = strings[1]; // " is a "

  // There is technically a string after
  // the final expression (in our example),
  // but it is empty (""), so disregard.
  // const str2 = strings[2];

  const age_description = age > 99 ? 'centenarian' : 'youngster';
  return [str0, name, str1, ageDescription].join('');
}

const output = tag`That ${person} is a ${age}`;

console.log(output); // "That Mike is a youngster"

Note that as indicated in the comments, there is always a leading and trailing string, even if it happens to be empty. As such, if you began a template literal with an interpolation, strings[0] would be an empty string. In the same manner, ending with an interpolation leaves a trailing empty string, though this isn't as notable (a leading interpolation shifts all indexes by one, a trailing doesn't affect them).

🌐
Medium
yigitatak.medium.com › tagged-template-literals-in-javascript-es6-18a2102b310d
Tagged Template Literals in JavaScript ES6 | by Yiğit Atak | Medium
March 28, 2022 - This is how you call tag functions. This is the main difference between a regular function and a tag function. We defined a tag function, we called it “tagFunction”, it takes our template literal as a parameter and simply returns a string, “awesome.” That’s a bit dull though.
🌐
DigitalOcean
digitalocean.com › community › tutorials › js-tagged-template-literals
Tagged Template Literals in JavaScript (ES6 / ES2015) | DigitalOcean
February 7, 2017 - Tagged template literals allow you to pass a function to be executed on the literal before it gets evaluated.
🌐
Jim Nielsen's Blog
blog.jim-nielsen.com › 2019 › jsx-like-syntax-for-tagged-template-literals
JSX-Like Syntax for Tagged Template Literals in JavaScript - Jim Nielsen’s Blog
Read it? Ok so with tagged template literals you can control how the string inside the back-ticks gets made. In our case, that means we can support a more JSX-like syntax in our template literals. We can detect the value of the expression that was evaluated and, depending on its type, we can output the value we would expect.
🌐
DEV Community
dev.to › railsstudent › tagged-template-literals-on-template-4op8
Tagged Template Literals on Template - DEV Community
March 15, 2025 - The template has a drop-down bound to the greeting signal, and the name signal is initialized to “Mary”. The tag allows the greet method to parse the template literals/strings in the expression.
Find elsewhere
🌐
DEV Community
dev.to › carlosrafael22 › understanding-tagged-template-literal-in-js-49p7
Understanding Tagged Template Literal in JS - DEV Community
January 17, 2021 - They are a more advanced form of template literals which allow us to parse template literals with a function, giving us more control over how we want this string to be parsed. The Tagged in the name is because the template literal was "tagged" ...
🌐
Reddit
reddit.com › r/learnjavascript › how to use tagged templates?
r/learnjavascript on Reddit: How to Use Tagged Templates?
February 5, 2025 -

I see under Template Literals that it's possible to submit a function in front of the literal. Why would you do this, rather than write a function that returns the string you need?

I've come up with two possibilities. One, it might allow you to write things to the DOM in a way similar to React. Second, I saw a YouTube video on declarative programming.

Are tagged template literals used for those purposes? Are there other reasons to use them?

TIA!

🌐
Medium
patelhemil.medium.com › magic-of-tagged-templates-literals-in-javascript-e0e2379b1ffc
Magic of Tagged Templates Literals in JavaScript? | by Hemil Patel | Medium
March 16, 2021 - There are use cases where you want ... on some logic. Tagged template literals let you extract all the dynamic values, which are called tags, and segregate them from the static content....
🌐
GitHub
github.com › kay-is › awesome-tagged-templates
GitHub - kay-is/awesome-tagged-templates: A list of libraries and learning resources for ES2015 tagged template literals · GitHub
A list of libraries and learning resources for ES2015 tagged template literals - kay-is/awesome-tagged-templates
Starred by 99 users
Forked by 4 users
🌐
Leighhalliday
leighhalliday.com › tagged-template-literals
Tagged Template Literals | Leigh Halliday
We've seen template literals before, where you have have a string using backticks that allow you to embed values using inside of the string. These immediately produce you a new string, converting any embedded values into their string representation. Tagged template literals are quite a bit different than normal template literals, as we'll see later on.
🌐
Konstantin
konstantin.digital › blog › tagged-template-literals-how-tools-like-styled-components-work
Tagged Template Literals - How Tools Like Styled Components Work
November 10, 2022 - Have you ever wondered how syntactical sugar like `styled` just magically works? Let’s recreate this functionality using tagged template strings in Javascript.
🌐
Exploring JS
exploringjs.com › es6 › ch_template-literals.html
8. Template literals
Template literals are string literals with support for interpolation and multiple lines. Tagged template literals (short: tagged templates): are function calls whose parameters are provided via template literals.
🌐
Lit
lit.dev › docs › templates › overview
Templates overview – Lit
But with tagged template literals, the browser passes the tag function an array of strings (the static portions of the template) and an array of expressions (the dynamic portions).
🌐
Exploring JS
exploringjs.com › impatient-js › ch_template-literals.html
21 Using template literals and tagged templates
This web page has moved · “JavaScript for impatient programmers” is now “Exploring JavaScript” · You’ll be transported to the new website
Top answer
1 of 3
11

You can use tagged templates to build APIs that are more expressive than regular function calls.

For example, I'm working on a proof-of-concept library for SQL queries on JS arrays:

let admins = sql`SELECT name, id FROM ${users} 
                 WHERE ${user => user.roles.indexOf('admin') >= 0}`

Notice it has nothing to do with String interpolation; it uses tagged templates for readability. It would be hard to construct something that reads as intuitively with plain function calls - I guess you'd have something like this:

let admins = sql("SELECT name, id FROM $users WHERE $filter",
  { $users: users, $filter: (user) => user.roles.contains('admin') })

This example is just a fun side project, but I think it shows some of the benefits of tagged templates.

Another example, maybe more obvious, is i18n - a tagged template could insert locale-sensitive versions of your input.

2 of 3
8

See Sitepoint's explanation:

The final stage of template strings specification is about adding a custom function before the string itself to create a tagged template string.

...

For instance, here is a piece of code to block strings that try to inject custom DOM elements:

var items = [];
items.push("banana");
items.push("tomato");
items.push("light saber");
var total = "Trying to hijack your site <BR>";
var myTagFunction = function (strings,...values) {
  var output = "";
  for (var index = 0; index < values.length; index++) {
    var valueString = values[index].toString();

    if (valueString.indexOf(">") !== -1) {
      // Far more complex tests can be implemented here :)
      return "String analyzed and refused!";
    }

    output += strings[index] + values[index];
  }

  output += strings[index]
  return output;
}

result.innerHTML = myTagFunction `You have ${items.length} item(s) in your basket for a total of $${total}`;

Tagged template strings can used for a lot of things like security, localization, creating your own domain specific language, etc.

🌐
mike.williamson
mikewilliamson.wordpress.com › 2018 › 10 › 22 › tagged-template-literals-and-the-hack-that-will-never-go-away
Tagged template literals and the hack that will never go away – mike.williamson
November 25, 2025 - Tagged template literals were added to the JavaScript as part of the 2015 update to the ECMAScript standard. While a fair bit has been written about them, I’m going to argue their significanc…