实现一个函数 template(str, data)，进行简单的模板渲染

推荐答案

function template(str, data) {
    return str.replace(/\{\{(\w+)\}\}/g, (match, key) => data[key] || '');
}

本题详细解读

题目要求

实现一个函数 template(str, data)，该函数接收一个字符串 str 和一个对象 data，并将字符串中的模板占位符 {{key}} 替换为 data 对象中对应的值。

实现思路

1. 正则表达式匹配：使用正则表达式 /\{\{(\w+)\}\}/g 来匹配字符串中的模板占位符。\{\{ 和 \}\} 分别匹配 {{ 和 }}，(\w+) 匹配中间的键名。
2. 替换逻辑：使用 str.replace 方法，将匹配到的占位符替换为 data 对象中对应的值。如果 data 对象中没有对应的键，则替换为空字符串。

代码解析

• str.replace(/\{\{(\w+)\}\}/g, (match, key) => data[key] || '')：
  • /\{\{(\w+)\}\}/g：正则表达式，匹配所有 {{key}} 形式的占位符。
  • (match, key)：match 是匹配到的完整字符串（如 {{name}}），key 是捕获组中的键名（如 name）。
  • data[key] || ''：从 data 对象中获取 key 对应的值，如果不存在则返回空字符串。

示例

const str = "Hello, {{name}}! Welcome to {{place}}.";
const data = { name: "Alice", place: "Wonderland" };
console.log(template(str, data)); // 输出: "Hello, Alice! Welcome to Wonderland."

注意事项

• 该实现假设 data 对象中的键名与模板中的占位符完全匹配。
• 如果 data 对象中缺少某个键，对应的占位符将被替换为空字符串。
• 该实现不支持嵌套对象或复杂表达式的模板渲染。