Backticks & Beyond: Unlocking the Magic of Template Literals in JavaScript

Template Literals are the modern ways that used to represent a string in JavaScript. Previously many concatenation methods are present but in ES6(2015) it introduce it. Before go into detail of template literals lets understand the problem with traditional string concatenation.

Problems with traditional string concatenation

Traditional string concatenation use + sign or .concat() method to concat two string. In this method the problem is

• + operator overloaded in JavaScript it works in both addition and string concatination. So the problem is when we use ‘3’ + 5 in JavaScript it gives the output as ‘35’ instead of 8.

• Another case is the out of the 1 + 2 + ‘3’ is ‘33’ not 6; where as “1” + 2 + 3 is “123”

• Concatenation of null and undefined make the string as null or undefined.

• It has a poor readability let suppose ‘Hey’ + firstName + “ ‘ + lastName + ‘ !’ . It cluttered with a lot of quotes.

• In JavaScript the string is immutable, means if a string is created then it cannot be changed. So, when we use + as concatenation it runs the engine again and create another string and copy the old one from the memory.

To reduce all the problems ES6 introduce the Template Literals in JavaScript.

Template Literals

Template Literals are a flexible way to write strings in JavaScript using backticks(``), where we can embedded variable and expression directly into the string.

It makes the string more readable and support easy interpolation of the string.

The syntax of the template Literals is

`Hey ${variableName} !!!!`

Here we just need only a backtick(``) not many more quotes(” ”) in a single string. If we need to access a variable inside the string we just need to add the variable name inside a dollar($) and curly braces ({}). One example is

let firstName = "John";
const greetings = `Hello ${firstName} !!`; 
// here ${firstName} embedded variable in the string
console.log(greetings);

The Output will be

Hello John !!

Multi-line Strings

We can declare multi line string using template literals. It allow us to create string without \n. Just press Enter key and write as usual.

const multiLineString = `Hello, this is a string.
It prints the string in multiline, 
it doesnot need any external command to 
print any multiline string.
Just press Enter and make a multiline string.
`
console.log(multiLineString);

The output will be

Hello, this is a string.
It prints the string in multiline, 
it doesnot need any external command to 
print any multiline string.
Just press Enter and make a multiline string.

Modern use cases of Template Literals

Most of the modern JavaScript code uses template literals. Here are some of the use cases.

Dynamic Expression :

Here we use dynamic expression in template literals. Dynamic expression in normal code makes it hard to readable but using template literals it is very easy and readable.

let a = 5, b = 9;
const str = `\({a} X \){b} = ${a * b}`
console.log(str);

The output will be

5 X 9 = 45

Multi - Line String

We can create a multiline string with template literals without use of \n.

const multiLineString = `Hello, this is a string.
It prints the string in multiline, 
it doesnot need any external command to 
print any multiline string.
Just press Enter and make a multiline string.
`
console.log(multiLineString);

The output will be

Hello, this is a string.
It prints the string in multiline, 
it doesnot need any external command to 
print any multiline string.
Just press Enter and make a multiline string.

Tagged Templates Literals

A "tagged" template allows us to parse the literal with a custom function.

function myTag(strings, ...values) {
  return strings[0] + values[0].toUpperCase() + strings[1];
}
const name = "john";
console.log(myTag`Hello ${name}!`); // Output: Hello JOHN!

The output is

Hello JOHN!

HTML Elements

Template Literals make the HTML element string more readable.

const name = "John";
const html = `<h1>${name}</h1>`;
console.log(html);

The output is

<h1>John</h1>

Final Thoughts

Template Literals are very useful feature of ES6 where we can make the string in a modern and easy way. It used in many part of JavaScript instead of all the use cases of the above. It uses in

• dynamic expression

• multi-line string

• html template

• embedding functions, loops, variable in string.

More or less modern developers uses it everyday to make the string more easier and readable.

Reference Article

You can follow the following articles for more understanding

• https://www.geeksforgeeks.org/javascript/javascript-template-literals/

• https://www.w3schools.com/js/js\_string\_templates.asp

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template\_literals

• https://medium.com/samsung-internet-dev/html-and-templates-javascript-template-literals-2d7494ea3e6

That's it, now you understand Templates Literals in JavaScript. I’d love to hear your thoughts and feedbacks.

Thank You for your patients. ❤️