We are already aware of template literal as shown below:
JavaScript
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 ?
JavaScript
function blackBox(strings, name) {
console.log(strings, name);
}
const name = 'Groot';
blackBox`I am ${name}!`;
The output of the above code snippet is:
JavaScript
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:
JavaScript
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:
JavaScript
Array of strings: Array(4)[("I am ", ", ", " and ", ".")];
Array of args: Array(3)[("Rohit", "S", 200)];
Applications of tagged templates:
High-level implementation of styled-components:
JavaScript
function button(styles) {
return function NewComponent(props) {
const uniqueClassName = generateUniqueName(styles);
const getstyles = processStylesThroughStylis(styles);
createAndInjectCSSClass(uniqueClassName, getstyles);
return <button className={uniqueClassName} {...props} />;
};
}
JavaScript
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