Normally with strings we’d use the single-quote ( ‘ ) or double quote ( “ ) to identify a string literal in our JavaScript. The really no difference between the two types. The only requirement is that the end is the same type as the start.

For Example:

let myString = "This is using double quotes.";
let myOtherString = 'This is using single quotes.';

That brings us to the new marker for ES2015. The back tick ( ` ). This is the mark to the left of 1 on the keyboard. The back tick gives us some extra power when creating string.

Multiline String

When we are using single/double quotes and the string becomes too long for the screen have no option but to break apart the string into multiple assignment statements.

For example, this below would cause an error. If we want long passages of text to display on the screen we’ll need to rely on the editor to handle word wrap.

let message = "hello, This is long message so I tried to 
break it on multiple lines. But it will fail to run.";

With the Template Literal and the back tick, we can break the lines as often as we want.

let message = `Hello,
with the
back ticks 
I don't
worry about it.`;

Another use of the multiline is the textarea input box. If you wanted to have a textarea that starts with an item on each line you could do:

<textarea id="myTextBox"></textarea>
document.getElementById("myTextBox").value = `first

Using single/double quotes, the \n needs to be used to break the text to the next line.

document.getElementById("textblock").value = "first\nsecond\nthird";

Expression interpolation

This may seem familiar,

let message = "My name is " + myName + ". I am " + myAge + " years old.";

Building a string using variables can challenge even the most careful coders. So often a missing quote can result in lost time debugging. But now with expression interpolation, this is no longer an issue.

let message = `My name is ${myName}. I am ${myAge} years old.`;

Wow, so much easier and cleaner! The ${expression} can also be used with a little JavaScript. Math can easily be done inside the interpolation.

let message = `If you add ${janCost} and ${febCost}, you get ${janCost + febCost}.`;

Nesting templates

Let’s add some more advanced JavaScript into the interpolation. The ternary operator works very well inside the ${ } expression. And the nesting is that we can put them inside each other!

const classes = `header ${ isLargeScreen() ? '' : `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

The above statement will create a string to be added to an element. The first ternary will check if isLargeScreen() returns true, if so a empty string will be used. If false it’ll start with icon- but check item.isCollapsed if true will use explander and if false will use collapser.

Continuing On

Another feature it Tag functions. This makes a function is help with creating Template Literals. This may be a future blog post so stay tuned.


MDN’s page about Template Literals Exploting JS section on Template Literals