Difference between Template literals and Tagged template literals?

Question

ES6 has two new kinds of literals:

• template literals
• tagged template literals.

Template literals: multi-line string l

Answer 1

ES6 has new features

Template literals

and

Tagged template literals (Tagged templates)

which make working with strings easier. You wrap your text in `backticks`

With this we can:

1.Interpolate variables

let foo = "abc";

console.log(`Welcome ${foo}`);  // Welcome abc

2.Interpolate any kind of expression

console.log(`2+3 = ${2+3}`) // 2+3 = 5

3.Declare strings with both ' and " quotation marks without having to escape anything.

let foo = `foo is 'bar', "bar" is foo`

console.log(foo); // "foo is 'bar', "bar" is foo"

4.Cleaner syntax for multi-line string

let text = `foo is bar

bar is foo`  

console.log(text);

//"foo is bar

//bar is foo"

5.Tagged templates, we can pass template literals to a function, here is how:

let person = 'Mike';
let age = 28;

let output = myTag `that ${ person } is ${ age }`;

function myTag(strings, personExp, ageExp) {

//strings[0] gets value "that "
//strings[1] gets value " is "
//personExp  gets value " Mike "
//ageStr     gets value "28"

return strings[0] + personExp + strings[1] + ageExp;
}

console.log(output);

// that Mike is 28

6.String.raw, we can get the raw form, here is the example:

let text = String.raw `The "\n" newline won't result in a new line.'
console.log(text);
// The "\n" newline won't result in a new line.

Hope this helps!!!!!!