Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What are the template literals in ES6 ?

  • Last Updated : 10 Oct, 2021

Template Literals are literal words in programming that are used to represent some kind of fixed value and template means a blueprint that can generate some entity, Therefore, the template literals are used to generate strings of a fixed value. These are delimited with the backticks ` `, We can inject the JavaScript expressions and strings inside it.

Syntax:

`Any string ${jsExpression} can appear here`

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

Javascript




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

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




<script>
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}.`);
</script>

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




<script>
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`);
</script>

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




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

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

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!