ES 6 feature - template String literals | Learn ES2015 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 multiline 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 }`;
console.log(result);

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 Syntax

String.raw`templateString`

var str =`Temlate \n String `
console.log(str)
var rawString = String.raw`Template \n String `
console.log(rawString)
var name = 'Frank';
var rawString1 = String.raw`Hi\n${name}, How are you doing?`;
console.log(rawString1);

Output of the above code execution is

Temlate
 String
Template \n String
Hi\nFrank, How are you doing?

The escape character is ignored for interpretation.interpolation expression will not be ignored.

Similar Posts