Template literals  or template strings  allow you to use strings or embedded expressions in the form of a string. They are enclosed in backticks . For example-

					const name = 'Kaushal';
console.log(`Hello ${name}!`); // Hello Kaushal!

Without template literals, when you want to combine output from expressions with strings, you’d concatenate them using the addition operator +:

					const a = 50;
const b = 100;
console.log("Total of " + a + " & "+b + "is : " +(a+b));

In the above example we used  concatenate operator or addition operator  + to evaluate expression with variable and  string, but sometime it becomes  more  confusing or error prone  due to multiple double quotes, and  + (addition operators.)

With template literals, you can avoid the concatenation operator — and improve the readability of your code — by using placeholders of the form ${expression} to perform substitutions for embedded expressions:

					const a = 50;
const b = 100;
console.log(`Total of ${a} & ${b} is : ${a+b}`;

Template Literals for Strings

In the earlier JavaScript you would use a single quote ” or a double quote “” for strings. But remember that we can not use same quote sign within the string means if you started a string with single quote cant use  single quote ‘ inside, or if you used ” double quote  to start a string can not use same inside string, we can do this using escape sequence character ‘\’ For example,

					const str1 = 'This is the first string';

// cannot use the same quotes
const str2 = 'A "quote" inside a string';  // valid code
const str3 = 'A 'quote' inside a string';  // Error

const str4 = "Another 'quote' inside a string"; // valid code
const str5 = "Another "quote" inside a string"; // Error

// escape characters using \
const str3 = 'A \'quote\' inside a string';  // valid code
const str5 = "Another \"quote\" inside a string"; // valid code

But template literals make above expression more easier without using escape sequence character.

					// escape characters using \
const str3 = 'A \'quote\' inside a string';  // valid code
const str5 = "Another \"quote\" inside a string"; // valid code

Multiline Strings Using Template Literals

Template literals also make it easy to write multiline strings. For example,

					// using the + operator
const message = 'This is a multiline message\n' + 
'that spans across multiple lines\n' + 
'in the code.'


// using template literals
const message1 = `This is a multiline message
that spans across multiple lines
in the code.`


Expression Interpolation

Before JavaScript ES6, you would use the +  operator to concatenate variables and expressions in a string.  

With template literals, it’s really easier to include variables and expressions inside a string using the ${...} syntax.

The process of assigning variables and expressions inside the template literal is known as interpolation. For example,

					//without template literals 
const name = 'Kaushal'; console.log('Hello ' + name); // Hello Kaushal

// With template literals
const name = 'Kaushal';
console.log(`Hello ${name}`); 

// template literals used with expression
const a = 50;
const b = 100;
console.log(`Total of ${a} & ${b} is : ${a+b}`;

Tagged Templates

Tagged templates behave like a JavaScript function. You use tags that allow you to parse template literals with a function.

Tagged template is written like a function definition. However, you do not pass parentheses () when calling the literal. For example- first we create a simple function with parameters, and then demonstrate tagged templates

					// its just normal function with parameter only
function tagTemplate(strings) {
    return strings;

// passing argument
const result = tagTemplate('Kaushal Rao');

// creating tagged template
    const result = taggedTemplate`Kaushal Rao`;
// output  - ite returns an array
["kaushal Rao"]

Leave a Reply

Your email address will not be published. Required fields are marked *