Thymeleaf中HTML id的字面量与变量拼接问题

嘿，我来帮你搞定这个Thymeleaf动态生成id的问题！你之前的几种写法都没达到预期效果，核心原因是没用到Thymeleaf官方支持的属性绑定和字符串拼接规则，下面给你梳理正确的实现方式：

正确写法1：通用字符串拼接 #

直接使用th:id属性（必须带th:前缀，Thymeleaf才会解析该属性内的表达式），用单引号包裹静态字符串部分，再拼接动态变量：

<tr th:each="image: ${images}">
  <img th:id="'idAwesomeIcon' + ${image.id}" />
</tr>

正确写法2：简洁文本替换语法 #

如果是简单的字符串拼接场景，Thymeleaf的|...|文本替换语法可以简化代码，同样要配合th:id属性使用：

<tr th:each="image: ${images}">
  <img th:id="|idAwesomeIcon${image.id}|" />
</tr>

你之前写法的问题分析 #

你之前尝试的写法都踩了同一个关键坑：使用了原生HTML的id属性而非Thymeleaf的th:id属性。默认情况下Thymeleaf不会解析原生HTML属性内的表达式，所以动态值根本没被处理。另外部分写法的语法也不符合Thymeleaf规则：

• 第一种写法里多了多余的单引号：|'idAwesomeIcon${image.id}'|，|...|内部不需要额外嵌套单引号
• 第三种写法用了类似JS的字符串拼接方式，Thymeleaf不支持这种在原生属性中的写法

用上面的正确写法，就能生成你想要的idAwesomeIcon666这类动态ID啦！

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