A complete guide: Tagged Template Literal in JavaScript

JavaScript , , 0 Comments
A complete guide: Tagged Template Literal in JavaScript

In simple words: JavaScript Tagged template literal is a function call that uses a template literal to get its arguments.

Here is a tagged function example:

greet`I'm ${name}. I'm ${age} years old.`;

Don’t get yourself confused, In the above example, greet is a function that takes three arguments

1. The first parameter is an array containing all of the text from our template literal. 

2. The 2nd to infinity parameters in our function are the variables to be inserted into our tag function.

Here I’ll show you the greet function from inside in detail.

// creating name and age variable 
var name = 'buginit';
var age = 1; 

// creating a greet function
function greet(strings, name, age) {
  var str0 = strings[0]; // "I'm"
  var str1 = strings[1]; // ". I'm"
  var str2 = strings[2]; // "years old."
  console.log(name) // buginit
  console.log(age) // 1

// calling greet function here and passing 
// name and age variable that we created above
greet`I'm ${name}. I'm ${age} years old.`;

Explanation: First we created two variables called name and age.

Then we defined the greet function,

And then called the greet function with those two variables and some strings around using Tagged Template Literals. So the greet function will receive all the strings as an array in the first argument and those variables in the rest of the arguments as shown in the above example please read comments inside example.

I hope you got the picture in your mind.

One more similar example

var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) {
  var str0 = strings[0]; // "That "
  var str1 = strings[1]; // " is a "

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

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';

  // We can even return a string built using a template literal
  return `${str0}${personExp}${str1}${ageStr}`;

var output = myTag`That ${ person } is a ${ age }`;

// That Mike is a youngster

Real-world example

Writing CSS in JSX (React)

Javascript developers are familiar with weird syntax for inline Styling. And as I also work in React its really messy when code becomes bigger.

<section style={{ padding: 4em;  background: papayawhip; }}> 
  <h1 style={{  font-size: 1.5em;  text-align: center;  color: palevioletred; }}>  Hello World, this is my first styled component!</h1>

There is a library called styled-components that tried to fix this problem by using the JavaScript Tagged Template Literal. Here is an example below:

import React from 'react';

import styled from 'styled-components';

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;

// Use them like any other React component – except they're styled!
  <Title>Hello World, this is my first styled component!</Title>

If you want to see more about this check out styled-components here are lots of examples you can find.

Here are some rule to note down when you dig deeper in JavaScript Tagged Template Literals

1. Unicode escapes started by “\u”, for example:- \u00A9

2. Unicode code point escapes indicated by “\u{}”, for example:- \u{2F804}

3. Hexadecimal escapes started by “\x”, for example:- \xA9

4. Octal literal escapes started by “\” and (a) digit(s), for example:- \251

For whole information check out Official Template Literal Revision

This article is only about the Tagged template literal if you want to read about the template literal check out this All You Need To Know About Template Literals In ES6: JavaScript

Thanks for reading. Please share if you liked it.

Leave a Reply

Your email address will not be published.