首先看看thymeleaf官方文档里的描述，写得很清楚。
4.8 Literal substitutions
Literal substitutions allow for an easy formatting of strings containing values from variables without the need to append literals with '...' + '...'.
These substitutions must be surrounded by vertical bars (|), like:
<span th:text="|Welcome to our application, ${user.name}!|">
Which is equivalent to:
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
Literal substitutions can be combined with other types of expressions:
<span th:text="${onevar} + ' ' + |${twovar}, ${threevar}|">
Only variable/message expressions (${...}, *{...}, #{...}) are allowed inside |...| literal substitutions. No other literals ('...'), boolean/numeric tokens, conditional expressions etc. are.
现在来解析下上面的这一段，
首先，Literal substitutions就是文字替换的意思，然后上面的第一段代码实际上是等价于第二段代码的。也就是说用||包起来后不用我们自己再用+来拼接，实际上就是一个简化。
最后一段说的是||里必须包含变量，如${...}, *{...}, #{...}
不能只包括常量文字。