# Template Literals in JavaScript

Working with strings is something we do all the time in JavaScript. Whether it’s displaying a user’s name, showing messages, or creating dynamic text, strings are everywhere.

Before template literals were introduced, combining strings and variables often became messy and difficult to read. Modern JavaScript solved this problem with a cleaner and more readable approach called **template literals**.

Template literals make string handling easier, especially when working with dynamic values and multi-line text.

* * *

## Problems with Traditional String Concatenation

Before template literals, strings were combined using the `+` operator.

Example:

```javascript
let name = "Ritesh";
let age = 22;

let message = "My name is " + name + " and I am " + age + " years old.";

console.log(message);
```

Output:

```id="u3zkt0"
My name is Ritesh and I am 22 years old.
```

This works, but as strings become longer, the code becomes harder to read and maintain.

Imagine building larger sentences or HTML structures using multiple `+` signs everywhere. It quickly becomes cluttered.

* * *

## Before vs After Template Literals

![](https://cdn.hashnode.com/uploads/covers/695e6df5e8d5605ec2e5e7d7/4fa49643-7ede-4a06-a201-39e1617f811a.png align="center")

* * *

## Template Literal Syntax

Template literals use **backticks (** **)** instead of normal quotes.

Example:

```javascript
let name = "Ritesh";

let message = `Hello ${name}`;

console.log(message);
```

Output:

```id="zjz18m"
Hello Ritesh
```

The `${}` syntax allows us to directly insert variables into strings.

This feature is called **string interpolation**.

* * *

## Embedding Variables in Strings

With template literals, variables can be embedded directly inside a string without using `+`.

Example:

```javascript
let product = "Laptop";
let price = 55000;

console.log(`The price of ${product} is ₹${price}.`);
```

Output:

```id="jlwm7a"
The price of Laptop is ₹55000.
```

This style is much cleaner and easier to understand.

* * *

## Visualizing String Interpolation

![](https://cdn.hashnode.com/uploads/covers/695e6df5e8d5605ec2e5e7d7/37879c14-080a-42d0-9ed4-153cb57a2c7b.png align="center")

* * *

## Multi-line Strings

Another major advantage of template literals is support for multi-line strings.

Before template literals, writing multi-line text required newline characters (`\n`) or complicated concatenation.

Old approach:

```javascript
let text = "Hello\n" +
"Welcome to JavaScript\n" +
"Learning";
```

Using template literals:

```javascript
let text = `
Hello
Welcome to JavaScript
Learning
`;

console.log(text);
```

This is much more readable and natural.

* * *

## Use Cases in Modern JavaScript

Template literals are widely used in modern JavaScript development.

Common use cases include:

*   displaying user information
    
*   generating dynamic messages
    
*   creating HTML templates
    
*   working with API responses
    
*   building reusable UI components
    

Example:

```javascript
let username = "Rahul";

let html = `
  <div>
    <h2>Welcome ${username}</h2>
  </div>
`;

console.log(html);
```

This becomes especially useful in frontend frameworks like React and Vue.

* * *

## Comparing Readability

### Traditional Concatenation

```javascript
let name = "Amit";

console.log("Hello " + name + ", welcome to JavaScript.");
```

### Template Literal

```javascript
let name = "Amit";

console.log(`Hello ${name}, welcome to JavaScript.`);
```

The template literal version is shorter, cleaner, and easier to understand.

* * *

## Assignment Practice

Create variables for a student name and course.

```javascript
let name = "Rahul";
let course = "MCA";
```

Create a message using traditional string concatenation.

```javascript
let oldMessage = "Student " + name + " is studying " + course;

console.log(oldMessage);
```

Create the same message using a template literal.

```javascript
let newMessage = `Student ${name} is studying ${course}`;

console.log(newMessage);
```

Create a multi-line string using template literals.

```javascript
let message = `
Welcome Rahul
Hope you are enjoying JavaScript
Keep practicing
`;

console.log(message);
```

Try changing the variable values and observe how template literals automatically update the output.