JavaScript简易模板引擎通过正则匹配{{key}}占位符并用data[key]替换，支持嵌套属性安全取值、条件与循环语法模拟及HTML转义（{{}}转义、{{{}}}不转义），适合轻量场景或原理学习。

用 JavaScript 字符串操作实现简易模板引擎，核心是把模板字符串里的占位符（比如 {{name}}）替换成对应数据。不需要框架，几行 replace 或正则就能跑起来，适合轻量场景或学习原理。

基础替换：用 replace 处理单个变量

最直接的方式是把模板中形如 {{key}} 的写法，用对象属性值替换：

• 用正则 /\{\{(\w+)\}\}/g 匹配所有双大括号包裹的变量名
• 每次匹配时，从数据对象里取 data[matchedKey]，返回替换内容
• 注意加 g 标志实现全局替换，否则只换第一个

示例：

"Hello {{name}}, you are {{age}} years old".replace(/\{\{(\w+)\}\}/g, (m, key) => data[key] || '')

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

支持嵌套属性：用 eval 或安全路径解析

如果模板里写 {{user.profile.name}}，就不能只靠 \w+ 匹配了。安全做法是手写一个路径取值函数：

• 把 user.profile.name 拆成 ['user', 'profile', 'name']
• 逐层访问对象，遇到 undefined 就返回空字符串
• 避免直接用 eval 或 Function，防止执行恶意代码

小技巧： 可以用 str.split('.').reduce((obj, k) => obj?.[k], data) || '' 安全取值。

简单逻辑：支持 {{#if}} 和 {{#each}} 类语法

纯字符串替换无法处理条件和循环，但可以分两步走：

• 先用正则识别 {{#if cond}}{{/if}} 这类区块，提取条件名和内部模板
• 根据 data[cond] 真值决定是否保留内容；对 {{#each list}} 则遍历生成多份子模板再拼接
• 实际中建议用递归或栈模拟简单嵌套，避免复杂状态管理

注意： 这类扩展会让代码变重，真要支持完整语法，不如用现成库如 mustache。

防 XSS：默认转义 HTML 特殊字符

用户数据直接插入页面可能引发 XSS，模板引擎应默认做 HTML 转义：

• 定义转义函数，把 < → ，<code>& → & 等
• 约定 {{name}} 转义，{{{name}}}（三括号）不转义，方便插入已信任 HTML
• 替换时判断是双括号还是三括号，调用不同处理逻辑

提示： 转义逻辑可复用 DOMPurify.sanitize 或极简正则 str.replace(/[&"']/g, c => ({'&':'&','':'>','"':'"',"'":'''}[c]))。 不复杂但容易忽略细节