ECMAScript 6 adds the ability to define strings using template literals. Unlike using single or double quotes, template literals preserve newline characters and can define strings across lines.
let myMultiLineString = 'first line\nsecond line';
let myMultiLineTemplateLiteral = `first line
second line`;
console.log(myMultiLineString);
// first line
// second line"
console.log(myMultiLineTemplateLiteral);
// first line
Template literals are particularly useful when defining templates, such as the following HTML template:
let pageHTML = `
<div>
<a href="#">
<span>Jake</span>
</a>
</div>`;
Because template literals preserve spaces inside backticks, be careful when using them. A well-formed template string may appear to be improperly indented:
// 这个模板字面量在换行符之后有 25 个空格符 let myTemplateLiteral = `first line
second line`;
console.log(myTemplateLiteral.length); // 47 5
// 这个模板字面量以一个换行符开头
let secondTemplateLiteral = `
first line
second line`;
console.log(secondTemplateLiteral[0] === '\n'); // true
// 这个模板字面量没有意料之外的字符
let thirdTemplateLiteral = `first line second line`; console.log(thirdTemplateLiteral);
// first line
// second line
1. String interpolation:
One of the most commonly used features of template literals is their support for string interpolation, which means that one or more values can be inserted into a continuous definition.
Technically speaking, a template literal is not a string, but a special JavaScript syntax expression, but it evaluates to a string.
Template literals are evaluated and converted to string instances immediately upon definition, and any inserted variables also take their values from their closest scope.
String interpolation is achieved using a JavaScript expression in ${}:
let value = 5;
let exponent = 'second';
// 以前，字符串插值是这样实现的: let interpolatedString =
value + ' to the ' + exponent + ' power is ' + (value * value);
// 现在，可以用模板字面量这样实现: 12 let interpolatedTemplateLiteral =
`${
value } to the ${
exponent } power is ${
value * value }`;
console.log(interpolatedString); // 5 to the second power is 25 console.log(interpolatedTemplateLiteral); // 5 to the second power is 25
All inserted values are cast to strings using toString(), and any JavaScript expression can be used for interpolation.
toString() is called when converting an expression to a string:
let foo = {
toString: () => 'World' };
console.log(`Hello, ${
foo }!`); // Hello, World!
Functions and methods can be called in interpolation expressions:
function capitalize(word) {
return `${
word[0].toUpperCase() }${
word.slice(1) }`;
}
console.log(`${
capitalize('hello') }, ${
capitalize('world') }!`); // Hello, World!
Additionally, templates can insert their own previous values:
let value = '';
function append() {
value = `${
value}abc`
console.log(value);
}
append(); // abc
append(); // abcabc
append(); // abcabcabc