如何利用ES6扩展运算符实现简易模板引擎函数？

嘿，这个问题挺有意思的——虽然咱们确实没必要重复造轮子，但琢磨这类基础工具的实现思路，反而能帮咱们更吃透JS的特性！

先说说传统思路，其实它并没有你想的那么繁琐，核心就是匹配占位符并替换，不需要手动遍历整个字符串找分隔符，正则表达式就能搞定大部分场景：

function simpleTemplate(templateStr, data) {
  // 匹配 {{ 变量名 }} 格式的占位符，忽略空格
  const placeholderRegex = /{{\s*(\w+)\s*}}/g;
  // 用replace的回调函数批量替换
  return templateStr.replace(placeholderRegex, (_, key) => {
    // 找不到对应值就返回空字符串，避免显示undefined
    return data[key] || '';
  });
}

// 测试用例
const greetingTemplate = 'Hi, {{ name }}! Your favorite food is {{ food }}.';
const userData = { name: 'Charlie', food: 'pizza' };
console.log(simpleTemplate(greetingTemplate, userData));
// 输出：Hi, Charlie! Your favorite food is pizza.

至于你提到的ES6扩展运算符优化，确实能写出更优雅的实现——咱们可以利用ES6模板字符串的原生插值能力，把模板字符串转换成动态执行的函数：

function es6EnhancedTemplate(templateStr, data) {
  // 提取所有占位符的键名
  const keys = Array.from(templateStr.matchAll(/{{\s*(\w+)\s*}}/g), match => match[1]);
  // 动态生成一个函数：参数是提取的键名，返回转换后的原生模板字符串
  const templateFn = new Function(
    ...keys,
    `return \`${templateStr.replace(/{{\s*(\w+)\s*}}/g, '$${$1}')}\``
  );
  // 用扩展运算符把data中对应的值传入函数
  return templateFn(...keys.map(key => data[key] || ''));
}

// 测试用例
const todoTemplate = 'Today you need to: {{ task1 }}, {{ task2 }}.';
const todoData = { task1: 'finish the report', task2: 'call the client' };
console.log(es6EnhancedTemplate(todoTemplate, todoData));
// 输出：Today you need to: finish the report, call the client.

总结一下： #

• 完全没必要手动遍历查找分隔符，正则表达式已经能高效匹配并处理占位符；
• ES6的方案利用了语言原生的模板字符串特性，代码更简洁，可读性也更强；
• 如果只是做简易模板引擎，两种方案都能满足需求，ES6版本在灵活性和优雅度上更胜一筹。

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