Template Literals in JavaScript – Explained

I was going through a code written in JavaScript, where I noticed lot of string variables defined their values within Backtick (`). It looked strange to me because I have been seeing strings within single or double quotes. So what’s special about strings within Backtick? I quickly pinged my wife who’s an expert in JavaScript and this was her reply – “its a notation for string, called template literals in JavaScript. Instead of single and double quote, you can use this” and then she directed me to this link. Later what I read was interesting details about Template literals. Here I’m going to share what Template Literals are and why they are an interesting constructs in JavaScript.

What is Template Literals in JavaScript?

Template Literals were introduced in ES2015, called as ES6 – which provided a new way to declare strings.

Syntax of Template Literals

It’s simple! Use Backtick (`) instead of single or double quotes:

const str = `this is string`

Why use Template Literals

Because it has advantages over strings declared within single & double quotes.

Template literals allows easy multi-line strings

While using normal strings (within single or double quotes), you need to insert new-line character to create a multi-line strings. For example:

const str = 'string with line one\n and next in line two'
console.log(str)

Output:
string with line one
and next in line two

(or)

const str = "string with line one\n" + "string on line two"
console.log(str)

Output:
string with line one
string on line two

But using Template Literals makes multi-line strings much easier. The moment you open a string with backtick, just hit enter to insert a new line as shown below:

const string = `This is
multi-line string

and it is very simple when backtick is used`

Output:

This is 
multi-line string

and it is very simple when backtick is used

And note the space is very important here, so giving the space as shown in the below example is going to create string as shown right below.

const string2 = `Line one
                 Line two`

Output:

console.log(string2)
Line one
             Line two

Template Literals allow embedded variables & expressions

You can have placeholders inside template literals. The placeholders are specified with a dollar sign and flower brackets as shown below

const v1 = `test`
const v2 = `Value of another variable is ${v1}`
console.log(v2)

Output:
Value of another variable is test

Template literals can embed expressions as well:

const ex1 = `test ${10 + 20 + 30}`
const ex2 = `Somevalue ${ex1}`
console.log(ex2)

Output:

Somevalue test 60

Template tags

Template tags are nothing but the advanced template literals. Tagged templates allows to parse template literals inside a function.

For example:

const ttl = testFunc`Rs ${10}`

function testFunc(literals, ...expressions){

}

In the above example, the first argument of the tagged function contains an array of string values and the rest of the arguments are related to expressions.

I haven’t used template tags anytime, so I’ll point you to an excellent guide on this.