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) 但变数只有一个
若没有使用三元运算子
会变成下图

这里提供一篇 join 方法的文章
https://aiirly.com/2019/07/js-join/
那今天的介绍就到这里
若有任何问题 或 内容有误
都可以跟我说唷