1.string模板字面量

ECMAScript 6 新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同，模板字面量 保留换行字符，可以跨行定义字符串：

let myMultiLineString = 'first line\nsecond line';  //反斜杠表示保当前的字符
let myMultiLineTemplateLiteral = `first line 
second line`; 
console.log(myMultiLineString); 
// first line 
// second line" 
console.log(myMultiLineTemplateLiteral); 
// first line
// second line 
console.log(myMultiLineString === myMultiLinetemplateLiteral); // true

顾名思义，模板字面量在定义模板时特别有用，比如下面这个 HTML 模板：

let pageHTML = `   //反引号！！
<div> 
 <a href="#"> 
 <span>Jake</span> 
 </a> 
</div>`;   //反引号！！

由于模板字面量会保持反引号内部的空格，因此在使用时要格外注意。格式正确的模板字符串看起 来可能会缩进不当：

// 这个模板字面量在换行符之后有 25 个空格符
let myTemplateLiteral = `first line 
 second line`;                                                     //上面一行到这一行之间的所有空格符
console.log(myTemplateLiteral.length); // 47 

// 这个模板字面量以一个换行符开头
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

2. 字符串插值

模板字面量最常用的一个特性是支持字符串插值，也就是可以在一个连续定义中插入一个或多个 值。技术上讲，模板字面量不是字符串，而是一种特殊的 JavaScript 句法表达式，只不过求值后得的是字符串。模板字面量在定义时立即求值并转换为字符串实例，任何插入的变量也会从它们最接近作用域中取值。

字符串插值通过在${}中使用一个 JavaScript 表达式实现：

let age =18;
console.log('袁某的年龄是${age}岁');    //袁某的年龄是18岁
console.log('袁某的年龄是'+age+'岁');     //袁某的年龄是18岁

当然${}中不止可以添加变量：

let value = 5; 
let exponent = 'second'; 
// 以前，字符串插值是这样实现的：
let str = value + ' to the ' + exponent + ' power is ' + (value * value); 

// 现在，可以用模板字面量这样实现：
let newStr =`${ value } to the ${ exponent } power is ${ value * value }`; 

console.log(str); // 5 to the second power is 25 
console.log(newStr); // 5 to the second power is 25

所有插入的值都会使用 toString()强制转型为字符串，而且任何 JavaScript 表达式都可以用于插 值

嵌套的模板字符串无需转义;

console.log(`Hello, ${ `World` }!`); // Hello, World!

将表达式转换为字符串时会调用 toString()：

let foo = { toString: () => 'World' }; 
console.log(`Hello, ${ foo }!`); // Hello, World!

在插值表达式中可以调用函数和方法：

function capitalize(word) { 
 return `${ word[0].toUpperCase() }${ word.slice(1) }`; 
} 
console.log(`${ capitalize('hello') }, ${ capitalize('world') }!`); // Hello, World!

此外，模板也可以插入自己之前的值：

let value = ''; 
function append() { 
 value = `${value}abc` 
 console.log(value); 
} 
append(); // abc 
append(); // abcabc 
append(); // abcabcabc    //个人理解类似于递归