如何在JavaScript端的Thymeleaf表达式中使用变量作为key

根因说明 #

Thymeleaf 服务端表达式的解析发生在页面渲染阶段，而你写在 JS 中的headers[i]是客户端运行时变量，服务端解析内联表达式[[#{'planner.table.header.'+headers[i]}]]时完全识别不到该变量，因此会将整个表达式内容当成普通字符串处理，自然无法得到预期的国际化值。

解决方案 #

方案1：预渲染全量国际化词条到JS全局对象（最推荐） #

服务端渲染阶段就把表头相关的所有国际化词条序列化到JS全局变量，客户端直接按需取值即可。

1. 给对应的script标签添加th:inline="javascript"属性，启用Thymeleaf JS内联
2. 注入全量词条对象：

<script th:inline="javascript">
// 服务端预注入所有planner.table.header前缀的国际化词条
const plannerTableHeaderMap = /*[[${#messages.propertiesMap('planner.table.header')}]]*/ {};
</script>

3. JS动态取值时直接调用：

const headerText = plannerTableHeaderMap[headers[i]];

方案2：封装动态国际化接口 #

如果表头词条量级极大，不适合全量预加载，可以做一个轻量的后端接口，动态传入key获取国际化值：

// 示例请求方法，可根据自身项目的请求封装调整
async function fetchI18nValue(key) {
  const response = await fetch(`/common/i18n?key=${encodeURIComponent(key)}`);
  return await response.text();
}

// 调用示例
const headerText = await fetchI18nValue(`planner.table.header.${headers[i]}`);

方案3：预生成取值工具函数 #

如果使用Thymeleaf 3及以上版本，可以通过模板语法预生成switch结构的取值函数，代码更易维护：

<script th:inline="javascript">
function getPlannerTableHeader(key) {
  switch(key) {
    /*[# th:each="entry : ${#messages.propertiesMap('planner.table.header')}"]*/
    case /*[[${entry.key}]]*/ '': return /*[[${entry.value}]]*/ '';
    /*[/]*/
    default: return key;
  }
}
</script>

调用时直接传入key即可：

const headerText = getPlannerTableHeader(headers[i]);

注意事项 #

• 所有使用Thymeleaf内联表达式的script标签必须添加th:inline="javascript"属性，否则表达式不会被服务端解析
• 不要尝试在Thymeleaf服务端表达式中拼接客户端运行时变量，二者执行阶段完全分离，无法互相识别

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