Решение проблемы с конкатенацией в Thymeleaf: причины и решение

Быстрый ответ

Чтобы выполнить конкатенацию в Thymeleaf, используйте символ + внутри выражения ${...}. Предположим, нам нужно объединить переменную firstName и строку ' Доу'. В таком случае можно сделать так:

<span th:text="${firstName + ' Доу'}">Джон Доу</span>

Таким образом можно объединять динамические данные и статический текст в атрибуте th:text.

Объединение статического и динамического содержимого

Для когда планируется объединение статического текста и динамических данных, статические части должны быть заключены в одиночные кавычки:

<h1 th:text="${'Привет, ' + user.name + '!'}">// 'user.name' выделяет на себя внимание!</h1>

Здесь 'Привет, ' и '!' являются статическими элементами, а user.name — динамическим.

Разнообразие способов конкатенации

Конкатенация через вертикальную черту (||)

Thymeleaf предоставляет оператор || с целью повышения читаемости конструкций конкатенации:

<p th:text="|Привет, ${user.firstName} ${user.lastName}!|">// Неожиданно, но Thymeleaf действительно дружелюбен!</p>

Подробнее об этом расскажет наш спикер на видео

Конкатенация в атрибутах с помощью th:attr

Для более сложного объединения в атрибутах, например, href или src, может быть использован th:attr, который помогает изящно решить задачу:

<a th:href="@{|/user/profile/${userId}|}">// Ссылка на ваш профиль теперь выглядит оживленно!</a>

Экранирование специальных символов

Не забудьте экранировать специальные символы в строках, чтобы обеспечить корректное отображение:

<a th:text="${'Кликните сюда, чтобы перейти на страницу &quot;Единорог&quot;'}">// Переход к мифам становится реальностью! 🦄</a>

Конкатенация значений из свойств файлов

Если требуется включить значения из файлов свойств, Thymeleaf делает это удобным с помощью синтаксиса #{...}:

<title th:text="#{home.title} + ' – ' + #{site.name}">Мой дом – МойСайт</title>

Осмотрительные советы по кодированию

Будьте внимательны к предупреждениям IDE

Иногда оператор конкатенации || может вызывать предупреждения IDE. В таких моментах рекомендуется использовать проверенный вариант — +.

Специфика синтаксиса

Прямое использование оператора + для соединения строк в атрибутах не даст ожидаемого результата:

<!-- Важно: не стоит так делать! -->
<img th:src="'/img/' + ${imageName} + '.png'" />

В таких случаях предпочтительно использовать th:attr или символ ||:

<!-- Изображение стоит тысячи слов -->
<img th:src="@{|/img/${imageName}.png|}" />

Быстрые советы и трюки

Не пренебрегайте документацией

Для того чтобы быть в курсе последних новостей, регулярно ознакамливайтесь с официальной документацией по Thymeleaf и следите за новостями от сообщества.

Ошибки или особенности?

Протестируйте ваш код с различными данными и убедитесь, что он соответствует стандартам Thymeleaf.

Не забывайте про сообщество

При возникновении сложных вопросов присоединяйтесь к сообществу разработчиков Thymeleaf на GitHub и делитесь своим опытом.

Визуализация

Можно представить слова в виде вагонов поезда 🚃. Переменная username — это один вагон, а статическая строка " Доу" — другой.

Соедините эти вагоны, чтобы образовалось полноценное предложение:

🚃("Джон") 🛤️+🛤️ 🚃(" Доу") = 🚂("Джон Доу")

Таким образом, в Thymeleaf выражение th:text="${username + ' Доу'}" даст нужный результат. Старайтесь создавать выражения ясно и структурировано, по аналогии со соединением вагонов поезда.

Полезные материалы

1. Учебник по Thymeleaf — полное руководство по выражениям Thymeleaf.
2. GitHub – thymeleaf/thymeleaf — официальный репозиторий Thymeleaf.
3. Тег 'thymeleaf' на Stack Overflow — источник знаний от сообщества по Thymeleaf.
4. Spring MVC и Thymeleaf: доступ к данным из шаблонов — руководство по работе с Thymeleaf и Spring.
5. Проблемы · thymeleaf/thymeleaf · GitHub — оставляйте отзывы о проблемах с Thymeleaf и участвуйте в обсуждениях.
6. Уроки Thymeleaf на YouTube — подробное объяснение использования выражений Thymeleaf.