在外部 Javascript 文件中使用傳遞的變量

Question

我像這樣將兩個變量傳遞給我的前端

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 for my <%- and %>部分，當我嘗試訪問我的fun.js文件中的變量時，它說Data is not defined並且還說SyntaxError: Unexpected token 。

關於如何正確訪問數據的任何想法？

Answer 1

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 頁面上輸出。 如果您的數據可以包含任意用戶字符串，請使用更安全的字符串化庫； 否則你就有了腳本注入漏洞。

在外部 Javascript 文件中使用傳遞的變量

問題描述

1 個解決方案

解決方案1
1 已采納 2020-03-30 21:50:58

在外部 Javascript 文件中使用傳遞的變量

問題描述

1 個解決方案

解決方案1 1 已采納 2020-03-30 21:50:58

解決方案1
1 已采納 2020-03-30 21:50:58