如何用JavaScript实现一个简单的模板引擎

模板引擎的作用是把带有变量的模板字符串和具体数据结合，生成最终的HTML文本。用JavaScript实现一个简单版本，并不需要复杂的语法解析，借助字符串和正则表达式就能完成。

一、模板的基本形式

我们约定模板中使用双大括号来表示变量，例如 <h1>{{title}}</h1>。其中的 title 会在渲染时被真实数据替换。

二、核心实现思路

实现分为三步：

• 接收模板字符串和数据对象
• 用正则找到所有 {{key}} 形式的占位符
• 将占位符替换为数据中对应的值

三、代码实现

下面用函数封装一个最基础的渲染方法：

// 简单模板引擎函数
function render(template, data) {
  // 正则匹配 {{key}} 形式，捕获 key 部分
  return template.replace(/{{s*(w+)s*}}/g, function(match, key) {
    // 如果 data 中有该属性就替换，否则留空
    return data.hasOwnProperty(key) ? data[key] : '';
  });
}

// 使用示例
var tpl = '<div>你好，{{name}}！今天是{{day}}。</div>';
var data = { name: '小明', day: '星期一' };
var html = render(tpl, data);
console.log(html); // <div>你好，小明！今天是星期一。</div>

四、支持简单逻辑

如果希望在模板里写判断，可以把模板编译成函数。思路是用 new Function 把字符串变成可执行代码：

function compile(template) {
  // 把 {{key}} 转成拼接字符串的形式
  var code = 'var str = ''; str += '' +
    template.replace(/{{s*(w+)s*}}/g, '' + data.$1 + '') +
    ''; return str;';
  return new Function('data', code);
}

var tpl = '<p>用户名：{{user}}</p>';
var renderFn = compile(tpl);
console.log(renderFn({ user: 'admin' })); // <p>用户名：admin</p>

五、小结

上面两种方式分别适合不同场景：直接替换写法简单，适合纯展示；编译成函数性能更好，也方便扩展逻辑。理解这些原理后，你再看主流框架的模板编译过程就不会觉得神秘了。

JavaScript模板引擎正则替换修改时间：2026-07-26 15:27:17