Spring Boot Thymeleaf 在 JavaScript 代码中的使用

[[]]

在JavaScript代码中渲染变量，使用[[${var}]]，会转义特殊HTML字符。

[()]

在JavaScript代码中渲染变量，使用[(${var})]，不会转义特殊HTML字符。

注释

在Thymeleaf中使用JavaScript中的/*...*/注释，再加上Thymeleaf的特定标签，会自动渲染成变量。

同样也方便直接查看HTML而不报错，也保证IDEA等开发工具不报错。

渲染数组

对于字符串数组，只能使用循环，进行遍历组装。

<script th:inline="javascript">
    let strings = [
        /*[# th:each="str : ${strArr}"]*/
        "[(${str})]",
        /*[/]*/
    ];
</script>

条件判断

<script th:inline="javascript">
    /*[# th:if="${#lists.isEmpty(customArr)}"]*/
    console.log("empty list");
    /*[/]*/
</script>

渲染变量

这里的**"占位符"**不会被渲染，Thymeleaf会自动找到${content}替换。

<script th:inline="javascript">
    let content = /*[[${content}]]*/ "占位符";

    let arr = /*[[${arr}]]*/ [];
</script>