【JS 标签模板】认识一下标签模板

今天分享一个使用标签模板来处理用户输入内容的方法：标签模板。

标签模板其实是模板字符串的一个增强，提供了模板字符串的函数能力。在函数内处理字符，可以更加方便。在日常开发中，经常会遇到处理用户输入，需要对输入进行特殊处理，一旦有恶意输入，那么对程序就有很大的隐患。下面就来看下标签模板如何处理那些有隐患的输入字符：

标签模板

1. 用法: 函数名+``
2. 代码案例

/**
 * SaferHTML 函数用于安全地拼接 HTML 字符串，防止 XSS 攻击。
 * 它接受一个模板字符串和一系列参数，将参数中的特殊字符进行转义后拼接成最终的字符串。
 * @param {TemplateStringsArray} values - 模板字符串数组
 * @param {...any} args - 要插入到模板字符串中的参数
 * @returns {string} - 安全拼接后的 HTML 字符串
 */
function SaferHTML(values,...args) {
    let str = values[0];
    for (let i = 0; i < args.length; i++) {
      let arg = String(args[i]);
  
      // 特殊字符处理.
      str += arg.replace(/&/g, "&")
              .replace(//g, ">");
  
      // 拼接字符.
      str += values[i+1];
    }
    return str;
    
}

//用法
let sender = ''; 

//函数名后面直接更模板字符，即可调用标签模板的方法
let message =
  SaferHTML`
${sender} has sent you a message.
`;

console.log(message)
//
 has sent you a message.