ES6：模板字符串

前言

传统的字符串模板
在传统的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返回，否则报错。