除了 ${}，Thymeleaf 的这些用法让你直呼内行

关注我的公众号：【编程朝花夕拾】，可获取首发内容。

01 引言

Thymeleaf 是一个用于 Web 和独立环境的现代服务器端 Java 模板引擎。它能够处理 HTML、XML、JavaScript、CSS 甚至纯文本。其核心目标是为开发工作流程带来优雅的自然模板------可以在浏览器中直接静态打开显示原型，也能通过注入动态数据作为模板正常运行，这极大地加强了前后端协作的效率。

与传统的 JSP 相比，Thymeleaf 不依赖 Servlet容器，可以与 Spring Framework 无缝集成，并且语法更简洁、更现代化，已成为 Spring Boot 官方推荐的模板引擎。

除了${}语法，其他的语法你用了么？

02 核心语法详解

Thymeleaf 的语法主要通过一系列以 th: 开头的属性（Attribute）来实现。

2.1 基础表达式

${...} 变量表达式

用于访问模型（Model）中的属性或内置对象。这是最常用的表达式。

html 复制代码

<span th:text="${user.name}"></span>

*{...} 选择表达式

在父对象（由 th:object 指定）的上下文中进行选择，简化了对同一对象多个属性的引用。

html 复制代码

<div th:object="${user}"> 
    <p th:text="*{name}"></p> 
</div>

等同于

html 复制代码

<div> 
    <p th:text="${user.name}"></p> 
</div>

#{...} 消息表达式

用于国际化（i18n），从外部消息源（如 .properties 文件）中获取文本。

html 复制代码

<span th:text="#{home.welcome}"></span>

值得注意的是：.properties文件的位置是有讲究的。

默认文件实在resources下的messages.properties。可以通过spring.messages.basename属性修改位置以及名称。否则会无法解析：

框架默认会按照地区匹配名称，如国内优先匹配xxx_zh_CN.properties，如果没有，最后会匹配xxx.properties中的信息。

① 配置国际化名称以及位置
② 添加home.properties文件
③ 定义变量
④ 消息表达式取值

@{...} 链接表达式

用于构建 URL，非常适用于链接、表单动作、静态资源引用等。它会自动进行上下文管理。

html 复制代码

<link th:href="@{/css/main.css}" rel="stylesheet" type="text/css" />
<img th:src="@{/css/main.css}" />

~{...} 片段表达式

用于包含模板片段，是实现页面布局和复用的关键。

html 复制代码

<div th:insert="~{html/part::div}"></div>

如图：part.html分别定义了一个span和div标签，而页面通过片段表达式只导入div

2.2 常用属性

th:text

替换标签体内的文本内容。它会转义 HTML 标签，确保安全。

html 复制代码

 <span th:text="'测试text<br>'"></span>

th:utext

替换标签体内的文本内容，但不会转义 HTML 标签。慎用，可能带来 XSS 风险。

html 复制代码

<span th:utext="'测试utext<br>'"></span>

th:value

设置 HTML 标签的 value 属性，常用于输入框

html 复制代码

<input type="text" th:value="${user.email}">

th:href / th:src

设置链接和资源路径。

html 复制代码

<a th:href="@{/product/{id}(id=${product.id})}">查看详情</a>
<img th:src="@{/images/logo.png}">

th:if / th:unless

条件渲染。如果条件为真（或对于 unless 为假），则显示该元素。

html 复制代码

<div th:if="${user.isAdmin}">管理员面板</div>
<p th:unless="${user.active}">该用户已被禁用</p>

th:each

循环迭代，功能类似于 Java 的 for 循环。

html 复制代码

<ul>
  <li th:each="item : ${items}" th:text="${item.name}">
      物品名称
  </li>
</ul>

th:object

配合 *{...} 使用，声明表单绑定的对象。

html 复制代码

<form th:object="${user}">
  <input type="text" th:field="*{name}">
  <input type="email" th:field="*{email}">
</form>

2.3 文本拼接与替换

文本拼接

