ES6模板字符串详细介绍

前言

在ES6之前，我们输出模板通常是这种方式：

$('#result').append(
  'I am ' + web.name + '</b>' +
  'I`m ' + web.year + ' years old'
);

这种方式，经常会有引号、加号多或者少的问题出现。写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题:

$('#result').append(`
  I am ${web.name} </b>
  I\`m ${web.year} years old
`);

这种写法是不是看起来更舒服？

模板字符串技巧

1、模板字符串（template string）是增强版的字符串，用反引号（`）标识。
2、模板字符串中嵌入变量，需要将变量名写在${}之中。
3、如果模板字符串需要使用反引号，则前面要用反斜杠转义。
4、如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中，如果你不想要这个空格和缩进，可以使用trim方法消除它。

$('#result').append(`
  I am ${web.name} </b>
  I\`m ${web.year} years old
`.trim());

5、大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

6、模板字符串之中能调用函数

function fn() {
  return "web秀";
}

`I am ${fn()}`
// "I am web秀"

let func = (name) => `Hello ${name}!`;
func('web秀') // "Hello web秀!"

7、模板字符串之中嵌套赋值模板

let data = [{
  id: 1,
  name: 'NO_' + 1
},{
  id: 2,
  name: 'NO_' + 2
}]
const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.id}</td></tr>
    <tr><td>${addr.name}</td></tr>
  `).join('')}
  </table>
`;
console.log(tmpl(data));
// <table>
//   <tr><td>1</td></tr>
//   <tr><td>NO_1</td></tr>
//   <tr><td>2</td></tr>
//   <tr><td>NO_2</td></tr>
// </table>

8、模板字符串中的变量必须声明，否则报错。

// 变量place没有声明
let msg = `Hello, ${name}`;
// error: VM7585:2 Uncaught ReferenceError: name is not defined