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.