Template Literals in JavaScript

Before template literals comes into JavaScript developers mostly use string concatenation for combining text and variables. It works but when string becomes bigger code starts looking messy and difficult to read.

Let's first understand the old way.

let name = "Ansh"
let age = 20

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

console.log(message)

Output

My name is Ansh and I am 20 years old.

Now imagine writing large HTML or long messages like this. Too many plus signs everywhere. One missing quote and boom error comes like unexpected token. JavaScript sometimes behaves like angry maths teacher.

This is why Template Literals were introduced in JavaScript.

---

What are Template Literals?

Template literals are modern way of writing strings in JavaScript.

Instead of normal quotes we use backticks.

` `

Backtick key mostly exists below Esc button in keyboard.

Template literals make strings more readable and easy to manage.

---

Template Literal Syntax

Basic syntax looks like this.

let name = "Ansh"

let message = `Hello ${name}`

console.log(message)

Output

Hello Ansh

Here ${} is used for embedding variables inside string. This process is called string interpolation.

---

Traditional Concatenation vs Template Literals

Old Way

let course = "JavaScript"

let text = "Welcome to " + course + " Course"

console.log(text)

Modern Way

let course = "JavaScript"

let text = `Welcome to ${course} Course`

console.log(text)

Both give same output but template literals look much cleaner.

---

Embedding Variables in Strings

One biggest advantage of template literals is directly inserting variables and expressions inside string.

Example.

let a = 10
let b = 20

console.log(`Total is ${a + b}`)

Output

Total is 30

Inside ${} we can even write calculations and JavaScript expressions.

---

Multi Line Strings

Before template literals multi line strings were painful. Developers mostly use \n or string concatenation.

Old Way

let text = "Hello\nWelcome\nJavaScript"

Now using template literals.

let text = `
Hello
Welcome
JavaScript
`

console.log(text)

Output

Hello
Welcome
JavaScript

This becomes very useful while writing HTML templates, emails or formatted text.

---

Real Use Cases of Template Literals

Template literals are heavily used in modern JavaScript development.

Creating dynamic HTML

let username = "Ansh"

let card = `
<div>
   <h1>${username}</h1>
</div>
`

Showing user messages

let product = "Laptop"

console.log(`Your ${product} order is confirmed`)

API responses and logging

console.log(`Server running on port ${3000}`)

React and Node.js projects also use template literals everywhere.

---

Why Developers Prefer Template Literals

Main reason is readability.

Code becomes cleaner. Less confusion with quotes and plus signs. Easy to write dynamic strings. Better for large HTML templates. Multi line strings become simple.

Once developers start using template literals mostly they never want to go back to old concatenation style.

---

Final Thoughts

Template literals solve one simple but very important problem in JavaScript which is writing dynamic strings cleanly.

Using backticks and ${} syntax we can easily combine variables, expressions and multi line text without messy concatenation.

Small feature but huge improvement in daily coding life.