JS字符串模板解析_自定义模板引擎-js教程-PHP中文网

JS字符串模板解析_自定义模板引擎

夢幻星辰

发布： 2025-11-16 23:42:05

原创

438人浏览过

答案：本文介绍如何实现一个轻量级自定义模板引擎，支持变量替换和简单表达式。首先使用正则匹配 {{ }} 中的占位符，结合数据对象进行替换；通过增强取值逻辑可支持嵌套属性如 {{user.name}}；进一步利用 new Function 解析三元表达式等简单逻辑；最后强调安全性问题及生产环境建议使用成熟库。

js字符串模板解析_自定义模板引擎

在前端开发中，字符串模板解析是一个常见需求。JavaScript 原生提供了模板字符串（Template Literals），但有时我们需要更灵活的自定义模板引擎，比如处理动态数据、支持条件逻辑或循环渲染等。本文将带你实现一个轻量级的自定义模板引擎，支持变量替换和简单表达式。

基本原理：模板语法与变量替换

自定义模板引擎的核心是将带有占位符的字符串与数据对象结合，生成最终文本。我们通常使用双大括号 {{ }} 作为变量标记，例如：

my name is {{name}}, I'm {{age}} years old.

当传入数据 { name: "Tom", age: 25 } 时，应输出：

my name is Tom, I'm 25 years old.

实现思路是利用正则匹配所有 {{ }} 中的内容，并用对应的数据替换。

简单模板引擎实现

下面是一个基础版本的模板解析函数：

function compile(template, data) {
  return template.replace(/\{\{([^}]+)\}\}/g, (match, key) => {
    // 去除空格并获取对应值
    const trimmedKey = key.trim();
    return data[trimmedKey] !== undefined ? data[trimmedKey] : '';
  });
}

登录后复制

使用示例：

```javascript const tpl = "Hello, {{name}}! You are {{age}} years old."; const result = compile(tpl, { name: "Alice", age: 30 }); console.log(result); // 输出: Hello, Alice! You are 30 years old. ```

这个版本支持基本变量替换。如果想支持嵌套属性（如 {{user.name}}），可以增强取值逻辑：

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

function getValue(obj, path) {
  return path.split('.').reduce((o, k) => o && o[k] !== undefined ? o[k] : '', obj);
}

function compile(template, data) {
  return template.replace(/\{\{([^}]+)\}\}/g, (match, key) => {
    const trimmedKey = key.trim();
    return getValue(data, trimmedKey);
  });
}

登录后复制

现在可以处理嵌套数据：

```javascript const tpl = "User: {{user.name}}, Email: {{user.email}}"; const result = compile(tpl, { user: { name: "Bob", email: "bob@example.com" } }); ```

扩展功能：支持简单表达式

进一步扩展，我们可以支持简单的三元表达式或运算：

```javascript function compile(template, data) { return template.replace(/\{\{([^}]+)\}\}/g, (match, expr) => { const trimmedExpr = expr.trim();

// 支持三元表达式，如 {{ age > 18 ? 'adult' : 'minor' }}
try {
  // 构造访问作用域的函数
  const fn = new Function(...Object.keys(data), `return ${trimmedExpr};`);
  return fn(...Object.values(data));
} catch (e) {
  return '';
}

登录后复制

}); }

<p>使用示例：</p>
```javascript
const tpl = "You are {{ age >= 18 ? 'an adult' : 'a minor' }}.";
const result = compile(tpl, { age: 20 }); // 输出: You are an adult.

登录后复制

注意： 使用 new Function 存在安全风险，仅建议在可信环境或可控模板中使用。