当前位置：首页 > JavaScript

js实现template功能

2026-02-02 13:18:39JavaScript

实现基础模板替换

使用字符串替换是最简单的方式，通过正则表达式匹配占位符并替换为实际值。以下是一个基础实现：

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

const template = 'Hello, {{name}}! Today is {{day}}.';
const data = { name: 'Alice', day: 'Monday' };
console.log(renderTemplate(template, data)); 
// 输出: "Hello, Alice! Today is Monday."

支持嵌套对象访问

扩展基础功能以支持对象嵌套访问，使用点号分隔路径：

function renderTemplate(template, data) {
  return template.replace(/\{\{([\w\.]+)\}\}/g, (match, path) => {
    return path.split('.').reduce((obj, key) => {
      return (obj && obj[key] !== undefined) ? obj[key] : '';
    }, data);
  });
}

const template = 'User: {{user.name}}, Age: {{user.age}}';
const data = { user: { name: 'Bob', age: 25 } };
console.log(renderTemplate(template, data));
// 输出: "User: Bob, Age: 25"

添加条件逻辑支持

通过自定义语法实现简单的条件判断，例如 {{#if condition}}...{{/if}}：

function renderTemplate(template, data) {
  // 处理条件块
  const ifPattern = /\{\{#if (\w+)\}\}(.*?)\{\{\/if\}\}/gs;
  template = template.replace(ifPattern, (match, condition, content) => {
    return data[condition] ? content : '';
  });

  // 处理普通替换
  return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
    return data[key] || '';
  });
}

const template = '{{#if show}}Welcome!{{/if}} {{name}}';
const data = { show: true, name: 'Charlie' };
console.log(renderTemplate(template, data));
// 输出: "Welcome! Charlie"

实现循环功能

支持数组循环渲染，使用类似 {{#each items}}...{{/each}} 的语法：

function renderTemplate(template, data) {
  // 处理循环块
  const eachPattern = /\{\{#each (\w+)\}\}(.*?)\{\{\/each\}\}/gs;
  template = template.replace(eachPattern, (match, arrayName, content) => {
    const items = data[arrayName] || [];
    return items.map(item => {
      return content.replace(/\{\{\.\}\}/g, item);
    }).join('');
  });

  // 处理普通替换
  return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
    return data[key] || '';
  });
}

const template = '{{#each fruits}}{{.}} {{/each}}';
const data = { fruits: ['Apple', 'Banana', 'Cherry'] };
console.log(renderTemplate(template, data));
// 输出: "Apple Banana Cherry "

使用Function构造函数实现动态模板

对于更复杂的场景，可以使用Function构造函数动态生成渲染函数：

function compileTemplate(template) {
  const body = "let result = '';\n" +
    template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
      return `result += ${key};\n`;
    }) +
    'return result;';

  return new Function(...Object.keys(data), body);
}

const template = '{{greeting}}, {{name}}!';
const data = { greeting: 'Hello', name: 'Dave' };
const render = compileTemplate(template);
console.log(render(data.greeting, data.name));
// 输出: "Hello, Dave!"

js实现template功能