当前位置：首页 > JavaScript

js {{}} 实现

2026-01-31 12:24:06JavaScript

js {{}} 实现

在 JavaScript 中，双大括号 {{}} 通常用于模板字符串或某些框架（如 Vue.js）的数据绑定语法。以下是几种常见的实现方式：

模板字符串中的使用

在 ES6 的模板字符串中，${} 用于插入变量，但可以通过自定义函数模拟 {{}} 的行为：

function render(template, data) {
  return template.replace(/\{\{(.*?)\}\}/g, (match, key) => data[key.trim()]);
}

const template = 'Hello {{ name }}!';
const data = { name: 'World' };
console.log(render(template, data)); // 输出: Hello World!

Vue.js 中的双大括号

Vue.js 使用 {{}} 作为插值语法，用于绑定数据到 DOM：

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

HTML 部分：

<div id="app">
  {{ message }}
</div>

自定义数据绑定

通过 Object.defineProperty 或 Proxy 实现类似 Vue 的数据绑定：

const data = new Proxy({}, {
  set(target, key, value) {
    target[key] = value;
    document.getElementById('app').innerHTML = `Hello ${value}!`;
    return true;
  }
});

data.name = 'World'; // 页面显示: Hello World!

正则表达式替换

使用正则表达式动态替换 {{}} 中的内容：

js {{}} 实现

const template = '<div>{{content}}</div>';
const context = { content: 'Dynamic Content' };
const rendered = template.replace(/\{\{(.*?)\}\}/g, (_, key) => context[key]);
console.log(rendered); // 输出: <div>Dynamic Content</div>

以上方法可以根据具体需求选择使用，模板字符串和正则替换适用于简单场景，而 Vue.js 或自定义数据绑定适合复杂应用。

标签: js