1.string模板字面量

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

  1. let myMultiLineString = 'first line\nsecond line';  //反斜杠表示保当前的字符
  2. let myMultiLineTemplateLiteral = `first line 
  3. second line`; 
  4. console.log(myMultiLineString); 
  5. // first line 
  6. // second line" 
  7. console.log(myMultiLineTemplateLiteral); 
  8. // first line
  9. // second line 
  10. console.log(myMultiLineString === myMultiLinetemplateLiteral); // true

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

  1. let pageHTML = `   //反引号！！
  2. <div> 
  3.  <a href="#"> 
  4.  <span>Jake</span> 
  5.  </a> 
  6. </div>`;   //反引号！！


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

  1. // 这个模板字面量在换行符之后有 25 个空格符
  2. let myTemplateLiteral = `first line 
  3.  second line`;                                                     //上面一行到这一行之间的所有空格符
  4. console.log(myTemplateLiteral.length); // 47 
  6. // 这个模板字面量以一个换行符开头
  7. let secondTemplateLiteral = ` 
  8. first line 
  9. second line`; 
  10. console.log(secondTemplateLiteral[0] === '\n'); // true 
  12. // 这个模板字面量没有意料之外的字符
  13. let thirdTemplateLiteral = `first line 
  14. second line`; 
  15. console.log(thirdTemplateLiteral); 
  16. // first line 
  17. // second line

2. 字符串插值

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

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

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

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

  1. let value = 5; 
  2. let exponent = 'second'; 
  3. // 以前，字符串插值是这样实现的：
  4. let str = value + ' to the ' + exponent + ' power is ' + (value * value); 
  6. // 现在，可以用模板字面量这样实现：
  7. let newStr =`${ value } to the ${ exponent } power is ${ value * value }`; 
  9. console.log(str); // 5 to the second power is 25 
  10. console.log(newStr); // 5 to the second power is 25

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

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

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

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

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

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

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

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

  1. let value = ''; 
  2. function append() { 
  3.  value = `${value}abc` 
  4.  console.log(value); 
  5. } 
  6. append(); // abc 
  7. append(); // abcabc 
  8. append(); // abcabcabc    //个人理解类似于递归