01 - Template Literals in JS

Hello readers , welcome to this JS Extras series ..

In this series, I'll be posting more about JavaScript - more like JavaScript essentials .. the features that actually matter when you're building real stuff

And, Today.. we gonna talk about Template Literals as title says.

But before jumping to what is Template Literals .. let's understand why do we even care about it?

---

Remember this pain?

Let's assume for a moment .. you're building a simple shopping cart message.
( the one which user sees after adding items to cart )

e.g Hey binod ! you added 4 items in your cart. Total: 2500 INR

How would you write it in JS ?

let name = "binod"; 
let items = 4 ;
let total = 2500;

let message = "Hey " + name + " ! you added " + items + " in your cart. Total: " + total + " INR" ; 

Dang..!!! have a look at number of quotes , and + signs.

It works surely but .

is it readable : NO
is it easy to write : Heck nah

And God forbid you need a line break.

// e.g.. 
let card = "<div>\n" + 
            "<h2>" + name + "</h2>\n" + 
            "<p>Total: " + total + " INR </p>\n" + 
            "</div>\n";

One missing quote.. One forgotten + , and your whole app breaks.

There has to be a better way, right ? ( that's why i'm writing this article lol )

---

Meet Template Literals..

Here's the solution, and it's embarrassingly simple

So , instead of quotes ( " " or ' ' ) , you use backticks.

yeah.. that key above Tab. Looks like : `

And instead of chopping your string into pieces with + every time you need a variable , you just use ${ } and drop the variable right where it belongs.

Watch this :

That's it!..

No + . No opening and closing of quotes multiple times .. No mental gymnastics

Just write the sentence like a normal human being.

---

But wait.. it gets better

You know what else you can put inside ${ } ?

Any JavaScript expression

Not just variables.. anything that returns a value .. can be put inside ${ }

e.g . .

let age = 17;
let canVote = `You are ${ age >18 ? "eligible to vote" : "not eligible yet"}` ; 

let random = `Your lucky number is ${Math.floor(Math.random() * 100 ) }` ; 

// --------------------------
console.log(canVote) ; // You are not eligible yet
console.log(random); // Your lucky number is 58

Isn't it amazing ? Maths, conditions , function calls.. Go crazy.

These ${ } are just placeholders.. and you can put anything there..

---

Multiple - line strings

Remember this nightmare?

let address = "House No. 43\n" + "Street name\n" + "city name" ; 

Now just do this..

let address = `House No. 42
Street Name 
City Name` ; 

Press enter.. That't literally literal . The line break just works.

---

See them side by side

See how the 2nd one looks actually like HTML? That's the point.

---

Your turn real quick

Take this :

let product = "Mouse" ; 
let price = 599;

let msg = "Product: " + product + " , Price : " + price + " INR" ; 

Rewrite it with template literals..

...

...

..

Got it? You may also try to write your favorite song's lyrics

Simple right?

That's template literals. Small feature. Huge quality of life upgrade

Next up in JS Extras : Destructuring .

See you there!

signing off.