文本拼接采用+的方式，但是写法有两种：

html 复制代码

<!-- 第一种 -->
<span th:text="${'测试，' + four}"></span>

<!-- 第二种 -->
<span th:text="'测试，' + ${four}"></span>

文本替换

文本替换使用|...|的方式，直接放在表达式里面，无需单引号。其实也算一种拼接方式。

html 复制代码

<span th:text="|测试， ${four}|"></span>

2.4 内置对象

Thymeleaf 提供了一系列内置对象，可以直接在模板中使用，主要用于访问 Web 上下文中的各种信息。

Web上下文对象

#request：访问 HttpServletRequest 信息
#session：访问 HttpSession 信息
#servletContext：访问 ServletContext 信息

html 复制代码

<!-- #request - 访问 HttpServletRequest 信息 -->
<p>请求URI: <span th:text="${#request.requestURI}"></span></p>
<p>查询参数: <span th:text="${#request.getParameter('paramName')}"></span></p>

<!-- #session - 访问 HttpSession 信息 -->
<p>会话ID: <span th:text="${#session.id}"></span></p>
<p>用户名: <span th:text="${#session.getAttribute('username')}"></span></p>
<!-- 更简洁的session访问方式 -->

<!-- #servletContext - 访问 ServletContext 信息 -->
<p>应用版本: <span th:text="${#servletContext.getAttribute('appVersion')}"></span></p>

2.5 内置工具类

内置的工具类使用时，都要加#号

官网地址：www.thymeleaf.org/documentati...

03 内联写法

为什么要单独介绍内联写法呢？因为小编之前习惯了使用JSP，所以在使用thymeleaf的时候，急需一种替代的写法。

另外作为模版引擎，只能用th:这样的标签，严重影响了其发挥。比如我要通过thymeleaf生成Java文件。那么内联写法将是最好的选择。JS里面依然无法使用th:这样的标签，内联写法也势在必行！

3.1 标准格式

[[${xx}]]或者[(${xx})]

3.2 `JS` 使用

js 复制代码

<script th:inline="javascript">
   let userId = [[${userId}]];`
   let APP_PATH = [(${#request.getContextPath()})];
</script>

3.3 纯文本

之前使用mybaits逆向工程生成数据库对应的实体和Base，采用了freemarker模版引擎。于是就考虑能不能使用thymeleaf生成呢？

下面通过一个简单的类似案例说明一下。

thymeleaf模版的后缀是可以自定义的，这里以.tf为后缀。

配置

properties 复制代码

### 配置thymeleaf
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.view-names=tf/*
spring.thymeleaf.suffix=.tf
spring.thymeleaf.cache=false

Java代码

java 复制代码

@RequestMapping("/test")
@ResponseBody
public void toHtml() {
    Map<String, Object> map = new HashMap<>();
    map.put("title", "苔");
    map.put("one", "白日不到处");
    map.put("two", "青春恰自来");
    map.put("three", "苔花如米小");
    map.put("four", "也学牡丹开");

    Context context = new Context(Locale.getDefault(), map);
    String process = templateEngine.process("tf/test", context);
    System.out.println(process);
}

测试

正常输出，要生成其他文件的话，只需要使用IO流即可完成。

04 小结

Thymeleaf 远不止是一个简单的模板引擎，它更是一套致力于提升开发体验的优雅解决方案。从其标志性的 th: 属性语法 到强大的表达式 ，从高效的表单数据绑定 到灵活的模板片段复用 ，Thymeleaf 的每一个设计都直指 Web 开发的痛点。尤其内置的工具类以及对象，可以方便的操作数据。

除了 ${}，Thymeleaf 的这些用法让你直呼内行

01 引言

02 核心语法详解

2.1 基础表达式

2.2 常用属性

2.3 文本拼接与替换

2.4 内置对象

2.5 内置工具类

03 内联写法

3.1 标准格式

3.2 JS 使用

3.3 纯文本

04 小结

3.2 `JS` 使用