JavaScript — What are Template Literals

Learn and Understand How to Use Template Literals

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

• What are Template Literals
• What are Tag Functions?

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:

const str1 = 'hello world';
const str2 = "hello world";

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:

const str3 = `hello world`;

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:

var p = {
  name: 'Alfred',
  nn: 'Alfy',
};

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:

// STRING CONCATENATION
console.log('Hi, I\'m ' + p.name + '! Call me "' + p.nn + '".');

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:

// TEMPLATE LITERALS
console.log(`Hi, I'm ${p.name}! Call me "${p.nn}".`);

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:

// Hi, I'm Alfred! Call me "Alfy".

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:

${variableGoesHere}

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:

// STRING CONCATENATION
console.log('Three plus six is ' + (3 + 6) + '.');
// TEMPLATE LITERALS
console.log(`Three plus six is ${3 + 6}.`);
// "Three plus six is 9."

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:

// Dear Mom,
// Hope you are well.
//     Love, your son

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

// STRING CONCATENATION
console.log("Dear Mom,\n" + 
"Hope you are well.\n" + 
"\tLove, your son")

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

// TEMPLATE LITERALS
console.log(`Dear Mom,
Hope you are well.
    Love, your son`);

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! ⬇⬇