如何将Node.js变量传递至JavaScript？EJS报错及解决方案

问题场景 #

我需要将Node.js中的数组cardNames传递到"flashcards"页面的JavaScript中，尝试通过EJS实现，服务端代码如下：

app.get("/apps/flashcards", (req, res) => {
    res.render("flashcards", { cardNames: ["card1", "card2", "card3", "card4"] });
})

在flashcards的EJS文件中，我编写了以下客户端代码，试图修改四个class为my-cards的span元素的textContent：

<script>
const cardNames = <% cardNames %>
const cards= document.querySelectorAll(".my-cards");
for (let i = 0; i < cards.length; i++) {
    cards[i].textContent = cardNames[i] + ", Score: 0";
}
</script>

运行时出现语法错误：

"Uncaught SyntaxError: Unexpected token 'const'"

需求要求：将变量从Node.js传递至内部或外部JavaScript，且逻辑需与HTML元素分离，不局限于EJS方法。

解决方案 #

方案一：修正EJS传递方式 #

通过EJS输出数组字符串后拆分，代码如下：

let cardNames = '<%= cardNames %>'
cardNames = cardNames.split(",")

方案二：使用Fetch请求 #

通过前端发起fetch请求获取后端数据，具体实现如下：

1. 服务端新增接口返回cardNames数据：

app.get("/api/card-names", (req, res) => {
    res.json({ cardNames: ["card1", "card2", "card3", "card4"] });
})

2. 前端JavaScript中调用接口并处理DOM：

async function getCardNames() {
    const response = await fetch("/api/card-names");
    const data = await response.json();
    const cards = document.querySelectorAll(".my-cards");
    data.cardNames.forEach((name, index) => {
        if (cards[index]) {
            cards[index].textContent = `${name}, Score: 0`;
        }
    });
}
getCardNames();

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