WHY Template Literals?

Imagine you want to print your name, age, city in old java script style where Template Literals dosen't exsist, then you are supposed to write code in this form:

//OLD js Style
const name = "Mohit";
const age = 21;
const city = "Jaipur";

console.log("Hey, I'm " + name + " and I'm " + age + "years old and I'm from " + city);

Now, as a developer, if you look at it, you can see how messy and ugly this code is, right? Let's rewrite the same code using template literals. No need to worry about syntax for a moment; this is just for visual support. All symbols will be explained further.

//NEW js Style
console.log(`Hey, I'm \({name} and I'm \){age} years old and I'm from ${city}`);

Compare side by side:

OLD STYLE	NEW STYLE
console.log("Hey, I'm " + name + " and I'm " + age + "years old and I'm from " + city);	console.log(`Hey, I'm \({name} and I'm \){age} years old and I'm from ${city}`);

You already understand why Template Literals were introduced in modern JavaScript.

Understanding Syntax

You can noticce upto 3 different symbols used in Template Literals: ``, $, {}. Let's understand them clerly:

1. ` - called BackTick

   • Also known as grave asscent

   • It's on your top left corner on your corenr above Tab key.

   • In the context of Template Literals, it's called delimeter and it's aim is to open and close the whole string.

2. $ - called Dollar Sign

   • It's literally caled the dollar sign.

   • For the current context it tells javascript: "Heyy, something special is coming".

   • When combined with {}, it becomes part of a template literal; otherwise, it's just a dollar sign with no significance.

   • In this context it's often called the interpolation prefix or just part of the interpolation syntax

3. {} - called Curly Braces (or Curly Brackets)

   • Also called curly brackets.

   • In this context, they act as a placeholder / expression container

   • Whatever you put inside {} gets evaluated and injected into the string

NOTE: Together ${} has a Special name!

"Interpolation Expression" or "Template Expression"

And the whole process of injecting variable values directly to the string is called:

"String Interpolation!"

Entering New Line:

If you are aware then we need \n i.e. newline character for new lines, but using template litearls you just have to hit Enter .

const name = "Mohit";
const age = 21;
const city = "Jaipur";

//Hitting enter after and
console.log(`Hey, I'm ${name} and
I'm \({age} years old and I'm from \){city}`);

/*Output:
Hey, I'm Mohit and 
I'm 21 years old and I'm from Jaipur
*/

Old String	Template Literal
Uses " " or ' '	Uses ``(backticks)
+ to join variables	${} to insert variables
\n for new lines	Just press Enter
Ugly and painful	Beautiful and easy 🌟