Tagged Templates

We are already aware of template literal as shown below:

const name = 'Groot';
console.log(`I am ${name}`);

When we use template literal, any JavaScript expression is valid within the curly braces {}.

So, What are tagged template literals ?

function blackBox(strings, name) {
  console.log(strings, name);
}
 
const name = 'Groot';
blackBox`I am ${name}!`;

The output of the above code snippet is:

Array ["I am ","!"] Groot

The first argument of blackBox function is an array of strings and second argument is the resolved value of the first expression we passed.

But we can have n number of template interpolation, for example:

const blackBox = (strings, ...args) => {
  console.log('Array of strings:', strings);
  console.log('All expression values:', args);
};
 
const firstName = 'Rohit';
const lastName = 'S';
const age = 200;
 
blackBox`I am ${firstName}, ${lastName} and ${age}.`;

NOTE: Tagged templates works well with ES6 arrow function declaration.

The output of the above code snippet is:

Array of strings: Array(4)[("I am ", ", ", " and ", ".")];
Array of args: Array(3)[("Rohit", "S", 200)];

Applications of tagged templates:

styled-components

High-level implementation of styled-components:

function button(styles) {
  return function NewComponent(props) {
    const uniqueClassName = generateUniqueName(styles);
    const getstyles = processStylesThroughStylis(styles);
    createAndInjectCSSClass(uniqueClassName, getstyles);
 
    return <button className={uniqueClassName} {...props} />;
  };
}

const Button = styled.button`
  padding: 8px;
`;
 
function PrimaryButton() {
  return <Button variant="primary">Click Me</Button>;
}

For in-depth understanding of how tagged templates are used by styled-components please check the source code here source code