ECMAScript 6提出了一种新型的字符串文字，使用反引号作为分隔符。这些文字确实允许嵌入基本的字符串插值表达式，然后对其进行自动分析和评估。
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };
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);
如您所见，我们使用了`大约一系列字符，这些字符被解释为字符串文字，但是该形式的任何表达式都将${..}立即进行内联解析和求值。
插值字符串文字的一个非常不错的好处是允许它们拆分成多行：
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!
内插表达式
任何有效的表达式都可以出现${..}在插值字符串文字中，包括函数调用，内联函数表达式调用，甚至其他插值字符串文字！
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!
在此，`${who}s`当将who变量与"s"字符串（而不是）组合在一起时，内部插值字符串文字为我们提供了更好的便利who + "s"。同样要注意的是，插值字符串文字仅在出现时按词法作用域限定，而不以任何方式动态限定作用域：
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!"
通过减少烦恼，使用HTML的模板文字绝对可以提高可读性。
普通的旧方法：
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
使用ECMAScript 6：
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- 您的字符串可以跨越多行。
- 您不必转义引号字符。
- 您可以避免类似““>”的分组
- 您不必使用加号运算符。
标记模板文字
我们还可以标记模板字符串，当标记了模板字符串时，文字和替换将传递给函数，该函数返回结果值。
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
我们可以在此处使用传播运算符来传递多个值。第一个参数（我们称为字符串）是所有纯字符串（任何内插表达式之间的填充物）的数组。
然后，我们收集了所有后续参数为使用数组叫做值... gather/rest operator，虽然你当然可以留下他们作为以下参数就像我们上面那样的字符串（个人命名的参数value1，value2等等）。
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
收集到我们的values数组中的参数是在字符串文字中找到的已经求值的插值表达式的结果。带标记的字符串文字就像评估插值之后但在编译最终的字符串值之前的处理步骤，使您可以更好地控制从文字生成字符串。让我们看一个创建可重用模板的示例。
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属性访问这些原始字符串值，如下所示：
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
如您所见，字符串的原始版本保留转义的\n序列，而字符串的已处理版本将其视为未转义的真实换行符。ECMAScript 6带有一个内置函数，可用作字符串文字标签：String.raw(..)。它只是通过字符串的原始版本：
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"