如何在前端JavaScript中使用EJS模板传递的后端变量？

DevOps 小满

2026-5-15

解决方法与设计分析

一、如何将后端传递的`choices`变量用于前端自动补全

这其实很简单，利用EJS模板引擎的渲染能力，直接把后端的变量嵌入到前端JavaScript代码里就行。具体修改如下：

在你的EJS视图的<script>标签中，把原本硬编码的var choices = ["Robin", "Batman"];替换成EJS输出的JSON字符串：

var my_autoComplete = new autoComplete({
  selector: "#search",
  minChars: 1,
  source: function(term, suggest){
    // 直接复用后端传递的choices变量
    var choices = <%- JSON.stringify(choices) %>;
    term = term.toLowerCase();
    var suggestions = [];
    for (i=0;i<choices.length;i++) {
      if (~choices[i].toLowerCase().indexOf(term)) {
        suggestions.push(choices[i]);
      }
    }
    suggest(suggestions);
  }
});

关键细节说明：

用<%- %>而非<%= %>：JSON.stringify()会生成合法的JS对象格式，<%-会直接输出原始内容，不会转义HTML字符，避免出现"这类转义问题，确保前端JS能正常解析数组。
页面渲染时，EJS会把后端传的choices数组转换成JSON字符串嵌入到代码中，前端就能直接使用这个数组了。

二、这种方案是否属于不良页面设计？

得分场景讨论：

1. 完全可行的场景

如果你的choices数据集很小（比如示例里的2个选项，或者几十条以内的数据），这种方案完全没问题：

实现简单，不需要额外的AJAX请求，减少网络开销
页面加载完成后就能直接用自动补全，用户体验流畅

2. 需要优化的场景

如果choices数据集很大（几百上千条），或者数据需要频繁动态更新，这种静态嵌入的方式就不太合适了：

大量数据会增加HTML页面体积，拖慢首屏加载速度
数据更新时需要重新渲染整个页面，无法实时获取最新内容

这时候更优的方案是做前后端分离的API交互：

后端新增一个接口返回可选数据（支持关键词过滤更高效）：

app.get("/api/choices", function(req, res){
  const choices = ["Batman", "Robin"]; // 实际可从数据库/缓存获取
  // 可选：后端直接处理关键词过滤，减轻前端压力
  const term = req.query.term?.toLowerCase() || "";
  const filteredChoices = term ? choices.filter(item => item.toLowerCase().includes(term)) : choices;
  res.json(filteredChoices);
});

前端通过请求接口获取数据：

var my_autoComplete = new autoComplete({
  selector: "#search",
  minChars: 1,
  source: function(term, suggest){
    fetch(`/api/choices?term=${encodeURIComponent(term)}`)
      .then(res => res.json())
      .then(suggestions => suggest(suggestions))
      .catch(err => console.error("获取选项失败：", err));
  }
});

这种方式能有效缩减页面体积，还支持动态更新数据，更适合大数据或动态场景。

内容的提问来源于stack exchange，提问作者acejazz