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 模板:

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    //个人理解类似于递归