Open In App

What are the template literals in ES6 ?

Improve
Improve
Like Article
Like
Save
Share
Report

Template literals are a new feature that was introduced in ECMAScript6, which offers a simple method for performing string interpolation and multiline string creation.

The template literals were called template strings before the introduction of ES6. Starting from ES6 (ECMAScript 6), we have Template Literals which are indicated by the backtick (` `) character. Template literals can also be used to hold the placeholders, that are indicated by the ‘$’ sign and the {}  braces such as (${expression}).

Syntax:

`Any string ${jsExpression} can appear here`

Example: In this example, we are illustrating a simple demo of template literals.

Javascript




const str1 = `Hi, GeeksforGeeks Learner`;
console.log(str1);
 
const str = "GeeksforGeeks";
const str2 = `Hi, ${str} Learner`;
console.log(str2);


Output:

Hi, GeeksforGeeks Learner
Hi, GeeksforGeeks Learner

Advantages: The usage of template strings has the following advantages:

1. Concatenating Strings: Template literals provide a much simpler way to concatenate two strings. Normally we use the “+” operator but with template literals, we can write whatever we want.

Example:

Javascript




const strA1 = "Normal Javascript techniques";
const strA2 =  "are a little bit lengthy";
console.log(strA1 + " " + strA2 + ".");
 
const strB1 = "Template literals";
const strB2 =  "make them simple";
console.log(`${strB1} ${strB2}.`);


Output:

Normal Javascript techniques are a little bit lengthy.
Template literals make them simple.

2. No need to use \n and \t escape sequences: Template literals reserve each type of space so we don’t need to tell explicitly for a new line or extra space.

Example:

Javascript




console.log("There will be a tab space after this"
    + "\t" + "end of string.");
console.log("First Line" + "\n" + "Second Line");
 
console.log(`There will be a tab space    after this end of string.`);
console.log(`First Line
Second Line`);


Output:

There will be a tab space after this    end of string.
First Line
Second Line
There will be a tab space after this    end of string.
First Line
Second Line

3. Combination of expressions and strings becomes easy: With template literals, we can inject any kind of expression which will be executed and determined at runtime inside strings. 

Example 1: In this example, we are showing how a ternary operator can be used to generate a dynamic string with template literals.

Javascript




let darkMode = true;
 
console.log(
    `The current background color
    is ${darkMode ? "#000000" : "#FFFFFF" }`
);


Output:

The current background color
is #000000

Example 2: The simple illustration of how a mathematical expression can be inserted in template literals.

Javascript




const price = 5799.00;
 
console.log(
    `The price of product is ${price} and
    after 16% discount it would cost ${price-price*16*0.01}`
);


Output:

The price of product is 5799 and
after 16% discount it would cost 4871.16


Last Updated : 12 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads