12 内联

12.1 表达式内联

虽然标准方言允许我们通过标签属性来实现几乎所有功能，但在某些情况下，我们可能更倾向于直接将表达式写入HTML文本中。例如，我们可能更愿意这样写：

<p>Hello, [[${session.user.name}]]!</p>

而不是：

<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>

在Thymeleaf中，位于 [[...]] 或 [(...)] 之间的表达式被视为内联表达式，我们可以在其中使用任何在 th:text 或 th:utext 属性中有效的表达式。

请注意，[[...]] 对应 th:text（即结果会进行HTML转义），而 [(...)] 对应 th:utext 且不会执行任何HTML转义。因此，对于如 msg = 'This is great!' 这样的变量，给定以下片段：

<p>The message is "[(${msg})]"</p>

渲染结果<b>标签不会被转义（HTML 标签保留，正常生效）：

<p>The message is "This is <b>great!</b>"</p>

而如果是转义输出的话：

<p>The message is "[[${msg}]]"</p>

渲染结果（HTML 标签被转义，仅显示文本）：

<p>The message is "This is &lt;b&gt;great!&lt;/b&gt;"</p>

注意：文本内联在所有标签的文本内容区域默认开启，无需额外配置（标签属性内不生效，仅文本区域生效）；

核心语法与对应关系

表达式内联有两种核心格式，分别对应 th:text 和 th:utext，核心区别是是否 HTML 转义：

内联语法	对应属性	功能说明
[[${表达式}]]	th:text	结果会HTML 转义（默认，安全）
[(${表达式})]	th:utext	结果不转义（保留 HTML 标签）

基础示例：简化文本渲染

传统方式（用 th:text）：

<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>

内联方式（更简洁）：

<p>Hello, [[${session.user.name}]]!</p>

两者效果完全一致，但内联写法减少了多余的 <span> 标签，代码更直观。

重要规则

1. 默认激活：文本内联在所有标签的文本内容区域默认开启，无需额外配置（标签属性内不生效，仅文本区域生效）；
2. 表达式兼容性：内联表达式支持所有 th:text/th:utext 中合法的表达式（如变量、工具类、国际化等）：

   <!-- 内联国际化表达式 -->
   <p>[[#{welcome.msg(${session.user.name})}]]</p>
   <!-- 内联工具类表达式 -->
   <p>Today is [[${#calendars.format(today, 'yyyy-MM-dd')}]]</p>

3. 安全性：
   • [[...]] 是默认推荐用法，自动转义 HTML 特殊字符（如 </>/&），避免 XSS 攻击；
   • [(...)] 仅在确认内容可信（如后台生成的安全 HTML）时使用，否则有 XSS 风险。

适用场景

• 简单文本替换：如用户名、时间、简单提示语，用 [[...]] 简化代码；
• 富文本渲染：如后台生成的带格式的文本（加粗、换行等），用 [(...)] 保留 HTML 格式；
• 避免冗余标签：替代 th:text 包裹的 <span>/<div>，让模板更简洁。

总结

1. 表达式内联 [[...]]/[(...)] 是 th:text/th:utext 的简洁写法，直接在 HTML 文本中嵌入表达式；
2. [[...]] 会 HTML 转义（安全），[(...)] 不转义（保留 HTML 标签）；
3. 内联默认激活，支持所有合法表达式，适合简化简单文本渲染场景，减少冗余标签。