ES6 template String literals syntax and examples

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

How to create template Strings in Es5 Example

The string is a group of characters/words enclosed in the single or double quote. if you want to add a variable inside a string, It is difficult to add the string as the string needs to concatenate and add the variables.

var name = 'Frank';
var message = 'Hello ' + name + ',  How are you doing?';

with this approach, String manipulations are a tedious task, and the possibility of error occurrence is more.

String literals are enclosed in either a single quote or a double quote.

With Es6, Back-ticks are introduced for string literals for interpolation.

Es6 Template String literals Example

The same code can be rewritten in 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 and Tagged Literals Strings Introduction

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

String interpolation Expression example

The below template string contains a placeholder. Dollar symbols and curly braces are used for dynamically placing variable values. This is called interpolation.

var m = 10;
var n = 4;
console.log(`Sum  is ${m + n}`)

Multiline String creation example

before 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 a separate lien enclosed in the 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 The function returned the manipulated string as the 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);

The output of the above code execution is

Employee Tom salary is  5000

String raw() Method example

It is a static method used to get the raw string from the template string literals. So escape characters interpretations 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);

The output of the above code execution is

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

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