解锁JavaScript模板字符串的高级技巧-带标签的模板-CSDN博客

本文链接：https://blog.csdn.net/y158392613/article/details/147887144

从"字符串地狱"到优雅解法

凌晨2点，程序员小王盯着屏幕上的代码抓狂——他正在拼接一个包含动态数据和多行结构的HTML片段，满屏的+号和\n让他眼花缭乱。突然，同事老张拍了拍他：“试试模板字符串吧，还有更厉害的带标签玩法！” 这个建议，彻底改变了小王的代码人生。

基础三板斧：告别拼接时代

反引号开启新世界

用反引号（`）包裹内容，轻松解决多行字符串：

const poem = `春眠不觉晓
处处闻啼鸟
夜来风雨声`

动态插值显神通

${}包裹任意表达式，代码可读性直线上升：

const user = { name: 'Alice', age: 28 };
console.log(`用户${user.name}的年龄是${user.age * 365}天`);

嵌套模板妙用多

条件判断与模板的优雅结合：

const isVIP = true;
const message = `尊贵的${isVIP ? `VIP用户` : `访客`}, 欢迎回来！`;

高阶黑魔法：带标签的模板

初识标签函数

在模板字符串前添加函数名，即可创建标签模板：

function highlight(strings, ...values) {
  // strings: ["得分：", "，等级：", ""]
  // values: [95, "A"]
  return strings.reduce((acc, str, i) => 
    acc + str + (values[i] ? `<mark>${values[i]}</mark>` : ""), "");
}

const score = 95;
console.log(highlight`得分：${score}，等级：${"A"}`);
// 输出：得分：<mark>95</mark>，等级：<mark>A</mark>

参数解密室

标签函数接收两大核心参数：

strings：包含所有静态字符串的数组（始终比动态值多一个元素）
…values：所有动态插值的计算结果集合

带标签的模板实战演练

安全防护盾（XSS防御）

function safeHTML(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    const value = values[i] || '';
    const escaped = String(value)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;');
    return acc + str + escaped;
  }, '');
}

const userInput = '<script>alert(1)</script>';
document.body.innerHTML = safeHTML`<div>${userInput}</div>`;

国际化处理

const i18n = {
  en: { greeting: 'Hello' },
  zh: { greeting: '你好' }
};

function localize(strings, ...values) {
  const lang = navigator.language.slice(0,2);
  return strings.reduce((acc, str, i) => 
    acc + str + (i18n[lang]?.[values[i]] || values[i]), "");
}

console.log(localize`${'greeting'}，世界！`); // 根据浏览器语言输出

SQL查询构建

function query(strings, ...values) {
  return {
    sql: strings.join('?'),
    parameters: values
  };
}

const id = 123;
const result = query`SELECT * FROM users WHERE id = ${id}`;
// { sql: 'SELECT * FROM users WHERE id = ?', parameters: [123] }

样式模板引擎

function css(strings, ...values) {
  return strings.reduce((acc, str, i) => 
    acc + str + (values[i] || ''), '');
}

const primaryColor = '#2196f3';
const styles = css`
  .button {
    background: ${primaryColor};
    padding: ${10 + 5}px;
    border-radius: 4px;
  }
`;

特别能力：原始字符串

通过raw属性获取未经处理的原始内容：

function showRaw(strings) {
  console.log(strings.raw[0]);
}

showRaw`换行符：\n 制表符：\t`; 
// 输出：换行符：\n 制表符：\t

性能秘籍：缓存优化

由于strings数组在相同模板下始终恒定，可做高效缓存：

const cache = new Map();

function cachedTag(strings, ...values) {
  if (!cache.has(strings)) {
    cache.set(strings, computeExpensiveResult(strings));
  }
  return processValues(cache.get(strings), values);
}