js {{}} 实现

理解 js {{}} 的用途

{{}} 在 JavaScript 中通常用于模板字符串或动态插值场景，常见于前端框架（如 Vue、React）或模板引擎（如 Handlebars）。以下是几种典型实现方式：

方法 1：模板字符串（ES6）

使用反引号 ` 和 ${} 实现动态插值：

const name = "World";
console.log(`Hello ${name}`); // 输出 "Hello World"

• ${} 内可嵌入变量或表达式（如 ${user.age} 或 ${1 + 2}）。

方法 2：Vue 中的双大括号

Vue 使用 {{}} 进行数据绑定：

<div id="app">
  {{ message }} <!-- 动态显示 data 中的 message 值 -->
</div>

new Vue({
  el: '#app',
  data: { message: 'Hello Vue!' }
});

• 仅适用于 Vue 模板，编译后会替换为真实数据。

方法 3：Handlebars 模板引擎

通过 {{}} 插入动态内容：

const template = Handlebars.compile("<p>{{content}}</p>");
const html = template({ content: "Handlebars example" });
// html 输出 "<p>Handlebars example</p>"

• 需引入 Handlebars 库，适用于服务端或静态页面渲染。

方法 4：自定义替换函数

手动实现类似 {{}} 的替换逻辑：

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

const output = render("Hello {{name}}", { name: "Alice" });
console.log(output); // 输出 "Hello Alice"

• 正则表达式 /\{\{(\w+)\}\}/g 匹配 {{key}}，并用 data 中的值替换。

注意事项

1. 框架限制：{{}} 的具体行为依赖框架或库（如 Vue 中为响应式绑定，Handlebars 中为模板渲染）。
2. 转义问题：直接替换时需防范 XSS 攻击，避免插入未转义的 HTML。
3. 性能：频繁的动态插值可能影响性能，建议结合虚拟 DOM 或批处理优化。

根据需求选择合适方案，纯 JavaScript 推荐模板字符串或自定义替换，框架场景使用其内置语法。