Sunday, August 19, 2018

ES 6 features - template String literals | Learn Es6 tutorials

In this post, I will document the es6 feature - template string literals with examples
Es6 introduced template literals feature. It is a syntactical change for string initialization

Prior to Es6 versions, Es5 Template Strings Example

The string is a group of characters/words enclosed in the single or double quote.
if you want to add variable inside a string, It is very difficult to add the string as string need to concatenate and add the variables
var name = 'Frank';
var message = 'Hello ' + name + ',  How are you doing?';
with this approach, String manipulations is a tedious task and possibility of error occurrence is more.
String literals are enclosed in either single quote or double quote
With Es6, Back-ticks are introduced for string literals for interpolation

Es6 Template String literals Example

The same code can be rewritten with a simple way using the back-ticks symbol
var name = 'Frank';
var message = `Hello ` + name + `,  How are you doing?`;
console.log(message); // Hello Frank,  How are you doing?

Template Literals Strings Introduction

Es6 declared strings and added domain specific syntax for interpolation, Expressions, Multi-line strings.
There are two types of template literals
Template Literals
These are string literals that allow string interpolation and multiple lines
Tagged template literals
These are functions calls which contain parameters passed via template strings

String interpolation Expression example

Below template string contains placeholder. Dollar symbol and curly braces are used for dynamically placing variable value. This is called interpolation
var m = 10;
var n = 4;
console.log(`Sum  is ${m + n}`)

Multiline String creation example

prior to ES6, we used to declare multi-line strings by appending line break
String msg="Template strings are introduced in es6.\n Developer friendly for declaring string literals"
With es6, We will rewrite the same as below
String msg=`Template strings are introduced in es6.
Developer friendly for declaring string literals`;
Just need to define a String literal with separate lien enclosed in back-tick (`....`) symbol.
The output is the same for both strings examples.

Tagged template string example

tagged templates allow you to call a function with template strings
The function has two arguments
The first argument is an array of values
the second argument is the remaining interpolation variable
Function returned the manipulated string as output
var name= 'Tom';
var salary = 5000;
function myfunction(stringsarray, nameExpression, salaryExpression) {
  var array0 = stringsarray[0]; // Employee
  var array1 = stringsarray[1];  // salary is 
  return `${array0}${nameExpression}${array1}${salaryExpression}`;
var result = myfunction`Employee ${ name } salary is  ${salary }`;

Output of the above code execution is
Employee Tom salary is  5000

String raw() Method example

This is a static method used to get the raw string from the template string literals. So escape characters interpretation are ignored and return the same
var str =`Temlate \n String ` 
var rawString = String.raw`Template \n String ` 
var name = 'Frank';
var rawString1 = String.raw`Hi\n${name}, How are you doing?`;
Output of the above code execution is
Template \n String 
Hi\nFrank, How are you doing?
The escape character is ignored for interpretation.interpolation expression will not be ignored.

Related article