A new element added in ES6 is the template literal. It is a new type for creating strings in JavaScript that adds several important new features, such as the ability to create multi-line strings and include an expression in a string. As a developer, all of these features can enhance your abilities for manipulating strings and allowing you to create dynamic strings.

This post will illustrate template literals and how to use them in JavaScript.

What are JavaScript Template Literals (Template Strings)?

“Template Literals” are commonly known as “Template Strings”. They are surrounded by the backtick (“) character, as compared to quotes in strings. Its placeholders are denoted by the dollar sign “$”, and curly braces {} like “${expression}” is acceptable in template literals. If you want to use an expression, you may put it in the “${expression}” box inside the backticks.

A template literal is an improved version of a standard JavaScript string. Substitutions make a significant distinction between a template literal and an ordinary string. You can integrate variables and expressions into a string using substitutes. These variables and expressions will have their values automatically replaced by the JavaScript engine.

Syntax

Use the below syntax for declaring a single string using template literals:

 
For multiple lines, follow the given syntax:

 
If you want to add expression inside the backticks, the following syntax is used:

 
Check out the following examples to develop a better understanding of the stated concept.

Example 1: Declare a Single Line String Using JavaScript Template Literals

Usually, to create a string, it is required to use a single or double quotes, but in template literals, you can create a string as follows:

 
The output shows that it works the same just like the simple creating sting with the help of single or double quotes:

Example 2: Declare Multi-line String Using JavaScript Template Literals

Normally, for printing multiple lines, we use the concatenation operator (+) and to add a new line, (\n) can be utilized, that can often make the code complex:

 
While for using template literals, you can start a new line by pressing enter from the keyboard in the backticks block:

 
Output

Example 3: String with Expression Substitutions

Here, first we will create two variables “x” and “y”, with the values “20” and “15”, respectively:

 
Then, create a variable “sum” for adding the “x” and “y”:

 
If you want to add two numbers and display the sum of these numbers on console, normally, it is required to concatenate the strings and variables in regular string format which often creates a mess to use single or double quotes repeatedly with the strings and join them with each other and with the variables using (+):

 
While, using the template literals, you only have to specify the strings with variables as an expression inside the “${}” in backtick block:

 
Output

We have gathered all the essential information related to the template literals.

Conclusion

“Template Literals”, also known as “Template Strings”, is an improved version of a standard JavaScript string surrounded by the backtick (“) character, as compared to quotes in strings. It permits the creation of single-line and multi-line strings without the use of the concatenation operator and includes an expression in a string. This post has discussed template literals in JavaScript with explained examples.