在ES2015出来之前，都是使用 +号拼接HTML，在遇到换行时候，需要使用/n,转义符来转义，ES6中新增了模板字符串，使用模板字符串可以很方便的写出拼接的HTML

用法：

使用 ` （键盘数字1旁边的，波浪线）来把模板包起来；

// 用法一：纯字符串，和普通字符串一样使用。 区别：使用 `` 把字符串包起来
let str = `this is pure string`

// 用法二：带有变量,  ${} 包括变量
let params = "a";
let str2 = `this is a string include ${params}`;

// 用法三：带标签的模板字符串
let strs = console.log`hello world`;

用法三说明：带标签的模板字符串

标签就是特殊的函数，模板字符串前面添加标签，调用函数；

一、接收表达式分割的静态内容

用法： 首先先定义一个函数，然后把函数名写在模板字符串前面，调用这个函数，例1：

function fn1(string){
    console.log(string);
}

fn1`one two three`
// [ 'one two three' ]


const name = "lilei";
const age = 30;
fn1`my name is ${name}. ${age} old.`
// [ 'my name is ', '. ', ' old.' ]

上例中可以看出，标签函数接受的参数是一个由字符模板按照表达式分割的静态内容组成的数组，;

二、接收所有表达式的值

基于标签函数还可以接收到所有表达式的值

function fn2(strings,expression1,expression2,expression3){
    console.log(strings);
    console.log(expression1);
    console.log(expression2);
    console.log(expression3);
}
fn2 `one ${1+2} two ${4+5} three ${5-1}`

// 结果输出
[ 'one ', ' two ', ' three ', '' ]
3
9
4

函数的返回值为当前模板字符串的结果。

作用：

可以对模板字符串加工，可以实现类似于vue中filter的效果，例如有个变量的值为布尔值，在模板字符串中如果使用标签函数，可以将内容展示的更语义化，例如：

let sex = true;

function translate(strings,sex){
    let sexCn = sex ? "woman":"man";
    return strings[0] + sexCn;
}
let result = translate`I am a ${sex}`;
console.log(result);

// I am a woman

在上例中对于 sex 变量进行处理，当为true是显示woman，false 是显示 man。

标签函数总结

/**
 * 模板字符串标签函数，可用于加工字符串
 * 
 * @param {array} strings  一个由字符模板按照表达式分割的静态内容组成的数组
 * @param {string} arg1 第一个表达式的运算值
 * @param {string} arg2 第二个表达式的运算值
 * ...
 * @returns  当前模板字符串的值
 */
function fn(strings,arg1,arg2){
    return ...
}

• 模板字符串标签函数，可用于加工字符串
• 参数一：一个由字符模板按照表达式分割的静态内容组成的数组
• 参数二：第一个表达式的运算值
• 参数三：第一个表达式的运算值
• 返回值：当前模板字符串的值

实践拓展

模板字符串中使用 onclick 调用函数并传参

• onclick 事件必须使用双"双引号引起
• 函数参数必须使用单引号，'单引号引起（模板字符串）中只能传入字符串类型变量，不能传入对象类型变量，如果业务需求必须传入对象类型，使用原始+拼接。

const htmlSnippet = `
    <div><a onClick="fn1('${arg1}')">点击触发函数</a></div>
`