JavaScript – Template Literals

In this post, we’re going to look at template literals. What can you do with them?

Uses of template literals

• Mix single and double quotes without using the backslash escape
• Mix variables, expressions and strings more easily
• Write multi-line texts easier

Mixing single and double quotes

First of all, these live in between back-ticks (`) instead of single or double quotes.

e.g.

const text = `Baz Roberts`;

This then means we don’t have to worry about what type of quotes we’re using inside the back-ticks.

e.g.

const text2 = `Barrie's called "Baz"`;

As you can see, we have a mix of single and double quotes but that’s fine between the back-ticks.

e.g.

const text3 = "Barrie's called \"Baz\"";

Previously, we had to use the backslash to escape the quotes when we wanted to use them as part of the string.

---

Mixing variables with strings

What I really like about template literals is that it makes it much easier to mix strings and variables.

e.g.

const v = 1000000;
const text4 = `Baz's website "bazroberts.com" has had over ${v} visitors.`;
Logger.log(text4); //Baz's website has had over 1000000 visitors.

Here, we have the variable v which holds the numbers of visitors. I want to add it to the sentence and to do so, we use the syntax ${} and put the variable in the middle of the curly brackets.

To compare that with the older way to do it:

e.g.

const text5 = "Baz's website \"bazroberts.com\" has had " + v + " visitors.";
Logger.log(text5); //Baz's website has had 1000000 visitors.

With template literals there’s no need to continuously open and close quote marks or escape from quote marks you want to use.

This is called string interpolation.

---

Mixing expressions with strings and variables

We can also add expressions right in the template literal.

e.g.

const cost = 100;
const profit = 0.05;
const price = `The price is ${cost * (1 + profit)} dollars.`;
Logger.log(price); //The price is 105 dollars.

As you can see, we can mix strings, variables, and expressions, like this price calculation all together with ease.

---

Multi-line strings

We can also use template literals to write multi-line strings more easily.

e.g.

const multiLineText = `This text
has more than
one line.`;
Logger.log(multiLineText);
/*
This text
has more than
one line.
*/

Previously, we had to use the new line character and the plus sign, which is far less elegant.

const multiLineText2 = "This text\n" + "has more than\n" + "one line.";
Logger.log(multiLineText2);

Tip: It’s great for adding multi-line alert messages.

Escaping the dollar sign and back-tick

Unfortunately, we can’t escape the escape backslash (sorry, terrible pun!). There are times when we might want to include a dollar sign or a back-tick in our string. To do so, we use the backslash before the dollar sign or back-tick we want to include in the string.

e.g.

const price2 = 105;
Logger.log(`The price is \$${price2} dollars.`); //The price is $105 dollars.

As you can see, it’s included the dollar sign in the string.

Template literals are wonderfully simple but make writing JavaScript and Apps Script much easier.

Note, this site is focussed on Apps Script, so the examples above are focussed on the use of JavaScript in Apps Script, hence the use of Logger.log above. Learn more Apps Script here.

This post is taken from my book “JavaScript Fundamentals for Apps Script Users“.

---