Backticks in JavaScript

You must be familiar with "..." and '...' for declaring string literals. However,  string literals with these delimiters can't parse and evaluate the content.

var name = "Jill";
var intro = "Hi, My name is " + name + ".";
console.log(intro); //Hi, My name is Jill.

ES6 has come up with a new string literal being declared by `...` (Backticks) delimiter, the key below the Esc key on your keyboard. It is different than "..." and '...' in a way that it allows the string expression to be embedded which is automatically parsed and evaluated. It is just like an IIFE which is embedded and evaluated inline.


The above code in ES6 way using template literal:

var name = "Jill";
var intro = `Hi, my name is ${name}.`;
console.log(intro); //Hi, my name is Jill.

As you can see, the string literal has parsed and evaluated the string expression inline when string literal is declared using `...` delimiter. This is called Interpolation.

These string literals allowing embedded expressions are called Template Literals.

The evaluated string literal is always a string.

var name = "Jill";
var intro = `Hi, my name is ${name}.`;
console.log(intro); //Hi, my name is Jill.
console.log(typeof intro); //string

Multi-line strings:

In a pre-ES6 environment, for multi-line strings we would have written something like this:

var text = "string text line 1.\n" + "string text line 2.\n" + "string text line 3.";
console.log(text); //string text line 1.
//string text line 2.
//string text line 3.

In ES6 way using template literal:

var text = `string text line 1.
string text line 2.
string text line 3.`;
console.log(text); //string text line 1.
//string text line 2.
//string text line 3.

Interpolated Expressions:

In an interpolated string literal, any valid expression can appear including functions and even other string interpolated string literals.

function upperCase(str) {
  return str.toUpperCase();
 }

var text = "Hi, My name is " +  upperCase("Jill") + ".";
console.log(text);//My name is JILL.

In ES6 way using template literal:

function upperCase(str) {
  return str.toUpperCase();
 }

var text = `Hi, My name is ${upperCase("Jill")}.`;
console.log(text); //My name is JILL.

Tagged Template Literal

One another cool feature of template literals is Tagged string literals. Consider the following piece of code:

function tag(strings, values) {
console.log(strings);
console.log(values);
}

var a = 10;
var b = 20;

tag`The sum of 10+20 is ${a + b}`; //[ 'The sum of 10+20 is ', '' ]
//30

From the above code, you can interpret that tag is a special kind of function which does not require tag(...) to evaluate the function value. Instead, tag`....` is an expression which results in a function.

Raw Strings

We can get the raw unprocessed version of the string from String.raw property.

console.log("This is a string \n This is not a raw string"); //This is a string 
 //This is not a raw string
console.log(String.raw`This is a string \n This is a raw string`); //This is a string \n This is a raw string

The raw version of the string displays the \n sequence whereas the processed version considers it a single newline character.