Thymeleaf Expression Concatenation: Syntax Analysis and Common Error Solutions

Problem Background and Error Phenomenon

When using the Thymeleaf template engine for web development, expression concatenation is a common operational requirement. According to the official Thymeleaf documentation, texts (whether literals or results of variable expressions) can be concatenated using the + operator. However, developers often encounter syntax parsing errors in practical applications, especially when attempting to concatenate multiple expressions.

The erroneous example provided by the user is as follows:

<p th:text="${bean.field} + '!' + ${bean.field}">Static content</p>

This code appears logically reasonable but throws a "Could not parse as expression" exception during execution, causing template rendering to fail.

Syntax Error Analysis and Correct Approach

The core issue lies in the boundary handling of Thymeleaf expression syntax. In Thymeleaf, ${...} represents a complete expression context. When performing concatenation operations, all elements to be concatenated should be contained within the same expression context.

The problem with the erroneous code is:

• ${bean.field} + '!' + ${bean.field} is parsed as three separate expression fragments
• Thymeleaf expects each th:text attribute value to be a complete expression
• Multiple ${...} blocks disrupt the integrity of the expression

The correct syntax should be:

<p th:text="${bean.field + '!' + bean.field}">Static content</p>

This approach unifies all concatenated elements within a single ${...} expression, complying with Thymeleaf's syntax specifications.

Syntax Equivalence Verification

To further understand the syntax rules, we can verify the equivalence of the following two approaches:

th:text="'static part' + ${bean.field}"

and

th:text="${'static part' + bean.field}"

These two approaches are functionally equivalent. In the first approach, the literal 'static part' is outside the expression, but Thymeleaf automatically merges it with ${bean.field}. However, when multiple variable expressions are involved, the second approach must be used, placing all elements within the same ${...} block.

Configuration Validation and Best Practices

Although the issue primarily stems from syntax errors, ensuring correct Thymeleaf configuration is also important. The user's provided configuration is as follows:

<bean id="templateResolver" class="org.thymeleaf.templateresolver.ClassLoaderTemplateResolver">
    <property name="suffix" value=".html"/>
    <property name="templateMode" value="HTML5"/>
    <property name="characterEncoding" value="UTF-8"/>
    <property name="order" value="1"/>
</bean>

And Spring integration configuration:

@Autowired private TemplateEngine templateEngine;
String responseText = this.templateEngine.process(templateBean.getTemplateName(), templateBean.getContext());

These configurations are correct, but attention should be paid to the reference consistency of templateResolver in templateEngine. In actual projects, it is recommended to:

1. Use the latest version of Thymeleaf (the user is using version 2.0.16, which is relatively old)
2. Enable template cache debugging in development environments
3. Use IDE Thymeleaf plugins for syntax validation

Extended Application Scenarios

After understanding expression concatenation rules, they can be applied to more complex scenarios:

<!-- Mixed concatenation of multiple variables and literals -->
<p th:text="${user.firstName + ' ' + user.lastName + ' (' + user.email + ')'}">Full Name</p>

<!-- Conditional concatenation -->
<p th:text="${'Status: ' + (user.active ? 'Active' : 'Inactive')}">Status</p>

<!-- Concatenation with function call results -->
<p th:text="${'Total: $' + #numbers.formatDecimal(order.total, 1, 2)}">Order Total</p>

Common Issue Troubleshooting

If problems persist despite using correct syntax, check:

• Whether variable names are correct (case-sensitive)
• Whether variables are properly set in the context
• Whether special characters need escaping
• Whether template file encoding is UTF-8

By mastering the correct syntax for Thymeleaf expression concatenation, developers can avoid common parsing errors and write more robust, maintainable template code.