ES6模板字符串``

`` 反引号，该符号包裹的字符串能够带来的功能如下：

可以包涵换行

在反引号以内，可以有多个换行，都能够在使用的时候被识别

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

可以嵌入变量

使用美元符号和大括号包裹变量${对象名.属性名}

模板字符串中嵌入变量，需要将变量名写在${}之中。(注：不声明会报错)
let name = 'jim',
     age = 18,
     gender = 'male';
console.log(`name : ${name} , age : ${age} , gender : ${gender}`)// name : jim , age : 18 , gender : male

可以原生输出

原生输出包含转义字符串的内容String.raw模板字符串

结果包含\\，如果``前面不加temp，则转义生效，为\
let temp = String.raw;
  let result = temp`
  <div>raw方式的div \\ </div>
  `
console.log(result)// <div>raw方式的div \\ </div>

另外

大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性，而且还能调用函数

let x = 1,
    y = 2;
console.log(`${x} + ${y * 2} = ${x + y * 2}`)//  "1 + 4 = 5"


let obj = {x: 1, y: 2};
console.log(`${obj.x + obj.y}`)//  3


function fn() {
    return "Hello World";
}
console.log(`foo ${fn()} bar`)// foo Hello World bar

模板字符串还可以嵌套

let tmpl =  `
  <table>
  ${this.contList.push(`<div>${this.obj.latitude}</div>`)}
  </table>
  `

最后看一个有趣的题目

function getPersonInfo(one, two, three) {
  console.log(one);
  console.log(two);
  console.log(three);
}
const person = "Lydia";
const age = 21;

getPersonInfo`${person} is ${age} years old`; // 打印结果为：["", "is", "years old"] Lydia 21

标签函数会接收多个参数。
第一个参数是包含了字符串字面量(即那些没有变量替换的值)的数组
后面的参数是已经替换后的变量值