ES6 Template Literals – String Interpolation ES6

Template Literals or String Literals allows you to embedded expression. We can also use multi-line strings and string interpolation features with them.
String Interpolation means Intuitive interpolation for single-line and multi-line strings.

Notes:

1. Template literals are enclosed by the back-tick(` `) character instead of the double or single quote.
2. Template literals can contain place holders. These are can be identified by the dollar ($) sign and curly braces ({}). for example: ${expression or variable name or object properties}

How it is works ?

When templates literals are created and function is called than is simply parse the templates literals into single string. If function found the the tagged templates literals or the expression than it will get the value of that expression and put into the string.

String Interpolation

In simple language string interpolation means concatenates the string and put the value of the variable and expression into the string.

Before the ES6

var my_name = "Mr. Smith";
var final_string = "My name is " + my_name;
alert(final_string);

With ES6

var my_name = "Mr. Smith";
var final_string = `My name is ${my_name}`;
alert(final_string);

As you see in the example the before ES6 we have to concatenates the string with the plus(+) sign but with ES6 we have to simply use the back-tick(`) and expression ($ and curly braces) to concatenates the string.

Multi-line String Interpolation

When we have to create the multi-line string in JavaScript we usually uses the “\n” to create a new line but with ES6 we can simply press enter and start to writing a new line.

Before the ES6

var multi_line_string = "This is the line 1 \n" +
"This is the line 2";

alert(multi_line_string);

With ES6:

var multi_line_string = `This is the line 1
This is the line 2`;

alert(multi_line_string);

Expression String Interpolation

Many time we have to solve arithmetic problem and after we have to concatenates with string.

Before the ES6

var price = 100;
var quentity = 20;

var answer = "Total is: " + (price + quentity) + " Rs/-";
alert(answer);

With ES6

var price = 100;
var quentity = 20;

var answer = `Total is: ${price + quentity} Rs/-`;
alert(answer);

We can also uses the object and it’s properties in the string interpolation.

Before the ES6

var customer = { FirstName: "James", LastName: "Bonds" };
var card = { Products: "Criminal Case Book", Price: 500, Unit: 10 };

var final_string = "Hello " + customer.FirstName + " " + customer.LastName + ", \n" +
"Your selected product: " + card.Products + " \nPrice is: " + card.Price + " \nUnit is: " + card.Unit +
" \nTotal is: " + ( card.Price * card.Unit);

alert(final_string);

With ES6

var customer = { FirstName: "James", LastName: "Bonds" };
var card = { Products: "Criminal Case Book", Price: 500, Unit: 10 };

var final_string = `Hello ${customer.FirstName} ${customer.LastName},
Your selected product: ${card.Products}
Price is: ${card.Price}
Unit is: ${card.Unit}
Total is: ${card.Price * card.Unit}`;

alert(final_string);

If you have any question about it, Please comment down below

Happy Coding!!!

🙂