Thymeleaf中文网

深色模式

转义的元素属性 ​

为了避免模板中某些可能以其他模式处理的部分产生交互冲突（例如 HTML 模板中嵌套的文本模式内联代码），Thymeleaf 3.0 允许对其文本语法中元素的属性进行反向转义（unescaped）。具体规则如下：

  • TEXT 模板模式下的属性：会执行 HTML 反向转义（将 HTML 转义字符还原为原始字符）；
  • JAVASCRIPT 模板模式下的属性：会执行 JavaScript 反向转义；
  • CSS 模板模式下的属性：会执行 CSS 反向转义。

因此，下面这段代码在 TEXT 模式模板中是完全合法的（注意其中的 >）：

text
  [# th:if="${120<user.age}"]
     Congratulations!
  [/]

当然，在纯文本模板中使用 &lt; 本身没有实际意义，但如果我们在 HTML 模板中通过 th:inline="text" 块包含上述代码时，这么做就很有必要了——它能确保我们在静态打开模板文件作为原型时，浏览器不会把 <user.age 误认为是某个开始标签的名称（避免静态预览时的 HTML 解析错误）。

关键补充说明 ​

  1. 核心目的： 这里的「转义属性」本质是先转义、再反向转义的过程：

    • 编写模板时用 HTML 转义字符（如 &lt; 代替 <），避免浏览器静态解析 HTML 时误判标签；
    • Thymeleaf 处理文本模式代码时，会自动将 &lt; 还原为 <，保证表达式 ${120<user.age} 能正常执行。

  2. 场景举例： 若直接在 HTML 模板的 th:inline="text" 块中写 <，静态预览时浏览器会把 ${120<user.age} 中的 < 当作 HTML 标签开始，导致页面解析错乱：

    html
    <!-- 静态预览会出错：浏览器将 <user.age 识别为标签 -->
<div th:inline="text">
  [# th:if="${120<user.age}"]
     Congratulations!
  [/]
</div>

<!-- 正确写法：用 &lt; 转义，静态预览正常，动态处理时还原 -->
<div th:inline="text">
  [# th:if="${120&lt;user.age}"]
     Congratulations!
  [/]
</div>

  3. 反向转义的自动性： Thymeleaf 会根据当前模板模式自动匹配反向转义规则，无需手动配置——比如 JS 模式下会还原 \u00E1 为 á，CSS 模式下还原 \ 为空格。

总结 ​

  1. Thymeleaf 3.0 为文本语法的元素属性提供了「按模式自动反向转义」的能力，避免跨模式处理的冲突；
  2. 在 HTML 模板嵌套文本模式代码时，用 HTML 转义字符（如 &lt; 代替 <）编写表达式，既能保证静态原型预览正常，又不影响动态处理时的表达式执行；
  3. 反向转义规则与模板模式绑定（TEXT→HTML、JS→JS、CSS→CSS），是兼顾原生模板友好性的重要设计。