Template Strings

Overview

Template Literals are strings literals which allow embedded expressions. Before ES6 introduced them, they were called as Template Strings.

Javascript strings always had limitations compared to the strings of the other programming languages. Apart from simple concatenation, there was not much we could have done with strings.

ECMAScript 6’s template literals provided syntax for creating domain-specific languages (DSLs) for working with content in a safer way than the solutions available earlier.

Let us see how we can interpolate string with ES6.
With template strings we can handle following features easily.

• Multiline strings
• Basic string formatting: Use varaibles as sub parts of the string.
• HTML escaping: Safely insert string into a HTML by transforming it.

Syntax

`Hello this is how template strings are decalared`

Against the standard ' and " quotes template literals uses back-ticks ` `.

Multiline strings

Before ES6. We had to use escape characters for new line like.

var a = "Line will break after this \n\ line broke before backslah \n\ broke again";
console.log(a); 
// Line will break after this 
//  line broke before backslah 
//  broke again

With ES6.

let a = `line will break after this 
 line broke before backslah 
broke again`;

console.log(a);
// line will break after this 
//  line broke before backslah 
// broke again

String Interpolation

Before ES6.

var b = 4;
var a = "Two plus Two is " + b;
console.log(a); // Twp plus Two is 4

With ES6.

let b = 4;
let a = `Two plus Two is ${b}`;
console.log(a); // Twp plus Two is 4

Expression Interpolation

Before ES6.

var b = 2;
var a = "Two plus Two is " + (b + b);
console.log(a); // Twp plus Two is 4

With ES6.

let b = 4;
let a = `Two plus Two is ${b + b}`;
console.log(a); // Twp plus Two is 4

Nesting

With ES6 it is possible to nest templates within one other.

let firstName = 'prashant';
let lastName = 'yadav';
console.log(`Hello! ${`My name is ${firstName} ${lastName}`}`);
//Hello! My name is prashant yadav

Ternary operator

With ES6 we can easily add logic to the template literals.

let a = 5;
console.log(`a is greater than 5?. ${a > 5 ? true : false}`);
//a is greater than 5?. false

Passing a function inside template strings

With ES6 we can pass function to the template literals.

let a = () => 5;
console.log(`a is greater than 5?. ${a() > 5 ? true : false}`);
//a is greater than 5?. false

let a = (i) => i > 5;
let b = 6;
console.log(`a is greater than 5?. ${a(b)}`);
//a is greater than 5?. true

Tagged Templates

In ES6 the real power of template literals comes from the Tagged Templates.
With Tagged Templates we can parse the template literals with a function. The first argument of a tag function contains an array of string values. The remaining arguments are related to the expressions. The function name can be anything that we want. See the following example.

let a = 5;
function square(strings, value1){
  let str = strings[0]; //Square of
  let str2 = strings[1]; // is
  let num = value1; //${a} = 5;
  return `${str} ${num } ${str2} ${num * num }`;
}

let output = square`Square of ${a} is`;
console.log(output);
//Square of  5  is 25

As you can see in the above example we can return anything from the Tagged function.