JavaScript Template Literals

An Introduction to JavaScript Template Literals

In this tutorial, you’ll have a look at how JavaScript Template literals make your life easy as a JavaScript programmer.

What Are JavaScript Template Literals ?

From the MDN docs,

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.

So basically template literals makes it easy to write expressions inside a multi-line or single line strings.

What Problem Does Template Literals Solve ?

Earlier I used to create dynamic HTML by either creating HTML elements or by joining HTML string. For example, Let’s say I have a JSON data as shown :

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz"
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv"
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net"
  }
]

How will you iterate over the data and display the above in a tabular format using HTML table ?

Here is the JavaScript code to create dynamic HTML using JavaScript.

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript Template Literals</title>

</head>

<body>
    <script type="text/javascript">
        let users = [{
                "id": 1,
                "name": "Leanne Graham",
                "username": "Bret",
                "email": "Sincere@april.biz"
            },
            {
                "id": 2,
                "name": "Ervin Howell",
                "username": "Antonette",
                "email": "Shanna@melissa.tv"
            },
            {
                "id": 3,
                "name": "Clementine Bauch",
                "username": "Samantha",
                "email": "Nathan@yesenia.net"
            }
        ]

        let table = document.createElement('table');
        let tr, td_name, td_email, td_name_text, td_email_text;
        for (let i = 0; i < users.length; i++) {
            tr = document.createElement('tr');
            td_name = document.createElement('td');
            td_name_text = document.createTextNode(users[i].name);
            td_name.appendChild(td_name_text);
            tr.appendChild(td_name);
            td_email = document.createElement('td');
            td_email_text = document.createTextNode(users[i].email);
            td_email.appendChild(td_email_text);
            tr.appendChild(td_email)
            table.appendChild(tr)
        }
        document.getElementsByTagName('body')[0].append(table)
    </script>
</body>


</html>

The above code works just fine. But one issue with above code is that it’s quite dificult to debug the above code. If anything breaks down you will have to figure where did the HTML code broke up.

Now, let’s try to create our HTML table using dynamically using JavaScript Template literals.

<!DOCTYPE html>
<html>

<head>
    <title> JavaScript Template Literals </title>

</head>

<body>
    <script type="text/javascript">
        let users = [{
                "id": 1,
                "name": "Leanne Graham",
                "username": "Bret",
                "email": "Sincere@april.biz"
            },
            {
                "id": 2,
                "name": "Ervin Howell",
                "username": "Antonette",
                "email": "Shanna@melissa.tv"
            },
            {
                "id": 3,
                "name": "Clementine Bauch",
                "username": "Samantha",
                "email": "Nathan@yesenia.net"
            }
        ]
        <!-- JavaScript Template Literals in action -->
        let html_markup = `<table>
            ${users.map(user => `<tr>
                <td>${user.name}</td>
                <td>${user.email}</td>
            </tr>`).join('')}
           </table>`;
        document.body.innerHTML = html_markup
    </script>
</body>

</html>

As you can see in the above code, it looks much cleaner and readable to humans compared to the JavaScript code without Template literals. It really makes debugging the dynamic HTML code easier.