There are many Unicode characters that can be stored in 16 bits and can also be represented using a surrogate pair. For example, 'é' character can be escaped two ways:

console.log("u00E9");  //output 'é'
console.log("eu0301"); //output 'é'

The problem is when applying the == operator, iterating or finding length you will get an unexpected result. Here is an example to demonstrate this:

var a = "u00E9";
var b = "eu0301";

console.log(a == b);
console.log(a.length);
console.log(b.length);

for(let i = 0; i<a.length; i++)
{
  console.log(a[i]);
}

for(let i = 0; i<b.length; i++)
{
  console.log(b[i]);
}

Output is:

false
1
2
é
é

Here both the strings display the same way but when we do various string operations on them we get different results.

The length property ignores surrogate pairs and assumes every 16-bit to be single character. The == operator matches the binary bits therefore it also ignores surrogate pairs. The [] operator also assumes every 16-bit to be an index therefore ignoring surrogate pairs.

In this case to solve the problems we need to convert the surrogate pairs to 16-bit character representation. This process is called as normalization. To do this ES6 provides a normalize() function. Here is an example to demonstrate this:

var a = "u00E9".normalize();
var b = "eu0301".normalize();

console.log(a == b);
console.log(a.length);
console.log(b.length);

for(let i = 0; i<a.length; i++)
{
  console.log(a[i]);
}

for(let i = 0; i<b.length; i++)
{
  console.log(b[i]);
}

Output is:

true
1
1
é
é

Here the output is as expected. normalize() returns the normalized version of the string. normalize() uses NFC form by default.

Normalization is not just done in the case of surrogate pairs; there are many other cases.

To learn more about Unicode string normalization and normalization forms visit http://www.unicode.org/reports/tr15/.

In ES5, to embed expressions within normal strings you would do something like this:

Var a = 20;
Var b = 10;
Var c = "JavaScript";
Var str = "My age is " + (a + b) + " and I love " + c;

console.log(str);

Output is:

My age is 30 and I love JavaScript

In ES6, template strings make it much easier to embed expressions in strings. Template strings can contain expressions in them. The expressions are placed in placeholders indicated by dollar sign and curly brackets, that is, ${expressions}. The resolved value of expressions in the placeholders and the text between them are passed to a function for resolving the template string to a normal string. The default function just concatenates the parts into a single string. If we use a custom function to process the string parts then the template string is called as a tagged template string and the custom function is called as tag function.

Here is an example which shows how to embed expressions in a template strings:

let a = 20;
let b = 10;
let c = "JavaScript";
let str = `My age is ${a+b} and I love ${c}`;

console.log(str);

Output is:

My age is 30 and I love JavaScript

Let's create a tagged template string, that is, process the string using a tag function. Let's implement the tag function to do the same thing as the default function. Here is an example to demonstrate this:

let tag = function(strings, ...values)
{
  let result = "";

  for(let i = 0; i<strings.length; i++)
  {
    result += strings[i];

    if(i<values.length)
    {
      result += values[i];
    }
  }

  return result;
};

return result;
};

let a = 20;
let b = 10;
let c = "JavaScript";
let str = tag `My age is ${a+b} and I love ${c}`;

console.log(str);

Output is:

My age is 30 and I love JavaScript

Here our tag function's name is tag but you can name it anything else. The custom function takes two parameters, that is, the first parameter is an array of string literals of the template string and the second parameter is an array of resolved values of the expressions. The second parameter is passed as multiple arguments therefore we use the rest argument.

Template strings provide a new way to create strings that contain multiple lines of text.

In ES5, we need to use new line character to add new line breaks. Here is an example to demonstrate this:

console.log("1
2
3");

Output is:

1
2
3

In ES6, using multiline string we can simply write:

console.log(`1
2
3`);

Output is:

1
2
3

In the above code we simply included new lines where we needed to place . While converting the template string to normal string the new lines are converted to .

A raw string is a normal string in which escaped characters aren't interpreted.

We can create a raw string using a template string. We can get raw version of a template string use String.raw tag function. Here is an example to demonstrate this:

let s = String.raw `xy
${ 1 + 1 }z`;
console.log(s);

Output is:

xy
2z

Here is not interpreted as new line character instead of its two characters, that is, and n. Length of variable s would be 6.

If you create a tagged function and you want to return the raw string then use raw property of the first argument. raw property is an array, which holds raw versions of the strings of the first argument. Here is an example to demonstrate this:

let tag = function(strings, ...values)
{
    return strings.raw[0]
};

let str = tag `Hello 
 World!!!`;

console.log(str);

Output is:

Hello 
 World!!!