12-字符串扩展-模板字符串

一、模板字符串

传统字符串模板：

let uls = document.getElementById("uls");
let str = '';
let a = "这是变量a";
let p="这是变量p"
str = '<li style="background-color:red">' +
            '<a href="#">'+a+'</a>' +
            '<p>'+p+'</p>' +
        '</li>'
uls.innerHTML += str;

ES6字符串模板：（格式：`${变量、逻辑判断....}`）

{
    let userName="zhansan";
    let userPwd = "admin";
    console.log(`${userName} ${userPwd}`)  //zhansan admin
}

{
    let num1 = 11;
    let num2 = 12;
    console.log(`${num1+num2}`)   //23
}

{
    let num1 = 11;
    let num2 = 12;
    console.log(`${num1 > num2 ? 'num1大':'num2大'}`)   //num2大
}

改进传统字符串模板：

{
    let uls = document.getElementById("uls");
    let str = '';
    let a = "这是一个变量a";
    let p = "这是一个变量p";
    str = `<li style="background-color:red">
                <a href="#">${a}</a>
                <p>${p}</p>
            </li>`
    uls.innerHTML += str;
}

二、标签模板

模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能。

{
    alert(678)
    alert`123`   //  ()==``
}

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。
但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。

{
    let obj = {userName:'zhangsan',userAge:18}
    function fn(a,b,c){
        console.log(a);
        console.log(b);
        console.log(c)
    }
    fn`${obj.userName}${obj.userAge}`
    //b  ==>zhansan
    //c  ==>18
    //a  ===> ["", "", "", raw: Array(3)]

    fn`admin${obj.userName}${obj.userAge}list`
    //b  ==>zhansan
    //c  ==>18
    //a  ===> ["admin", "", "list", raw: Array(3)]
}