ES6---标签模板

1、含义：模板字符串紧跟在函数名之后，该函数则被调用来处理这个模板字符串

alert`hello`  

// 相当于：

alert(['hello'])

2、标签模板并不是模板，而是函数调用的一种方式，其中‘标签’就是函数，紧跟函数名后面的‘模板字符串’就是函数的参数

3、标签模板中模板字符串可以含有变量

let a = 222, b = 333

function fun (stringArr, value1, value2){

    //把位于变量左右两边的字符提取出来组成数组，如果变量左右两边有一边没有字符，那么就用空字符进行表示
    console.log(stringArr)

    // 第一个变量
    console.log(value1)

    // 第2个变量，后面依次类推
    console.log(value2)
}

let str1 = fun`aaaa${a}bbbb${b}` // ['aaaa', 'bbbb', '']    222    333

let str2 = fun`${a}bbbb${b}` // ['', 'bbbb', '']    222    333

let str3 = fun`aaaa${a}${b}` // ['aaaa', '', '']    222    333

4、如果不知道标签函数入参中到底有多少个变量，那么可以使用rest函数进行表示

let a = 222, b = 333, c= 444, d = 5555

function fun (stringArr,  ...rest){

    //把位于变量左右两边的字符提取出来组成数组，如果变量左右两边有一边没有字符，那么就用空字符进行表示
    console.log(stringArr)

    // 所有变量组成的数组
    console.log(rest)
}

let str1 = fun`aaaa${a}bbbb${b}` // ['aaaa', 'bbbb', '']    [222, 333]

let str2 = fun`${a}bbbb${b}ccc${c}` // ['', 'bbbb', 'ccc', '']    [222, 333, 444]

let str3 = fun`aaaa${a}dddd${b}${c}${d}` // ['aaaa', 'dddd', '', '', '']    [222, 333, 444, 555]

5、标签模板可以用于过滤HTML字符串，防止用户的恶意输入，例如输入一些死循环的代码

6、标签模板可以用于国际化处理，即多语言的替换

let siteName = 'bob' , visitorNumber = 11
i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`   // "欢迎访问xxx，您是第xxxx位访问者！"

7、模板字符串没有条件判断和循环处理，但是通过标签函数就可以实现

===================================================================================================

扩展

1、模板字符串不能嵌入其他语言，会报错
2、标签模板中可以嵌入一些语言，但标签模板中的模板字符串里出现其他语言不能进行转译的话，会报错
3、ES8中标签模板中的模板字符串能嵌入其他语言，只是无法转译，返回undefined

就记录到这，祝大家开心！！！！！