ES6 模板字符串 ``

参考原文链接

1. 使用JavaScript输出字符串，通常是下面这样的：

 console.log(
     "He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is all" 
  );

这样的传统做法需要使用大量的“”（双引号）和 + 来拼接才能得到我们需要的字符串。

ES6中提供了模板字符串，用 `（反引号）标识，用 ${} 将变量括起来。上面的例子可以用模板字符串写成下面这样：

  console.log(
     `He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
  );

2. 模板字符串可以引入变量，也可以不使用变量。

console.log(`今天 吃啥？`);
console.log(`炸鸡
    啤酒
    烤肉`);

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

3. 可以先定义变量，再在模板字符串中嵌入变量。

var name = "殷志源";
console.log(`${name}，擦浪嘿有~`);

4. 由于反引号是模板字符串的标识，如果我们需要在字符串中使用反引号，我们就需要对其进行转义。

console.log(`Better to light one candle \`than to curse the darkness.`);

5. 在${}中的大括号里可以放入任意的JavaScript表达式，还可以进行运算，以及引用对象属性。

var obj = {
  name: "殷志源",
  x: 1,
  y: 2,
};
console.log(`${obj.name}说 x=${++obj.x},y=${obj.x + obj.y}`);

6. 我们还可以在${}中输入一个字符串，结果仍旧会返回一个字符串：

console.log(`我们的口号是：
      ${"就要996！"}`);

7. 模板字符串还可以调用函数

function say() {
  return "Jekki Zzang！";
}
console.log(`我们的口号是：
      ${say()}`);

如果函数的结果不是字符串，那么，将按照一般的规则转化为字符串：

function say() {
  return 996;
}
console.log(`我们的口号是：
      ${say()}`);

在这里，实际上数字996被转化成了字符串996.

8. 如果${}中的变量是没有被命名的 则会报错：

console.log(`我们的口号是：
      ${say()}`);

9. 如果希望引用模板字符串本身，可以像下面这样写：

    let str="return"+"`${name}今天闹脾气了嘛`";
    let func=new Function("name",str);
    console.log(func("zzw"));

10.模板字符串还可以用于vue实例使用的template模板中

<div id="app"></div>
<script>
      var vm = new Vue({
        template: ` <div id="app">
      {{title}}
    </div>`,//template模板
        data: {
          title: "g1",
        },
      });
      vm.$mount("#app");//vue实例挂载
    </script>