模板字面量：正确执行替换及标签函数参数疑问

你的这些假设完全正确！咱们来拆解一下JavaScript标签函数的参数规则：

• 当你以tagFuncsum is ${2+2}的形式调用时，strings确实是["sum is ", ""]`——模板字符串里的表达式会把整个字符串分割成若干片段，表达式前面的部分是第一个元素，表达式后面的部分（哪怕是空的）是第二个元素
• expressions数组则收集了所有表达式的计算结果，这里就是[4]
• 而且**expressions的元素数量永远比strings少1**，这个是JavaScript标签函数的固定规则：n个表达式会把模板字符串拆成n+1个片段，所以两者的长度差永远是1

实现通用的模板替换逻辑 #

通用的核心思路就是按顺序拼接字符串片段和对应的表达式结果。这里给你写一个基础的实现，你可以在此基础上扩展各种自定义逻辑：

// 通用模板拼接标签函数
const renderTemplate = function(strings, ...expressions) {
  let finalStr = '';
  // 遍历所有字符串片段
  strings.forEach((str, index) => {
    // 先拼接当前的字符串片段
    finalStr += str;
    // 如果当前索引对应的表达式存在（因为表达式数量比字符串少1）
    if (index < expressions.length) {
      finalStr += expressions[index];
    }
  });
  return finalStr;
};

// 测试用例
const example1 = renderTemplate`sum is ${2+2}`;
console.log(example1); // 输出: "sum is 4"

const example2 = renderTemplate`Hello ${'World'}, today is ${new Date().getFullYear()}年`;
console.log(example2); // 输出类似: "Hello World, today is 2024年"

扩展：带自定义处理的模板函数 #

如果需要对表达式做额外处理（比如转义HTML防止XSS），只需要在拼接前修改表达式的值即可：

// 转义HTML的标签函数
const safeTemplate = function(strings, ...expressions) {
  // 定义HTML转义函数
  const escapeHtml = (text) => {
    return text.replace(/[&<>"']/g, char => {
      const escapeChars = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
      };
      return escapeChars[char];
    });
  };

  let finalStr = '';
  strings.forEach((str, index) => {
    finalStr += str;
    if (index < expressions.length) {
      // 对表达式结果进行转义后再拼接
      finalStr += escapeHtml(expressions[index]);
    }
  });
  return finalStr;
};

// 测试XSS场景
const unsafeInput = '<script>alert("hack")</script>';
const safeOutput = safeTemplate`User input: ${unsafeInput}`;
console.log(safeOutput); // 输出: "User input: &lt;script&gt;alert(&quot;hack&quot;)&lt;/script&gt;"

内容的提问来源于stack exchange，提问作者Adelin