Thymeleaf中文网

深色模式

JavaScript原生模板 ​

Thymeleaf的JS内联机制不仅能自动适配 JS 语法，还能通过「注释包裹表达式」的技巧，实现 JS 原生模板——让 <script> 代码既可以被 Thymeleaf 动态处理，又能在静态预览时（浏览器直接打开模板）作为合法 JS 正常执行，完美兼顾动态渲染和静态原型的需求。

例如：将 [[${表达式}]] 包裹在 JS 注释 /*...*/ 中，并在注释后添加静态占位符值，格式如下：

html
<script th:inline="javascript">
    ...
    // 注释包裹表达式 + 静态占位符
    var username = /*[[${session.user.name}]]*/ "Gertrud Kiwifruit";
    ...
</script>

Thymeleaf 会识别 /*[[...]]*/ 这种特殊注释格式，忽略注释后的静态占位符（也就是上面例子中的："Gertrud Kiwifruit"），仅解析并替换注释内的表达式，最终生成合法的动态 JS：

html
<script>
    ...
    var username = "Sebastian \"Fruity\" Applejuice"; // 表达式结果替换，无注释/占位符
    ...
</script>

请再仔细看一下原始的模板代码：

html
<script th:inline="javascript">
    ...
    // 注释包裹表达式 + 静态占位符
    var username = /*[[${session.user.name}]]*/ "Gertrud Kiwifruit";
    ...
</script>

请注意，这段代码本身就是有效的 JavaScript 代码。当你以静态方式（不在服务器端执行）打开模板文件时，它将能够完美地执行。

因此，我们这里所展示的，正是一种实现 JavaScript 自然模板 的方法！

关键优势 ​

写法类型动态渲染合法性静态预览合法性原型友好性
直接内联 [[${...}]]合法非法（表达式报错）差
注释包裹 /*[[...]]*/合法合法（占位符生效）极佳

重要规则 ​

  1. 注释格式要求：必须是 /*[[表达式]]*/（单行注释 //[[...]] 不支持），且注释与占位符之间无额外逻辑（仅需一个字面量值）；
  2. 兼容所有类型：支持字符串、数字、布尔、数组、对象等所有 JS 字面量类型：
    html
    <script th:inline="javascript">
    // 数组占位符
    var userRoles = /*[[${session.user.roles}]]*/ ["guest"];
    // 对象占位符
    var userInfo = /*[[${session.user.info}]]*/ {name: "Guest", age: 0};
</script>
  3. 不转义内联的兼容：/*[(...)]*/ 也支持，但静态预览时注释后的占位符仍需保证合法（慎用，易导致语法错误）。

典型使用场景 ​

  • 前端/后端协作开发：前端可直接打开模板文件调试 JS，无需启动后端服务；
  • 需静态预览的页面：如首页、用户中心等，保证静态原型的交互逻辑可正常运行；
  • 传递复杂数据：如从后端传递对象/数组到前端，兼顾动态渲染和静态预览：
    html
    <script th:inline="javascript">
    var user = /*[[${session.user}]]*/ {
        name: "Gertrud Kiwifruit",
        age: 25,
        isAdmin: false
    };
</script>

总结 ​

  1. 「注释包裹表达式 + 静态占位符」是 JS 原生模板的核心技巧，格式为 var x = /*[[${表达式}]]*/ 占位符;；
  2. 该写法让 JS 代码同时满足：Thymeleaf 动态处理时生成合法动态值，静态预览时执行占位符值；
  3. 这是 Thymeleaf JS 内联的最佳实践，兼顾了动态渲染需求和原生模板的原型友好性。