Template Literals in ES6

Template Literals in ES6           

ES6 introduced a new feature called template literals. It facilitates us to define a multiline string and executes the string interpolation. The template literals are referred to as string literals, which enable us to work with embedded expressions.

The templates literals are known as template strings before ES6. The quotes enclose the template strings, but the template literals are enclosed by the backticks (``). It is a key situated below the ESC key in the keyboard.

The template literals consist of the placeholders. They are presented by the dollar sign associated with curly braces ($(expression)). If we want to use an expression inside the backtick, then it should be placed inside the ($(expression)).

Syntax

var string = `string value`;    

Multiline string

In the regular string, if we want to create multiple strings, then we use escape sequence (\n) to the new line; but in the template string, we can end a string with the help of backtick (`) character.

Example

We will try to understand the above concept with the help of the following example.

console.log (“Hello ES6 \n Hello JavaScript”);    // Without using Template Literal
console.log (`Welcome to the world of ES6         // With using Template Literal
Welcome to the world of JavaScript`);

Output

After the execution of the code, we got the following output:

Interpolation in String

ES6 facilitates us to work with string interpolation. The template literals can be considered as the procurator used for string substitution. If we want to combine the regular strings with expressions, we have to use ${} syntax.

Here, we will try to understand the above concept with the help of the following examples.

Example1

var name = “ES6”;
var cname = “JavaScript”;
console.log(`Hello, ${name}!
Welcome to ${cname}`);

Output

After the execution of the above example, we got the following output:

Example2

Here, we have another example of string interpolation.

var a = 25;
var b =35;
console.log (`The sum of variables ${a} and ${b} is:
${a+b}`);

Output

We got the following output after the successful execution of the code:

Raw Strings

In the template literal, the raw method enables us to access the raw strings. We can define the raw string with the help of string.raw() method. It is similar to the default template function. The string.raw() method displays the strings without analyzing the back slashed character. It enables us to define back slashes alike literals in the regular expression. The string.raw() method is also helpful in printing sub-directory locations without the use of backslashes.

Example

Here, we have an example to understand the above concept.

var rawText = String.raw` Welcome back \n Hello \n world!
console.log(rawText)

Output

After the execution of the above code, we got the following output:

Tagged Templates

The tagged templates are referred to as the most prior form of template literals. The tagged template enables us to interpret the template literals with the functions. The script of tagged templates alike the function definition. But the minor difference is when we invoke a tagged literal, the parentheses () are not required.

The first tag argument consists of an array with string values, and the other contains the related expressions.

Here, we will try to understand the above concept with the help of the following examples.

Example1

Function tagliteral(string)
{
          Console.log(string)
}
Tagliteral `Hello ES6` ;

Output

After the execution of the above example, we got the following output:

If we pass a value to a tagged literal, the output can be an expression or the fetched variable value. Here, we have another illustration for the same.

Example2

function taggedliteral (string, value1, value2)
{
          console.log(string);
console.log(value1+ “   ” + value2);
}
Let text = “Hello ES6”;
Tggedliteral` animals ${text} ${30+20}` ;

Output

After the execution of the code, we got the following output:

String.from.CodePoint()

The String.fromCodePoint () methods return a new string, which is the combination of a particular sequence of Unicode points.

Example

Here, we have an example to understand the above method.

console.log (String.fromCodePoint(49))
console.log (String.fromCodePoint(70, 66))

Output

We have the following output after the execution of the above code.