Template Literals in ES6

Imagine for a moment you have some glorious tabular data at your disposal. This data needs to be shared with the world around you. This is the information that is going to change peoples lives, permanently put disputes to rest, and sit etched in the minds of brilliant men and women for years to come. As time wanes on it occurs to you that you are going to have to put this tabular data on a page. So you reach into your JavaScript toolbox. Maybe you go full-on, balls-to-the-wall React. Possibly you reach for a templating tool like Handlebars. Still yet maybe you just go injecting DOM content into your JavaScript with Vanilla JS or jQuery.

All of the above are valid and no one is here to judge. However, brave adventurer, if you haven’t done so already it might be advised that you take a look at Literal Templates. Introduced in ES6 these are formatted strings with the ability to inject JavaScript. Native. Like, right out of the box (webpack, Bable, etc notwithstanding). They work like this:

`Hello, I am a template literal.`

Notice we use a back-tick ` to delineate a template literal. This distinguishes it from traditional JavaScript strings that are delineated with single or double quotes. In addition to its syntactical differences there are two very specific advantages to using template literals:

1. Multi-line strings: A single string can span two or more lines
2. Expression Interpolation: Javascript variables and expressions can be inserted directly in the string.

Despite being not much more than syntactical sugar this does offer a significant benefit in terms of readability, code maintainability, and code structure. Lets take a look at another example:

`<div id="row">
 <div> Name: ${name} </div>
 <div> Age: ${age} </div>
 </div>`

Stop. I know what you are thinking. Markup in JavaScript. He’s a witch! Burn ‘em! Fair enough. We all know that this can lead to unneeded complexity in our code. It can also often be a necessary evil. Take JSX for example. Componentizing our applications has forced us to move markup into our JavaScript and it gives us options. So set aside your bias for now and lets take a look.

The first thing you might notice is our template literal looks like markup. We don’t end up with plus signs all over to concatenate strings. We use a familiar embedded expression syntax and we get something that closely resembles other templating languages. Lets take it a step further:

var template = function(obj) {
  return `
  <div class="row">
  <div class="col-lg-1"> ${obj.name} </div>
  <div class="col-lg-2"> ${obj.value} </div>
  </div>
  `
}

Now we have a function that accepts and object and returns a component. Lastly is it just a matter of selecting your element on the page, injecting the rendered DOM element from the template using an object array, and you can make your data accessible to the world.

document.getElementById("myID").innerHTML = template({
      'name': 'Date',
      'value': data.Date
    })

This is a good way to start breaking dependencies on larger libraries and frameworks from your application for medium and small scale applications. This gives you a very lightweight and customizable routine for creating templates. It might not scale to larger projects or ones that are already using a framework or library that does templating but it gives you one more option in your tool belt. The nice thing is: This one is native.

MDN Web Doc: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals