I have the following code for ECMAScript 6 template literals:
let person = {name: 'John Smith'};
let tpl = `My name is ${person.name}.`;
let MyVar = "My name is " + person.name + ".";
console.log("template literal= " + tpl);
console.log("my variable = " + MyVar);
The output is as follows:
template literal= My name is John Smith.
my variable = My name is John Smith.
This is the fiddle.
I tried searching for the exact difference, but I couldn't find it,
What is the difference between the following two statements?
let tpl = `My name is ${person.name}.`;
And
let MyVar = "My name is "+ person.name+".";
I am already able to get the string MyVar concatenated with person.name here, so what would be the scenario to use the template literal in?
If you are using template literals only with placeholders (e.g. `Hello ${person.name}`) like in the question's example, then the result is the same as just concatenating strings. Subjectively it looks better and is easier to read, especially for multi-line strings or strings containing both ' and " since you don't have to escape those characters any more.
Readability is a great feature, but the most interesting thing about templates are Tagged template literals:
let person = {name: 'John Smith'};
let tag = (strArr, name) => strArr[0] + name.toUpperCase() + strArr[1];
tag `My name is ${person.name}!` // Output: My name is JOHN SMITH!
In the third line of this example, a function named tag is called. The content of the template string is split into multiple variables, that you can access in the arguments of the tag function: literal sections (in this example the value of strArr[0] is My name is and the value of strArr[1] is !) and substitutions (John Smith). The template literal will be evaluated to whatever the tag function returns.
The ECMAScript wiki lists some possible use cases, like automatically escaping or encoding input, or localization. You could create a tag function named msg that looks up the literal parts like My name is and substitutes them with translations into the current locale's language, for example into German:
console.log(msg`My name is ${person.name}.`) // Output: Mein Name ist John Smith.
The value returned by the tag function doesn't even have to be a string. You could create a tag function named $ which evaluates the string and uses it as a query selector to return a collection of DOM nodes, like in this example:
$`a.${className}[href=~'//${domain}/']`
ES6 comes up with a new type of string literal, using the ` back-tick as the delimiter. These literals do allow basic string interpolation expressions to be embedded, which are then automatically parsed and evaluated.
let actor = {name: 'RajiniKanth', age: 68};
let oldWayStr = "<p>My name is " + actor.name + ",</p>\n" +
"<p>I am " + actor.age + " old</p>\n";
let newWayHtmlStr =
`<p>My name is ${actor.name},</p>
<p>I am ${actor.age} old</p>`;
console.log(oldWayStr);
console.log(newWayHtmlStr);
As you can see, we used the ..`` around a series of characters, which are interpreted as a string literal, but any expressions of the form ${..} are parsed and evaluated inline immediately.
One really nice benefit of interpolated string literals is they are allowed to split across multiple lines:
var Actor = {"name" : "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log( text );
// Now is the time for all good men
// to come to the aid of their
// country!
Interpolated Expressions
Any valid expression is allowed to appear inside ${..} in an interpolated string lit‐ eral, including function calls, inline function expression calls, and even other interpo‐ lated string literals!
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper( "warm" )} welcome
to all of you ${upper( `${who}s` )}!`;
console.log( text );
// A very WARM welcome
// to all of you READERS!
Here, the inner ${who}s`` interpolated string literal was a little bit nicer convenience for us when combining the who variable with the "s" string, as opposed to who + "s". Also to keep an note is an interpolated string literal is just lexically scoped where it appears, not dynamically scoped in any way:
function foo(str) {
var name = "foo";
console.log( str );
}
function bar() {
var name = "bar";
foo( `Hello from ${name}!` );
}
var name = "global";
bar(); // "Hello from bar!"
Using the template literal for the HTML is definitely more readable by reducing the annoyance.
The plain old way:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'Let\'s go'
'</div>';
With ES6:
`<div class="${className}">
<p>${content}</p>
Let's go
</div>`
Your string can span multiple lines.
You don't have to escape quotation characters.
You can avoid groupings like: '">'
You don't have to use the plus operator.
Tagged Template Literals
We can also tag a template string, when a template string is tagged, the literals and substitutions are passed to function which returns the resulting value.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings,value,value2) {
console.log(strings,value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
// ["test ", " ", ""]
// "Neat"
// 5
We can use the spread operator here to pass multiple values. The first argument — we called it strings — is an array of all the plain strings (the stuff between any interpolated expressions).
we then gather up all subsequent arguments into an array called values using the ... gather/rest operator, though you could of course have left them as individual named parameters following the strings parameter like we did above (value1, value2 etc).
function myTaggedLiteral(strings,...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
// ["test ", " ", ""]
// ["Neat", 5]
The argument(s) gathered into our values array are the results of the already evaluated interpolation expressions found in the string literal. A tagged string literal is like a processing step after the interpolations are evaluated but before the final string value is compiled, allowing you more control over generating the string from the literal. Let's look at an example of creating a re-usable templates.
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
Raw Strings
Our tag functions receive a first argument we called strings, which is an array. But there’s an additional bit of data included: the raw unprocessed versions of all the strings. You can access those raw string values using the .raw property, like this:
function showraw(strings, ...values) {
console.log( strings );
console.log( strings.raw );
}
showraw`Hello\nWorld`;
As you can see, the raw version of the string preserves the escaped \n sequence, while the processed version of the string treats it like an unescaped real new-line. ES6 comes with a built-in function that can be used as a string literal tag: String.raw(..). It simply passes through the raw versions of the strings:
console.log( `Hello\nWorld` );
/* "Hello
World" */
console.log( String.raw`Hello\nWorld` );
// "Hello\nWorld"
It's a lot cleaner and as stated in the comments, is a common features in another languages.
The other thing that I found nice was the line breaks, very useful when writing strings.
let person = {name: 'John Smith', age: 24, greeting: 'Cool!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting +"\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
While my answer does not directly address the question, I thought it may be of some interest to point out one drawback of using template literals in favor of array join.
Let’s say I have
let patient1 = {firstName: "John", lastName: "Smith"};
let patient2 = {firstName: "Dwayne", lastName: "Johnson", middleName: "'The Rock'"};
So some patients have a middleName and others do not.
If I wanted a string representing the full name of a patient
let patientName = `${patient1.firstName} ${patient1.middleName} ${patient1.lastName}`;
Then this would become "John undefined Smith"
However if I did
let patientName = [patient1.firstName, patient1.middleName, patient1.lastName].join(" ");
Then this would become just "John Smith"
General_Twyckenham pointed out that a join on " " would result in an extra space between "John" and "Smith".
To get around this, you can have a filter before the join to get rid of falsy values:
[patient1.firstName, patient1.middleName, patient1.lastName].filter(el => el).join(" ");
Related
I have two code snippets which are using tagged template feature of template literals
Code one
function myTaggedLiteral(strings, value, value2) {
console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral `test ${someText} ${2 + 3} test2`;
In this case it will log
[
"test ",
" ",
" test2"
] Neat 5
This another example is from mdn
var person = 'Mike';
var age = 28;
function myTag(strings, personExp, ageExp) {
console.log(strings, personExp, ageExp)
// some other code
}
var output = myTag `That ${ person } is a ${ age }`;
This will log
[
"That ",
" is a ",
""
] Mike 28
So in first log there is an empty string "" after test , my understanding was this of the template expression ${someText} ${2 + 3} but in the second log there is no "" after That , although both of function is called in almost same structure of parameters.
Will really appreciate if someone helps me to understand why there is an empty string after test in the first log.
Secondly if I tweak the first program
function myTaggedLiteral(strings, value, value2) {
console.log(strings);
}
let someText = 'Neat';
myTaggedLiteral `test test6 test3 ${someText} ${2 + 3}`;
and this will log
[
"test test6 test3 ",
" ",
""
]
As per mdn
The first argument of a tag function contains an array of string
values.
If that is so then why it is outputting the first value as "test test6 test3 " instead of "test","test6","test3"?
Think of the strings parameter like the result of a String.prototype.split() where the separator is any placeholder, aka
... indicated by the dollar sign and curly braces (${expression}).
Here's an example
let templateString = 'test test6 test3 ${someText} ${2 + 3}'
let strings = templateString.split(/\$\{.*?}/) // regex for a placeholder
console.log(strings)
From the documentation...
If separator appears at the beginning or end of the string, or both, the array begins, ends, or both begins and ends, respectively, with an empty string
That is why, if any placeholders appear at the boundaries of your string, you will get empty strings in the resulting array.
In this you can always be sure that strings will have one more entry than there are placeholder expressions. Creating the resulting string will always involve (ignoring any extra transformations you might want to do)...
strings[0] + arg[0] +
strings[1] + arg[1] +
...
strings[n] + arg[n] + strings[n+1]
where n is the number of placeholders.
ES6 has two new kinds of literals:
template literals
tagged template literals.
Template literals: multi-line string literals that support interpolation.
eg:
const firstName = 'Jane';
console.log(`Hello ${firstName}! How are you today?`);
Tagged template literals : are function calls whose parameters are provided via template literals.
eg:
String.raw`Hello ${firstName}! How are you today?
What is difference between these two literals ? and when to use Tagged template literals?
With tagged template literal we able to modify the output of template literals using a function. The first argument contains an array of string literals. The second, and each argument after the first one, are the values of the processed substitution expressions. We can use any name to our function.
var a = 1;
var b = 2;
function tag(strings, ...values) {
console.log(strings[0]); // "One "
console.log(strings[1]); // " Two"
console.log(strings[2]); // " Three"
console.log(values[0]); // 1
console.log(values[1]); // 2
}
tag`One ${ a } Two ${ b } Three`;
// One
// Two
// Three
// 1
// 2
here our our tag function will return the output with custom formats
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!!!!!!
I have the following code for ECMAScript 6 template literals:
let person = {name: 'John Smith'};
let tpl = `My name is ${person.name}.`;
let MyVar = "My name is " + person.name + ".";
console.log("template literal= " + tpl);
console.log("my variable = " + MyVar);
The output is as follows:
template literal= My name is John Smith.
my variable = My name is John Smith.
This is the fiddle.
I tried searching for the exact difference, but I couldn't find it,
What is the difference between the following two statements?
let tpl = `My name is ${person.name}.`;
And
let MyVar = "My name is "+ person.name+".";
I am already able to get the string MyVar concatenated with person.name here, so what would be the scenario to use the template literal in?
If you are using template literals only with placeholders (e.g. `Hello ${person.name}`) like in the question's example, then the result is the same as just concatenating strings. Subjectively it looks better and is easier to read, especially for multi-line strings or strings containing both ' and " since you don't have to escape those characters any more.
Readability is a great feature, but the most interesting thing about templates are Tagged template literals:
let person = {name: 'John Smith'};
let tag = (strArr, name) => strArr[0] + name.toUpperCase() + strArr[1];
tag `My name is ${person.name}!` // Output: My name is JOHN SMITH!
In the third line of this example, a function named tag is called. The content of the template string is split into multiple variables, that you can access in the arguments of the tag function: literal sections (in this example the value of strArr[0] is My name is and the value of strArr[1] is !) and substitutions (John Smith). The template literal will be evaluated to whatever the tag function returns.
The ECMAScript wiki lists some possible use cases, like automatically escaping or encoding input, or localization. You could create a tag function named msg that looks up the literal parts like My name is and substitutes them with translations into the current locale's language, for example into German:
console.log(msg`My name is ${person.name}.`) // Output: Mein Name ist John Smith.
The value returned by the tag function doesn't even have to be a string. You could create a tag function named $ which evaluates the string and uses it as a query selector to return a collection of DOM nodes, like in this example:
$`a.${className}[href=~'//${domain}/']`
ES6 comes up with a new type of string literal, using the ` back-tick as the delimiter. These literals do allow basic string interpolation expressions to be embedded, which are then automatically parsed and evaluated.
let actor = {name: 'RajiniKanth', age: 68};
let oldWayStr = "<p>My name is " + actor.name + ",</p>\n" +
"<p>I am " + actor.age + " old</p>\n";
let newWayHtmlStr =
`<p>My name is ${actor.name},</p>
<p>I am ${actor.age} old</p>`;
console.log(oldWayStr);
console.log(newWayHtmlStr);
As you can see, we used the ..`` around a series of characters, which are interpreted as a string literal, but any expressions of the form ${..} are parsed and evaluated inline immediately.
One really nice benefit of interpolated string literals is they are allowed to split across multiple lines:
var Actor = {"name" : "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log( text );
// Now is the time for all good men
// to come to the aid of their
// country!
Interpolated Expressions
Any valid expression is allowed to appear inside ${..} in an interpolated string lit‐ eral, including function calls, inline function expression calls, and even other interpo‐ lated string literals!
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper( "warm" )} welcome
to all of you ${upper( `${who}s` )}!`;
console.log( text );
// A very WARM welcome
// to all of you READERS!
Here, the inner ${who}s`` interpolated string literal was a little bit nicer convenience for us when combining the who variable with the "s" string, as opposed to who + "s". Also to keep an note is an interpolated string literal is just lexically scoped where it appears, not dynamically scoped in any way:
function foo(str) {
var name = "foo";
console.log( str );
}
function bar() {
var name = "bar";
foo( `Hello from ${name}!` );
}
var name = "global";
bar(); // "Hello from bar!"
Using the template literal for the HTML is definitely more readable by reducing the annoyance.
The plain old way:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'Let\'s go'
'</div>';
With ES6:
`<div class="${className}">
<p>${content}</p>
Let's go
</div>`
Your string can span multiple lines.
You don't have to escape quotation characters.
You can avoid groupings like: '">'
You don't have to use the plus operator.
Tagged Template Literals
We can also tag a template string, when a template string is tagged, the literals and substitutions are passed to function which returns the resulting value.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings,value,value2) {
console.log(strings,value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
// ["test ", " ", ""]
// "Neat"
// 5
We can use the spread operator here to pass multiple values. The first argument — we called it strings — is an array of all the plain strings (the stuff between any interpolated expressions).
we then gather up all subsequent arguments into an array called values using the ... gather/rest operator, though you could of course have left them as individual named parameters following the strings parameter like we did above (value1, value2 etc).
function myTaggedLiteral(strings,...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
// ["test ", " ", ""]
// ["Neat", 5]
The argument(s) gathered into our values array are the results of the already evaluated interpolation expressions found in the string literal. A tagged string literal is like a processing step after the interpolations are evaluated but before the final string value is compiled, allowing you more control over generating the string from the literal. Let's look at an example of creating a re-usable templates.
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
Raw Strings
Our tag functions receive a first argument we called strings, which is an array. But there’s an additional bit of data included: the raw unprocessed versions of all the strings. You can access those raw string values using the .raw property, like this:
function showraw(strings, ...values) {
console.log( strings );
console.log( strings.raw );
}
showraw`Hello\nWorld`;
As you can see, the raw version of the string preserves the escaped \n sequence, while the processed version of the string treats it like an unescaped real new-line. ES6 comes with a built-in function that can be used as a string literal tag: String.raw(..). It simply passes through the raw versions of the strings:
console.log( `Hello\nWorld` );
/* "Hello
World" */
console.log( String.raw`Hello\nWorld` );
// "Hello\nWorld"
It's a lot cleaner and as stated in the comments, is a common features in another languages.
The other thing that I found nice was the line breaks, very useful when writing strings.
let person = {name: 'John Smith', age: 24, greeting: 'Cool!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting +"\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
While my answer does not directly address the question, I thought it may be of some interest to point out one drawback of using template literals in favor of array join.
Let’s say I have
let patient1 = {firstName: "John", lastName: "Smith"};
let patient2 = {firstName: "Dwayne", lastName: "Johnson", middleName: "'The Rock'"};
So some patients have a middleName and others do not.
If I wanted a string representing the full name of a patient
let patientName = `${patient1.firstName} ${patient1.middleName} ${patient1.lastName}`;
Then this would become "John undefined Smith"
However if I did
let patientName = [patient1.firstName, patient1.middleName, patient1.lastName].join(" ");
Then this would become just "John Smith"
General_Twyckenham pointed out that a join on " " would result in an extra space between "John" and "Smith".
To get around this, you can have a filter before the join to get rid of falsy values:
[patient1.firstName, patient1.middleName, patient1.lastName].filter(el => el).join(" ");
ES6 has two new kinds of literals:
template literals
tagged template literals.
Template literals: multi-line string literals that support interpolation.
eg:
const firstName = 'Jane';
console.log(`Hello ${firstName}! How are you today?`);
Tagged template literals : are function calls whose parameters are provided via template literals.
eg:
String.raw`Hello ${firstName}! How are you today?
What is difference between these two literals ? and when to use Tagged template literals?
With tagged template literal we able to modify the output of template literals using a function. The first argument contains an array of string literals. The second, and each argument after the first one, are the values of the processed substitution expressions. We can use any name to our function.
var a = 1;
var b = 2;
function tag(strings, ...values) {
console.log(strings[0]); // "One "
console.log(strings[1]); // " Two"
console.log(strings[2]); // " Three"
console.log(values[0]); // 1
console.log(values[1]); // 2
}
tag`One ${ a } Two ${ b } Three`;
// One
// Two
// Three
// 1
// 2
here our our tag function will return the output with custom formats
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!!!!!!
I have the following code for ECMAScript 6 template literals:
let person = {name: 'John Smith'};
let tpl = `My name is ${person.name}.`;
let MyVar = "My name is " + person.name + ".";
console.log("template literal= " + tpl);
console.log("my variable = " + MyVar);
The output is as follows:
template literal= My name is John Smith.
my variable = My name is John Smith.
This is the fiddle.
I tried searching for the exact difference, but I couldn't find it,
What is the difference between the following two statements?
let tpl = `My name is ${person.name}.`;
And
let MyVar = "My name is "+ person.name+".";
I am already able to get the string MyVar concatenated with person.name here, so what would be the scenario to use the template literal in?
If you are using template literals only with placeholders (e.g. `Hello ${person.name}`) like in the question's example, then the result is the same as just concatenating strings. Subjectively it looks better and is easier to read, especially for multi-line strings or strings containing both ' and " since you don't have to escape those characters any more.
Readability is a great feature, but the most interesting thing about templates are Tagged template literals:
let person = {name: 'John Smith'};
let tag = (strArr, name) => strArr[0] + name.toUpperCase() + strArr[1];
tag `My name is ${person.name}!` // Output: My name is JOHN SMITH!
In the third line of this example, a function named tag is called. The content of the template string is split into multiple variables, that you can access in the arguments of the tag function: literal sections (in this example the value of strArr[0] is My name is and the value of strArr[1] is !) and substitutions (John Smith). The template literal will be evaluated to whatever the tag function returns.
The ECMAScript wiki lists some possible use cases, like automatically escaping or encoding input, or localization. You could create a tag function named msg that looks up the literal parts like My name is and substitutes them with translations into the current locale's language, for example into German:
console.log(msg`My name is ${person.name}.`) // Output: Mein Name ist John Smith.
The value returned by the tag function doesn't even have to be a string. You could create a tag function named $ which evaluates the string and uses it as a query selector to return a collection of DOM nodes, like in this example:
$`a.${className}[href=~'//${domain}/']`
ES6 comes up with a new type of string literal, using the ` back-tick as the delimiter. These literals do allow basic string interpolation expressions to be embedded, which are then automatically parsed and evaluated.
let actor = {name: 'RajiniKanth', age: 68};
let oldWayStr = "<p>My name is " + actor.name + ",</p>\n" +
"<p>I am " + actor.age + " old</p>\n";
let newWayHtmlStr =
`<p>My name is ${actor.name},</p>
<p>I am ${actor.age} old</p>`;
console.log(oldWayStr);
console.log(newWayHtmlStr);
As you can see, we used the ..`` around a series of characters, which are interpreted as a string literal, but any expressions of the form ${..} are parsed and evaluated inline immediately.
One really nice benefit of interpolated string literals is they are allowed to split across multiple lines:
var Actor = {"name" : "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log( text );
// Now is the time for all good men
// to come to the aid of their
// country!
Interpolated Expressions
Any valid expression is allowed to appear inside ${..} in an interpolated string lit‐ eral, including function calls, inline function expression calls, and even other interpo‐ lated string literals!
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper( "warm" )} welcome
to all of you ${upper( `${who}s` )}!`;
console.log( text );
// A very WARM welcome
// to all of you READERS!
Here, the inner ${who}s`` interpolated string literal was a little bit nicer convenience for us when combining the who variable with the "s" string, as opposed to who + "s". Also to keep an note is an interpolated string literal is just lexically scoped where it appears, not dynamically scoped in any way:
function foo(str) {
var name = "foo";
console.log( str );
}
function bar() {
var name = "bar";
foo( `Hello from ${name}!` );
}
var name = "global";
bar(); // "Hello from bar!"
Using the template literal for the HTML is definitely more readable by reducing the annoyance.
The plain old way:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'Let\'s go'
'</div>';
With ES6:
`<div class="${className}">
<p>${content}</p>
Let's go
</div>`
Your string can span multiple lines.
You don't have to escape quotation characters.
You can avoid groupings like: '">'
You don't have to use the plus operator.
Tagged Template Literals
We can also tag a template string, when a template string is tagged, the literals and substitutions are passed to function which returns the resulting value.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings,value,value2) {
console.log(strings,value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
// ["test ", " ", ""]
// "Neat"
// 5
We can use the spread operator here to pass multiple values. The first argument — we called it strings — is an array of all the plain strings (the stuff between any interpolated expressions).
we then gather up all subsequent arguments into an array called values using the ... gather/rest operator, though you could of course have left them as individual named parameters following the strings parameter like we did above (value1, value2 etc).
function myTaggedLiteral(strings,...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
// ["test ", " ", ""]
// ["Neat", 5]
The argument(s) gathered into our values array are the results of the already evaluated interpolation expressions found in the string literal. A tagged string literal is like a processing step after the interpolations are evaluated but before the final string value is compiled, allowing you more control over generating the string from the literal. Let's look at an example of creating a re-usable templates.
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
Raw Strings
Our tag functions receive a first argument we called strings, which is an array. But there’s an additional bit of data included: the raw unprocessed versions of all the strings. You can access those raw string values using the .raw property, like this:
function showraw(strings, ...values) {
console.log( strings );
console.log( strings.raw );
}
showraw`Hello\nWorld`;
As you can see, the raw version of the string preserves the escaped \n sequence, while the processed version of the string treats it like an unescaped real new-line. ES6 comes with a built-in function that can be used as a string literal tag: String.raw(..). It simply passes through the raw versions of the strings:
console.log( `Hello\nWorld` );
/* "Hello
World" */
console.log( String.raw`Hello\nWorld` );
// "Hello\nWorld"
It's a lot cleaner and as stated in the comments, is a common features in another languages.
The other thing that I found nice was the line breaks, very useful when writing strings.
let person = {name: 'John Smith', age: 24, greeting: 'Cool!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting +"\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
While my answer does not directly address the question, I thought it may be of some interest to point out one drawback of using template literals in favor of array join.
Let’s say I have
let patient1 = {firstName: "John", lastName: "Smith"};
let patient2 = {firstName: "Dwayne", lastName: "Johnson", middleName: "'The Rock'"};
So some patients have a middleName and others do not.
If I wanted a string representing the full name of a patient
let patientName = `${patient1.firstName} ${patient1.middleName} ${patient1.lastName}`;
Then this would become "John undefined Smith"
However if I did
let patientName = [patient1.firstName, patient1.middleName, patient1.lastName].join(" ");
Then this would become just "John Smith"
General_Twyckenham pointed out that a join on " " would result in an extra space between "John" and "Smith".
To get around this, you can have a filter before the join to get rid of falsy values:
[patient1.firstName, patient1.middleName, patient1.lastName].filter(el => el).join(" ");