${}模板字面量标签函数

<script type="text/javascript">
    let a=6;
    let b=9;
    function tag(arr,...placeholders){
        console.log(arr);
        for(const hold of placeholders){
            console.log(hold);
        }
    }
    tag`${a}+${b}=${a+b}`;
       //['','+','=','']
       //6
       //9
       //15
    

    const name="刘",action="教书";
    const tag=(arr,...placeholder)=>
        arr.reduce((prev,cur,i)=>
            prev+`<span class='addColor'>${placeholder[i-1]}</span>`+cur
            );
    const result=tag`关注${name},她在${action}`    ;
    console.log(result); //关注<span class='addColor'>刘</span>,她在<span class='addColor'>教书</span>
    document.write(result);//关注刘,她在教书
</script>

模板字面量保留换行符，可以跨行定义字符串。

let pageHTML=`
<div>
    <p>aaa</p>
</div>`;

用··反引号表示模板字面量，可以在JS里面直接写HTML。使用标签函数可以简化操作.

注意1：调用方法是用反引号而不是小括号

注意2：arr是传入的字符串被${}切分开的内容，占位符是字符串${}的内容，因此arr的长度总比占位符个数多1