如何在ExpressJS模板标签中渲染前端WebJS变量cat？

我尝试在ExpressJS模板标签及script标签中渲染字符串类型的客户端JS变量cat，代码如下：

<script>
function detectChange() {
    var place;
    cat = document.getElementById("catType").value; // coollink
    type = document.getElementById("appType").value;
    
    if(type == "application") {
        place = `<%= certain.categories.find(o => o.link == cat).placeholder %>`;
    } else {
        place = 'Topic description...';
    };
    document.getElementsByName('description')[1].innerHTML = place;
};
</script>

问题出在place = <%= certain.categories.find(o => o.link == cat).placeholder %>;这一行：我希望将当前值为coollink的客户端变量cat传入ExpressJS模板标签中，但会出现编译错误。若将cat替换为硬编码的'coollink'则可正常运行，但无法实现动态效果，需解决该问题。

Express模板渲染是服务器端执行的，而script里的cat是客户端浏览器运行时的变量，两者执行时机完全不同——服务器渲染页面时，客户端的cat变量还不存在，直接混用必然报错。正确的做法是把服务器端的数据提前传递到客户端，让客户端JS自行处理匹配逻辑：

1. 先将服务器端的certain.categories数据转为JSON，注入到客户端全局变量：

<script>
// 把服务器端分类数据传递到客户端
const serverCategories = <%= JSON.stringify(certain.categories) %>;
</script>

2. 修改客户端的detectChange函数，在客户端完成数据匹配：

function detectChange() {
    var place;
    const cat = document.getElementById("catType").value;
    const type = document.getElementById("appType").value;
    
    if(type === "application") {
        // 客户端直接查找匹配的分类项
        const matchedItem = serverCategories.find(o => o.link === cat);
        // 处理找不到匹配项的情况
        place = matchedItem ? matchedItem.placeholder : 'Topic description...';
    } else {
        place = 'Topic description...';
    }
    document.getElementsByName('description')[1].innerHTML = place;
};

这种方式避免了服务器端模板与客户端变量的执行冲突，同时保留了动态匹配的效果。

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