JS 标签样板字面值 DAY76

在我们使用 标签样板字面值 可解决 XSS攻击
这里我们先来介绍简单的标签样板字面值

依据在样板字面值所定义的 "变数" 作为分段点
第一段: 你好
第二段: ，欢迎光临

function show(str,arg1){
    console.log(str,arg1);
}
const myName = '小黑';
show `你好${myName}，欢迎光临`;

虽然变数${myname}後面没有内容，但依然会算进去

function show(str,arg1){
    console.log(str,arg1);
}
const myName = '小黑';
show `你好${myName}`;

若使用多个变数，参数也要传入多个

function show(str,arg1,arg2,arg3){
    console.log(str,arg1,arg2,arg3);
}
const myName = '小黑';
show `你好${myName}，欢迎光临 ${2} ${3}`;

在不确定传入的参数有几个
可用其余参数
会将传入的参数以阵列方式呈现

function show(str,...arg){
    console.log(str,arg);
}
const myName = '小黑';
show `你好${myName}，欢迎光临 ${2} ${3}`;

这里再举一个复杂的例子

// 预期结果:  你好 <span> ${myName}</span>,欢迎光临!
const myName = '小黑';
const highlight = (strings,...arg) =>
    strings.map((str,i)=> `${str} ${arg[i] ? `<span>${arg[i]}</span>` : ''}`).join('')
const sentence = highlight `你好${myName},欢迎光临!`;
console.log(sentence);

使用三元运算子是因为
strings 有两段(索引 0 1) 但变数只有一个
若没有使用三元运算子
会变成下图