在 JavaScript 代码中获取模板变量 - Javascript

在 web 开发中，常常需要使用模板引擎来渲染页面，而获取渲染后的数据通常也是必不可少的，本篇文章将介绍如何在 JavaScript 代码中获取模板变量。

1. 直接访问变量

如果是简单的模板引擎，也可以通过直接访问变量名来获取数据。

以下示例使用了 EJS 模板引擎，先定义了一个包含数据的对象，然后通过模板引擎渲染模板并返回结果，最后通过直接访问变量名来获取数据。

const ejs = require('ejs');

const data = { title: 'Hello World' };
const template = '<h1><%= title %></h1>';

const rendered = ejs.render(template, data);
const title = data.title;

console.log(title); // 输出: Hello World

2. 使用模板变量对象

常见的模板引擎会将变量存储在一个对象中，可以通过访问对象的属性来获取变量数据。

以下示例使用了 Handlebars 模板引擎，先定义了一个包含数据的对象，然后通过模板引擎渲染模板并返回结果，接着可以访问存储变量的对象 context 中的属性 title 来获取数据。

const Handlebars = require('handlebars');

const data = { title: 'Hello World' };
const template = '<h1>{{title}}</h1>';

const compiled = Handlebars.compile(template);
const rendered = compiled(data);
const title = rendered.context.title;

console.log(title); // 输出: Hello World

3. 使用回调函数

有些模板引擎会将渲染后的数据通过回调函数返回，可以通过提供一个回调函数来获取数据。

以下示例使用了 Nunjucks 模板引擎，先定义了一个包含数据的对象，然后通过模板引擎渲染模板并返回结果，接着传入一个回调函数来获取数据。

const nunjucks = require('nunjucks');

const data = { title: 'Hello World' };
const template = '<h1>{{ title }}</h1>';

nunjucks.renderString(template, data, function (err, rendered) {
  if (err) {
    console.error(err);
    return;
  }

  const title = rendered.context.title;
  console.log(title); // 输出: Hello World
});

总结

以上是三种获取模板变量的方式，可以根据自己的需要选择合适的方法，具体实现也需要根据使用的模板引擎进行相应的调整。