使用JavaScript实现一个简单的模板引擎_js工具库

答案是实现一个轻量级模板引擎，通过正则匹配{{}}中表达式并替换为数据对象对应值，支持嵌套属性访问。核心逻辑在render函数中用正则/{{(1+)}}/g查找变量，通过split('.')和reduce遍历对象层级获取值，未定义则返回空字符串。支持user.name式访问，后续可扩展if/each语法及转义防XSS，封装为TemplateEngine对象便于调用与维护。} ↩

实现一个简单的模板引擎，核心是将字符串中的占位符替换为实际的数据。我们可以利用 JavaScript 的字符串处理能力，结合正则表达式，快速构建一个轻量级的模板解析功能。

基本设计思路

模板引擎接收一个模板字符串和一个数据对象，通过匹配特定语法（如{{name}}）将变量替换成对应值。支持嵌套属性访问、条件判断和简单循环可进一步扩展功能。

实现变量替换功能

使用正则/{{\{([^}]+)\}\}/g匹配双大括号内的表达式，并从数据对象中提取对应字段：

代码示例：
function render(template, data) {
  return template.replace(/{{([^}]+)}}/g, (match, key) => {
    const value = key.trim().split('.').reduce((obj, k) => obj?.[k], data);
    return value !== undefined ? value : '';
  });
}

这个版本支持点语法访问嵌套属性，比如{{user.name}}。

立即学习“Java免费学习笔记（深入）”；

卡奥斯智能交互引擎

聚焦工业领域的AI搜索引擎工具

36

查看详情

支持简单逻辑与转义

避免 XSS 风险，可以增加 HTML 转义选项；同时允许执行简单逻辑，例如三元表达式：

可扩展正则支持：
- 使用{{#if condition}}...{{/if}}处理条件
- 使用{{#each list}}...{{/each}}遍历数组
初级版本建议先做好变量替换，再逐步添加控制结构。

封装成工具库形式

把模板功能封装进一个对象，便于管理和扩展：

const TemplateEngine = {
  render(template, data) {
    // 替换逻辑
    return template.replace(/{{([^}]+)}}/g, (match, key) => {
      const keys = key.trim().split('.');
      let value = data;
      for (const k of keys) {
        value = value?.[k];
      }
      return value ?? '';
    });
  }
};

调用方式简洁：
const html = TemplateEngine.render("你好，{{name}}", { name: "小明" });
输出：你好，小明

基本上就这些。不复杂但容易忽略细节，比如空值处理和属性路径安全访问。后续可加缓存编译结果提升性能。

以上就是使用JavaScript实现一个简单的模板引擎_js工具库的详细内容，更多请关注php中文网其它相关文章！