原文首发于微信公众号：躬行之(jzman-blog)
上篇文章中简单介绍了 Thymeleaf 模板的依赖、基本属性以及使用方式，下面将从以下几个方面介绍 Thymeleaf 中的常见语法：
字符串拼接
switch多分支
其他操作符
下文中涉及到的部分参数或者变量的具体值如下：
model.addAttribute("name" , "jzman" );
model.addAttribute("gzh" , "<b>躬行之</b>" );
model.addAttribute("user" , new User ("manu" ));
model.addAttribute("id" , "123456" );
model.addAttribute("flag" , false );
model.addAttribute("value" , 10 );
model.addAttribute("list" , mUserList);
model.addAttribute("idName" , "css" );
model.addAttribute("color" , "#FF0000" );
Thymeleaf 中常见的表达式主要有如下几种：
消息表达式：使用 #{} 获取对应属性文件中的值；
变量表达式：使用 ${} 获取变量值，这些变量的值一般由后端传入；
选择变量表达式：配合 th:object 属性，使用 *{} 来获取 th:object 指定的对象的属性值；
链接网址表达式：使用 @{} 表示链接地址，可以方便的在该链接地址上传递参数。
上述几种表达式的使用方式如下所示：
<ul th:object ="${user}" >
<li > 消息表达式：<span th:text ="#{home.title}" > Hello World!</span > </li >
<li > 变量表达式：<span th:text ="${name}" > Hello World!</span > </li >
<li > 选择变量表达式：<span th:text ="*{username}" > Hello World!</span > </li >
<li > 选择变量表达式：<span th:text ="${user.username}" > Hello World!</span > </li >
<li > 链接表达式：<a href ="default.html" th:href ="@{default.html}" > Default Page.</a > </li >
<li > 链接表达式：<a href ="default.html" th:href ="@{http://localhost:8080/{path}/i18n}" > I18n Page.</a > </li >
<li > 链接表达式：<a href ="default.html" th:href ="@{http://localhost:8080/message(id=${id})}" > Message.</a > </li >
上述代码中的 th 属性都是 Thymeleaf 对应 Html 属性定义的属性，消息表达式案例中获取了定义在 resources 下的 home.properties 文件中的 home.title 的值。
在变量表达式案例中获取了后端传入的名为 name 的变量的值。
在选择变量表达式案例中获取了 th:object 属性指定对象 user 的 username 的值，在不设置 th:object 属性的情况下，${} 和 *{} 没有任何区别可通用，使用 *{} 也可以通过对象.属性访问对象的某个属性值。
链接表达式案例中为 <a> 标签指定了链接地址，而且还可以方便的指定链接需要的参数。
看下后端是如何将变量 name 和对象 user 传入页面的，代码如下：
字符串拼接
字符串拼接一般是使用 + 进行字符串之间的拼接，也可以使用双竖线包裹字符串内容来实现走服穿的拼接，使用方式如下：
<li > <span > 使用+号: </span > <span th:text ="'My name is '+${name}+'!'" > Default</span > </li >
<li > <span > 使用| 号: </span > <span th:text ="|My name is ${name}!|" > </span > </li >
测试结果如下：
1. 使用+号: My name is jzman!
2. 使用| 号: My name is jzman!
Thymeleaf 中的条件判断语句是 th:if 和 th:unless，th:if 表示条件满足时执行，th:unless 表示条件不满足时执行，此外看一下 Thymeleaf 中常见的比较运算符如下：
gt(>)：great than(⼤于)
lt(<)：less than (⼩于)
ge(>=)：great equal(⼤于等于)
le(<=)：less equal(⼩于等于)
not(!)：not(否定)
eq(==)：equal(等于)
neq/ne(!=)：not equal(不等于)
上述比较运算符中，其对应的字符串是各个比较运算符的别名，如大于号可以使用 gt 来表示等，这样做的目的是因为 Thymeleaf 模板可以在 XML 文档中使用，而 XML 文档中的属性值是不允许使用 < 和 > 标签的，当然在这里可以自由选择哪种方式进行项目开发，使用方式如下：
<li th:if ="${value} gt 9" > <span > gt(>) </span > <span th:text ="|${value}|+'>9'" > Default</span > </li >
<li th:if ="${user} ne null" > <span > ne(!=) </span > <span th:text ="'User object is not null!'" > Default</span > </li >
<li th:if ="${value} gt 9" > <span > if </span > <span th:text ="|${value}|+'>9成立时才执行'" > Default</span > </li >
<li th:unless ="${value} gt 11" > <span > unless </span > <span th:text ="|${value}|+'>11不成立时才执行'" > Default</span > </li >
测试结果如下：
gt(>) 10 >9
ne(!=) User object is not null !
if 10 >9 成立时才执行
unless 10 >11 不成立时才执行
switch多分支
switch...case 语句也属于条件语句，th:case="*" 表示默认选择项，使用方式如下：
<li th:switch ="${name}" >
<p th:case ="jzman" > He name is jzman.</p >
<p th:case ="manu" > He name is manu.</p >
<p th:case ="*" > others</p >
测试结果如下：
这是jzman
在模板代码中使用 for 循环如下：
<li > <span > 不带索引</span >
<table >
<tr th:each ="user:${list}" >
<td th:text ="${user.userId}" > </td >
<td th:text ="${user.username}" > </td >
</table >
<li > <span > 带索引</span >
<table >
<tr th:each ="user,start:${list}" >
<td th:text ="${start.index}" > </td >
<td th:text ="${user.userId}" > </td >
<td th:text ="${user.username}" > </td >
</table >
上述代码中通过 start 可以获取循环中的一些信息如下：
index: 当前迭代对象的 index,从 0 开始计算；
count: 当前迭代对象的 index,从 1 开始计算；
size: 被迭代对象的⼤⼩；
current: 当前迭代变量；
even/odd: 布尔值，表示当前循环是否是偶数或奇数,从 0 开始计算；
first: 布尔值，当前循环是否是第⼀个；
last: 布尔值，当前循环是否是最后⼀个。
测试结果如下:
1 jzman
2 躬行之
3 Tom
0 1 jzman
1 2 躬行之
2 3 Tom
其他操作符
?: 操作符先判断前面表达式是否为 null ,如果为 null 则使用后面表达式的值，反之，则使用前面表达式的值，使用方式参考如下：
<li > <span > ?:操作符：</span > <span th:text ="${name} ?: 'default'" > Default</span > </li >
<li > <span > 三目操作符：</span > <span th:text ="${name} ne null ? ${name}:'default'" > Default</span > </li >
测试结果如下：
?:操作符：jzman
三目操作符：jzman
_ 操作符仅表示无任何操作，如下变量 test 是为 null 的，所以在执行到 _ 操作符的时候不做任何操作。<span> 标签中的值是 Default:
<li > <span > _操作符：</span > <span th:text ="${test} ?: _" > Default</span > </li >
测试结果如下：
_操作符：Default
Thymeleaf 中的支持表达式内联、JavaScript 内联、CSS 内联以及文本内联，下面介绍最常用的前三种内联方式：
表达式内联
JavaScript内联
CSS内联
表达式内联
在 [[..]] 和 [(...)] 之间的表达式在 Thymeleaf 模板中称之为内联表达式，这相当于在 HTML 标签中分别使用 th:text 和 th:utext 来设置对应的元素的文本值，其使用方式如下：
<li > <span > 表达式内联：</span > 公众号名称是[[${gzh}]]</li >
<li > <span > 表达式内联：</span > 公众号名称是[(${gzh})]</li >
两者最大的区别在于是否对文本处理，[[..]] 将不会对给定的文本进行处理，原样输出，而 [(...)] 会对带有格式的文本渲染后输出，测试结果如下：
表达式内联：公众号名称是<b>躬行之</b>
表达式内联：公众号名称是躬行之
上述第二行中的 <b> 标签中的内容 躬行之 是被加粗的，具体看文末运行效果图。
JavaScript内联
JavaScript 内联允许在 js 代码中直接使用 [[${...}]] 获取里面表达式的值，使用时需要在 <script> 模块使用 th:inline="javascript" 开启 javascript 内联支持，使用方式如下：
<script th:inline ="javascript" >
function gzhName () {
let gzh = [[${gzh}]];
console .log ("gzhName：" + gzh);
let span = document .getElementsByClassName ("jsInline" );
span[0 ].innerHTML = gzh.toString ();
</script >
<li > <span > javascript内联：</span > <button onclick ="gzhName()" > 从js获取变量值</button > <span class ="jsInline" > </span > </li >
运行程序后，点击 button 即可获取变量 gzh 的值，看下 JavaScript 的自然模板，使用注释包裹表达式，动态运行时会忽略注释前后的文件只输出表达式的值，如果是静态页面则忽略该表达式的值，使用方式参考如下：
let name = "测试" ;
console .log ("name：" + name);
此外，如果需要未转义的字符串可以使用 [(${...})] 来获取。
CSS内联
CSS 内联允许在 <style> 中直接使用 [[${...}]] 获取里面表达式的值，使用时需要在 <style> 中使用 th:inline="css" 开启 CSS 内联支持，使用方式如下：
<style th:inline ="css" >
#[[${idName}] ]{
color : #0000FF ;
</style >
<li > <span > CSS内联：</span > <span id ="css" > 测试CSS内联</span > </li >
上述代码中，后端会传入 idName 的值和 color 的值，这样就可以动态的设置 CSS 的样式了。
可关注公众号【躬行之】交流学习，回复关键字【Spring Boot】获取对应案例源码链接。
6530
卡巴拉的树
Spring
Spring Boot
4069
YuShiwen
Spring Boot
