JavaScript之模板函数

本文用于记录一下js中一个比较小众的语法——模板函数

模板函数的作用：拦截模板字符串的解析过程，自定义处理逻辑。

一、标签模板

语法结构

// 标签模板 = 模板函数 + 模板字符串
模板函数`静态字符串1${表达式1}静态字符串2${表达式2}...`;

模板函数的参数规则

• 参数1: 一个包含了所有静态字符串片段（按${}分割后的纯字符串）的字符串数组
• 剩余参数：逐个接受${}中嵌入的“表达式计算结果”（按顺序传递） 示例：

function parseTemplateStr(strs, ...values){
    console.log(strs); // ["name:", ", age:", ""]
    return values; // ["lisi", 18]
}
const name = "lisi";
const age = 18;
console.log(parseTemplateStr`name: ${name}, age: ${age}`)

二、常见用途

1. 字符串格式化

// 货币格式化模板函数
function currency(strings, ...values) {
  return strings.reduce((result, str, i) => {
    // 对数值类型的表达式结果进行货币格式化（保留2位小数，加￥）
    const value = typeof values[i] === "number" 
      ? `￥${values[i].toFixed(2)}` 
      : values[i] || "";
    return result + str + value;
  }, "");
}

// 使用
const price = 99.9;
const discount = 0.8;
const finalPrice = price * discount;
const orderMsg = currency`商品单价：${price}，折扣：${discount}，实付款：${finalPrice}`;
console.log(orderMsg); 
// 输出：商品单价：￥99.90，折扣：0.8，实付款：￥79.92

2. HTML转义(防XSS攻击)

// HTML 转义工具函数
function escapeHtml(str) {
  return str
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}

// 安全 HTML 模板函数
function safeHtml(strings, ...values) {
  return strings.reduce((result, str, i) => {
    // 转义所有嵌入的表达式结果（用户输入可能含危险字符）
    const safeValue = escapeHtml(values[i] || "");
    return result + str + safeValue;
  }, "");
}

// 使用：假设 userInput 是用户输入的危险内容
const userInput = '<script>alert("XSS")</script>';
const html = safeHtml`<div>用户留言：${userInput}</div>`;
console.log(html); 
// 输出：<div>用户留言：&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;</div>
// 浏览器会解析为纯文本，避免执行脚本

三、注意事项

1. 模板字符串的原始值：模板字符串的第一个参数（string[]）有一个raw属性，存储字符串的原始未转义版本

function rawTemplate(strs) {
    console.log(strs.raw[0]);
}
rawTemplate`Hello\nWorld`; // 输出：Hello\\nWorld

2. 兼容性：ES6支持