如何在Pug模板的script标签中使用Node.js传递的变量

架构老林

2026-9-29

解决方法

你需要将服务端传递的`prods`变量序列化为JSON字符串后，注入到客户端JavaScript的上下文里，Pug模板默认会对输出内容做转义，所以需要用`!`语法关闭转义。

具体操作步骤

先修正现有Pug模板中的几处错误：
- 你的产品对象属性名为Types，不是Type
- 循环时的变量名拼写错误procucts应为products
- 遍历数组推荐用for...of而非for...in，后者遍历的是数组索引而非元素
在script标签中先注入服务端的prods变量
修正后的完整Pug代码如下：

下拉框部分

select(name="type" onchange="change()")#type
    option(value="Null") "Type"
    for product in prods
        option(value=product.Types) #{product.Types}

select(name="brands")#brands
     option(value="Null") "Brand"

script部分

script.
    // 注入服务端传递的prods数组，这里的!是关键，用于关闭Pug的默认转义
    const prods = !{JSON.stringify(prods)};
    function change() {
        const type = document.getElementById("type").value;
        const brandSelect = document.getElementById("brands");
        // 先清空已有品牌选项，避免重复叠加
        brandSelect.innerHTML = '<option value="Null">Brand</option>';
        
        // 遍历产品数组匹配对应分类的品牌
        for (const item of prods) {
            if (item.Types === type) {
                const brandOption = new Option(item.Brand, item.Brand);
                brandSelect.add(brandOption, undefined);
            }
        }
    }