JavaScript — What are Template Literals

Learn and Understand How to Use Template Literals

Brandon Morelli
codeburst
4 min readNov 30, 2017

--

This is Part 1 of 2 in a series on Template Literals

Template Literals Defined

Template literals are quite simply the easiest way to improve your JavaScript code readability when working with Strings.

Ok, that’s great and all, but what exactly is a Template Literal?

  • A template is a preset format.
  • A literal is a value written exactly as it’s meant to be interpreted.

In JavaScript terminology though, a template literal is a way to concatenate strings while allowing embedded expressions and improving readability.

Strings & Literals

When writing strings in JavaScript, we normally use single ( ) or double ( ) quotes:

With template literals, we use enclosing back-ticks ( ` ) instead. The back tick key is usually located in the top left corner of your keyboard, below the escape key and next to the 1 key.

Here’s what a template literal looks like:

Don’t get too confused though. A template literal is still a String. But by using the back-ticks and writing our strings as template literals we can do some really cool stuff!

String Concatenation

As I stated initially, template literals can drastically improve your code readability. One simple example of this is when you want to use variables within strings. Consider the following example:

Above we have an object, p. Our p object has two properties, name and nn which stands for nickname. We want to console.log the values along with some text. When working with strings, this might look something like this:

Two annoying features of Strings stick out to me in this example. First, we have to escape our apostrophe with backslashes. And Secondly, trying to figure out what in the world the code is trying to say. All of the single and double quotes get very confusing.

Now lets look at doing the exact same thing with template literals:

As you can see, when working with template literals, our code is so much easier to read. You can easily see what our text is saying and where our variables are being inserted.

In both scenarios above, the following will log out to the console:

As you can hopefully see above, when working with template literals, all you have to do to add a variable in is use the dollar sign followed by curly brackets:

But it doesn’t just have to be variables within our curly brackets. We can also input JavaScript. Consider this example with basic addition within a String:

It is definitely much easier to see what is going on when we use template literals.

Line Breaks

Line breaks are another area where template literals can truly shine. Consider a scenario where we wanted to log out the following code:

Maintaining the line breaks and tabs with strings is a fairly straight forward task, but does lead to some readability issues:

Meanwhile, when using template literals, we can just type our text as we want it to appear:

That’s because, with template literals, all new line characters, tabs, spaces, etc. inserted in the source become a part of the string.

This is very important to remember as it can be both a blessing and a curse at times. In terms of readability though, is definitely a benefit.

Closing Notes:

Thanks for reading, and hopefully this was helpful! If you’re ready to finally learn Web Development, check out The Ultimate Guide to Learning Full Stack Web Development in 6 months.

I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, or follow me on Twitter.

If this post was helpful, please click the clap 👏button below a few times to show your support! ⬇⬇

--

--

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Written by Brandon Morelli

Creator of @codeburstio — Frequently posting web development tutorials & articles. Follow me on Twitter too: @BrandonMorelli

Responses (17)

What are your thoughts?