前言

传统的字符串模板
在传统的Javascript中，如果咱们对DOM进行操作，字符串模板通常采纳加号( + )进行字符串拼接。

ES6模板字符串
反引号( ` )示意一般的字符串，也能够示意多行字符串(随便换行)，同时还能够插入变量（代替传统的加号拼接）。

简介

模板字符串应用反引号 (``) 来代替一般字符串中的用双引号和单引号。
模板字符串能够蕴含特定语法（${expression}）的占位符。占位符中的表达式和四周的文本会一起传递给一个默认函数，该函数负责将所有的局部连接起来。

如果一个模板字符串由表达式结尾，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串解决后被调用，在输入最终后果前，你都能够通过该函数来对模板字符串进行操作解决。在模版字符串内应用反引号（`）时，须要在它后面加本义符（\）。

留神：模板字符串中的换行和空格会被保留，并且如果模板字符串中的变量没有申明，将报错。

后续，咱们所有实例都采纳比照传统的字符串进行演示。

根本用法

// 传统字符串拼接var str1 = "我是：";var str2 = "学生";window.alert(str1 + "一名" + str2);//我是：一名学生// ES6模板字符串拼接var str1 = "我是：";var str2 = "学生";window.alert(`${str1}一名${str2}`);//我是：一名学生

能够看到，模板字符串拼接更加简洁直观。

你也能够轻松取得多行字符串：

// 传统写法var str1 = "我是：";var str2 = "学生";console.log(str1+'\n'+str2);/*我是：学生*/// ES6模板字符串写法var str1 = "我是：";var str2 = "学生";console.log(`${str1}${str2}`);/*我是：学生*/

在新行中插入的任何字符都是模板字符串中的一部分。

如果大括号外部是一个字符串，将会原样输入：

console.log(`hello ${'ES6'} !`)// hello ES6 !

插入表达式

在一般字符串中嵌入表达式(任意表达式或对象属性等)，传统办法略显臃肿，字符串模板更优雅。

// 传统写法var n1 = 10;var n2 = 20;console.log("n1+n2="+(n1+n2));//n1+n2=30// ES6模板字符串写法var n1 = 10;var n2 = 20;console.log(`n1+n2=${n1+n2}`);//n1+n2=30

能够看到，不仅层次分明，还有较强的直观性。

模板字符串嵌套

模板字符串还能够进行嵌套应用。

const data = `    ·1·`;//     ·1·

如果须要援用模板字符串自身，在须要时执行，能够写成函数：

let data = (str) => `____${str}`;console.log(data('123'));// ____123

模板字符串调用函数

同样，模板字符串反对调用函数，${函数名}即可。

// 定义一个函数function demo(){    return `Hello ES6!`}// 调用demo()window.alert(`我要调用demo()：${demo()}`);// 我要调用demo()：Hello ES6!

带标签的模板字符串

更高级的模式的模板字符串是带标签(tag)的模板字符串。标签使您能够用函数解析模板字符串。标签函数的第一个参数蕴含一个字符串值的数组。其余的参数与表达式相干。
最初，你的函数能够返回解决好的的字符串（或者它能够返回齐全不同的货色）用于该标签的函数的名称能够被命名为任何名字。

说白了，就是通过一个默认的函数对其中的插值进行运算和连贯，加在模板字符串后面加一个标签（函数），字符串输入前会主动调用该函数进行运算解决后，而后再输入进去。就像vue、react等框架中过滤器大同小异。

// 标签函数(array,n1,n2)// array是字符串的字面量的一个数组// n1/n2：一个表达式的计算结果// 变量var name = '小李';var age = 102;// 标签函数function new_fun(strings, n1,n2) {  // 数组(不了解前面有图示)  var str0 = strings[0]; // 我是  var str1 = strings[1]; // 往年  var n1 = `*`; // *  var n2 = `|`;// |  // 最终都须要return返回(否则报错)  return str0 + n1 + str1 + n2 + `~~我是尾巴`;//程序扭转则输入扭转}// 调用标签函数(new_fun)var output = new_fun`我是 ${ name } 往年 ${ age }`;// 输入打印console.log(output); // 我是 * 往年 |~~我是尾巴

留神：最终都由return返回，否则报错。