Template Literals in JavaScript

Hi, welcome to a new article. In this article we will learn about the template literals in JavaScript. So let's get started.

Before we learn about the template literals, first we need to know what the problem was with traditional string concatenation.

Problem with traditional string concatenation

Suppose you are writing code where you need to create a string that tells about the student name, branch, semester, year, etc. You all get this value in some variables. So to create a string with these variables, you need to do string concatenation like below:

let studenName = 'Rahul Sharma';
let semester = 6;
let year = 3;
let branch = 'CSE';

let info = 'The student whose name is ' + studentName + ' of branch ' + branch + 'studying in semester ' + semester + ' and year ' + year + ' had qualified in exam'. 

So as you can see, it's not looking good and also not readable, and it will increase the problem when the string gets bigger. Also for string concatenation, the + operator is used, which is used for both mathematical calculation and string concatenation, which can lead to unexpected results. That's why template literals were introduced.

Template literal syntax

Template literals provide us a way of writing dynamic strings even without use of the concatenation operator (+). With the use of template literals, we can use variables inside the string, and we don't need + an operator for concatenation. In template literals, we write strings inside backticks (``). Below is the syntax:

let greeting = `Hi Rahul, How are you`;

Embedding variables in strings

We can embed variables in the string without the use of + an operator. To do this we use template literals, as template literals allow us to embed variables using ${variableName} inside the string. Below is the example:

let studentName = 'Rahul Sharma' ;

let greeting = `Hi ${studentName}, how are you?` ;

console.log(greeting);

Comparison of trading string concatenation & template literal

With the below comparison, you can see which is more readable and easy to write.

let studenName = 'Rahul Sharma'; 
let semester = 6; 
let year = 3; 
let branch = 'CSE';

// Trading String Concatenation

let stringConcat = 'The student whose name is ' + studenName + ' of branch ' + branch + 'studying in semester ' + semester + ' and year ' + year + ' had qualified in exam' ;

// Template literal

let templateLiteral = `The student whose name is \({studenName} of branch \){branch} studying in semester \({semester} and year \){year} had qualified in exam.`

Multi-line strings

Template literals also allow us to write multiline strings, and they keep formatting intact.

let multiLineString= `Welcome to restaurant - 
=> 1 x Dal Makhani - 300rs,
=> 3 x Garlic Nan - 180rs
=> Total - 480rs
` ; 

console.log(multiLineString) ;

Use cases in modern JavaScript

As we have learned, with the use of template literals, we can write readable strings, embed variables, and write multiline strings. So there are many use cases like the below:

1. String interpolation: We can embed variables inside the string without the use of + operator.

let name = 'Rahul Sharma'

let greet = `Hi ${name}, How are you`;

1. Multiline string: We can write multiline strings without the use of a newline character \n.

let multiline = `Welcome to water park. Below is rule list - 
1. Before entering pool, take a bath.
2. Keep your things secured in your locker.
`

1. Embedded expression: We can also write some JavaScript expression inside a string.

let info = `The addition of 5 & 2 in ${5 + 2}`

1. Dynamic HTML generation: In development we generate dynamic HTMLs, and to do this we can use template literals.

let user  = {
    name : "Rahul",
    message: "JS developer",
};

let element = `
<div class="user-card">
    <h1>Hello, ${user.name}!</h1>
    <p>You have ${user.messages} new messages.</p>
</div>
`

So that's it for this article. Hope you all liked the article.

Thank you!