ES6 Template Literals

Template literals are a new feature introduced in ECMAScript 2015/ ES6. It provides an easy way to create multiline strings and perform string interpolation. Template literals are the string literals and allow embedded expressions.

Before ES6, template literals were called as template strings. Unlike quotes in strings, template literals are enclosed by the backtick (` `) character (key below the ESC key in QWERTY keyboard). Template literals can contain placeholders, which are indicated by the dollar sign and curly braces ($(expression}). Inside the backticks, if we want to use an expression, then we can place that expression in the ($(expression}).

Syntax
snippet
var str = `string value`;

Multiline strings

In normal strings, we have to use an escape sequence \n to give a new line for creating a multiline string. However, in template literals, there is no need to use \n because string ends only when it gets backtick(`) character.

Let us try to understand it with the following example.

Example
snippet
// Without template literal 
console.log('Without template literal \n multiline string'); 
  
// With template literal 
console.log(`Using template literal
multiline string`);
Output
Without template literal multiline string Using template literal multiline string

String Interpolation

ES6 template literals support string interpolation. Template literals can use the placeholders for string substitution. To embed expressions with normal strings, we have to use the ${} syntax.

Example #1
snippet
var name = 'World';
var cname = 'rookienerd';
console.log(`Hello, ${name}!
Welcome to ${cname}`);
Output
Hello, World! Welcome to rookienerd

Let us see another example of string interpolation.

Example #2
snippet
var x = 10;
var y = 20;
console.log(`The product of the variables ${x} and ${y} is:
 ${x*y}`);
Output
The product of the variables 10 and 20 is: 200

Tagged templates

Tagged templates are one of the more advanced form of template literals. Tagged template literals allow us to parse template literals with a function.

The first argument of the tag function contains an array having string values, and the remaining arguments are related to the expression. The writing of tagged literal is similar to the function definition, but the difference occurs when the tagged literals get called. There are no parentheses () required to call a literal.

Let us see the illustration for the tagged templates.

Example #1
snippet
function TaggedLiteral(str) { 
    console.log(str); 
} 
  
TaggedLiteral `Hello World`;
Output
[ 'Hello World' ]
Example #2

We can also pass the values in a tagged literal. The value can be the result of some expression or the value fetched from the variable. We can see the illustration for the same in the following code:

snippet
function TaggedLiteral(str, val1, val2) { 
    console.log(str); 
    console.log(val1+"    "+val2); 
} 
  
let text = 'Hello World'; 
TaggedLiteral`Colors ${text} ${10+30}`;
Output
[ 'Colors ', ' ', '' ] Hello World 40

Raw Strings

The template literal raw method allows the accessing of raw strings as they were entered. In addition to this, the string.raw() method exists for creating the raw strings as similar to the default template function. It allows us to write the backslashes as we would in a regular expression literal.

The string.raw() method is used to show the strings without any interpretation of backslashed characters. It is also useful to print windows sub-directory locations without require to use a lot of backslashes.

Example
snippet
var rawText = String.raw`Hello \n World \n Welcome back! ` 
console.log(rawText)
Output
Hello \n World \n Welcome back!

String.fromCodePoint()

This method returns a string, which is created by using the specified sequence of Unicode code points. It throws a RangeError if there is an invalid code point is passed.

Example
snippet
console.log(String.fromCodePoint(49))        
console.log(String.fromCodePoint(80, 76))
Output
1 PL
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +