Create HTML using JavaScript’s Template Strings

One of the best features of JavaScript is template literals or template strings. It is the ability to have multi-line strings without any funny business.

Earlier with regular string, we would have escaped the new lines. So, implementation would look like:

var str = "Hello there, \
how are you ? \
";

For small strings or HTML, this even looks fine but for complex HTML it would be difficult to manage. ES6 has provided the ability to use template strings and you would like to use these multiline strings while creating HTML markup as a string. Backticks are used to write the HTML as string and object properties as variables. Let’s have a look at the below example:


const user = {
    name: "James Walker",
    job: "Web Developer",
    city: "California",
    bio: "James loves to develop a website"
}

// html string would be 
const html = `
<div class="user">
    <h2>${user.name}</h2>
    <p class="city">${user.city}</p>
    <p class="bio">${user.bio}</p>
</div>
`;

document.body.innerHTML = html;

Did you see how simple it is to write the HTML using template literals? Also, the code looks quite nicer as compared to the traditional approach. HTML will be printed as it is including white spaces but no need to worry as we are writing HTML as a string. ${} is used to print the value from the variable and you can see this in the above example. If you run this code in the console or save in a file and run it on the browser you will see nicely organized data on the screen.

Looping with Template Strings

One of the amazing features of template strings is that they can be nested inside each other. Consider a situation where you have to loop through the list of users using template string and display an unordered list. Let’s have a closer look at the solution:


const users = [
    {
        name: "User One",
        age: 25
    },
    {
        name: "User Two",
        age: 26
    }
];

const html = `
<ul>
    ${users.map(user => `<li>${user.name} is ${user.age} year old.</li>`).join('')}
</ul>
`;

This how we use nested template strings to display the complex data as an HTML in JavaScript. You might have noticed the join() method in the above example. Template literals use the to String() method which by default joins the returned array by a map with a comma(,), to avoid this comma we need to use join(”).

Conditional statements with Template Strings

The good thing about template string is a conditional statement. Yes, you can use conditional statements the same as you do it in react, and that is with a ternary operator. Let’s see how we use the ternary operator to show conditional data for a featured product.


const product = {
    name: "T-shirt",
    price: 50,
    isFeatured: true
};

We want to show a label if the product is a featured product. The is Featured property is set to true for the featured product as mentioned in the above example. So we will do something like this:


const html = `
    <div class="product">
        <p class="title">
            ${product.name}
        </p>
        <p class="price">
            ${product.price}
        </p>
        ${product.isFeatured?`<div class="featured">Featured</div>`:``}
    </div>
`;

document.body.innerHTML = html;

This is how using a ternary operator, we can display the label for a featured product if there is one, otherwise, it will just use a blank string, which will remove the featured product label.

So this is a nice little way to write a conditional statement right inside the template strings.

Template strings render functions

In the previous examples, the HTML structure was quite simple and easy to manage, but what happens when your data starts to get a little bit complex?

With nesting inside of nesting, inside of nesting, it starts to get harder to maintain and understand your code. The solution for this complexity is render function. Let’s see an example to understand it:


const beer = {
    name: 'Belgian Wit',
    brewery: `Steam Whistle Brewery`,
    keywords: ['pale', 'cloudy', 'spiced', 'crisp']
};

function renderKeywords(keywords) {
    return `
    <ul>
        ${keywords.map(keyword => `<li>${keyword}</li>`).join('')}
    </ul>
    `;
}

const html = `
    <div class="beer">
        <h2>${beer.name}</h2>
        <p class="brewery">${beer.brewery}</p>
        ${renderKeywords(beer.keywords)}
    </div>
`;

document.body.innerHTML = html;

You can see that our function named as renderKeywords has an unordered list, and then uses the map function to fill in the keywords from our array as list items. So our function is going to give us the keyword, and that is going to return, again, another template string that has the keyword inside of it. To avoid the commas from the array we have used join function.

If you look at the HTML you’ve got your unordered list with all of the list items inside, and you can see that any time you need to render out an unordered list of keywords, whether it’s tied to this particular beer or not, it can simply just use renderKeywords to get the markup it needs. This is how render function simplified the work for managing the code in a better way. In this way, it is easy to read and updated the certain part of code without disturbing the other parts.

Leave a Reply