时间戳

首页 > 解决方案 > 在外部 Javascript 文件中使用传递的变量

javascript - 在外部 Javascript 文件中使用传递的变量

问题描述

我像这样将两个变量传递给我的前端

res.render("mypage", {data: data});

使用变量中的数据，我想构建一些 HTML 元素并使用图表进行一些数据可视化。我当然可以只使用我的模板软件 (EJS) 并在 HTML 文件本身中编写大量 javascript，但这听起来并不明智。

我搜索了stackoverflow，一般的解决方案似乎是将它放入一个全局变量中，然后加载到外部js文件中以便它可以访问它，所以在我的前端我会有这个

    <head>
        <title>Cool Site</title>
        <script>
            var data = <%- data %>;
        </script>
        <script src="/fun.js"></script>
    </head>

问题是 VSCode 本身说Expression Expected的是我的<%-和%>部分，当我尝试访问我的fun.js文件中的变量时，它说Data is not defined并且还说SyntaxError: Unexpected token.

关于如何正确访问数据的任何想法？

标签： javascripthtmlnode.jsejs

解决方案

EJS 只是一种模板语言。它吐出文字。它将解释以下内容：

<script>
  var data = <%- data %>;
</script>

...有点像：

`<script>
  var data = ${data};
</script>`

那么是什么<%- data %>意思呢？这意味着获取表达式的原始值并将其输出到结果中。因为data它是一个对象，所以它很可能会调用toString它，.toString()对于一个对象来说，默认情况下是字符串[Object object]，这使得你的 JavaScript 如下，它有一个语法错误：

<script>
  var data = [Object object];
</script>

您最简单的解决方法是将您的数据序列化为JSON，这在 JavaScript 中可解释为对象文字：

<script>
  var data = <%- JSON.stringify(data) %>;
</script>

...尽管您必须小心边缘条件，例如您的数据可能包含</script>字符串的位置，在这种情况下，它会过早关闭您的脚本标签。幸运的是，有许多软件包可以提供更安全的 JSON 字符串版本，以便在 HTML 页面上输出。如果您的数据可以包含任意用户字符串，请使用更安全的字符串化库；否则你有一个脚本注入漏洞。

推荐阅读