内联vs原生模板

你可能会疑惑：既然表达式内联写法更简洁（比 th:text 代码更少），为什么不从头就用这种方式？

尽管内联表达式更简单，但需要注意的是：内联表达式会原封不动的展示在静态原型页面中。这就导致你无法再将它作为原型使用。

不使用内联表达式的情况下，静态显示我们的代码片段：

<p>Hello, Sebastian!</p>

而使用了内联表达式，将展示：

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

从设计实用性角度来看，其区别是相当明显的。

内联表达式会破坏 Thymeleaf 最核心的优势：原生模板（Natural Templates）的原型友好性。

核心矛盾：简洁性 vs 原型可预览性

Thymeleaf 的核心设计理念之一是「原生模板」：模板文件本身是合法的 HTML 文件，无需经过 Thymeleaf 处理，直接在浏览器中打开就能看到接近最终效果的原型（静态预览）。而内联表达式会打破这一特性。

关键结论：选择的核心依据

写法类型	代码简洁性	静态原型友好性	适用场景
原生模板（th:text）	稍繁琐	极高（原型逼真）	需要设计师/前端静态预览模板
表达式内联	极简洁	极低（显示表达式）	纯后端渲染、无需静态预览的场景

实用建议

1. 优先使用原生模板（th:text/th:utext）：

   • 当模板需要作为「设计原型」被浏览器直接打开预览时（如团队协作中设计师调整样式、前端调试布局），必须用 th:text 保留占位符文本，保证静态预览效果；
   • 示例：产品列表、页面布局、表单等需要视觉原型的场景。

2. 谨慎使用内联表达式：

   • 仅在「无需静态预览」的场景下使用（如纯后端生成的动态文本、小工具类页面）；
   • 若必须使用内联，可结合「仅原型注释块」折中：

     <!--/*/
     <p>Hello, [[${session.user.name}]]!</p>
     /*/-->
     <!-- 静态预览时显示占位符，动态渲染时激活内联 -->
     <p>Hello, Sebastian!</p>

     （注：这种写法会增加代码量，失去内联的简洁性，因此仅特殊场景使用）。

3. 平衡原则： Thymeleaf 提供内联是为了「补充灵活性」，而非替代原生模板——原生模板的「静态可预览性」是其区别于其他模板引擎（如 FreeMarker、Velocity）的核心优势，不要为了少量代码简化而放弃这一优势。

总结

1. 内联表达式的简洁性是以「丧失原生模板的静态预览友好性」为代价的；
2. 原生模板（th:text）虽代码稍多，但能保证模板文件是可静态预览的合法 HTML，符合 Thymeleaf 的核心设计理念；
3. 选择依据：是否需要模板文件作为静态原型预览——需要则用 th:text，无需则可酌情用内联。