如何在JavaScript中获取HTML中Thymeleaf渲染的值？

这问题太常见了——Thymeleaf作为模板引擎只会解析HTML文件，单独的JS文件根本不会被它处理，所以直接在外部JS里写[[${xxx}]]肯定拿不到正确值，甚至会因为解析逻辑问题得到默认的0。下面给你几个实用的解决办法：

方法1：在HTML中定义全局JS变量 #

这是最常用的方案，先在HTML页面的<script>标签里把Thymeleaf的值转成全局JS变量，之后外部JS文件直接引用这个变量就行：

<!-- 建议放在<body>底部，确保Thymeleaf已经渲染完数据 -->
<script>
    // 字符串类型记得加引号包裹，避免语法错误
    const userName = "[[${user.name}]]";
    // 数字类型可以直接赋值
    const userAge = [[${user.age}]];
    // 复杂对象（比如List、Map）要先转成JSON字符串再解析
    const userInfo = JSON.parse('[[${#jsons.stringify(user)}]]');
</script>
<!-- 再引入你的外部JS文件 -->
<script src="/js/your-custom-script.js"></script>

之后在your-custom-script.js里直接用userName、userAge这些变量就可以了。

方法2：利用HTML元素的data属性存储值 #

把Thymeleaf的值存在某个隐藏元素的data属性里，然后JS通过DOM获取元素并读取data值，不会污染全局变量：

<!-- 用隐藏的div存储数据，不影响页面显示 -->
<div id="user-data-container" 
     data-user-name="[[${user.name}]]" 
     data-user-age="[[${user.age}]]"
     style="display: none;"></div>

然后在JS里读取：

const dataContainer = document.getElementById('user-data-container');
const userName = dataContainer.dataset.userName;
const userAge = Number(dataContainer.dataset.userAge); // 转成数字类型

方法3：内联JS直接使用Thymeleaf表达式 #

如果你的JS代码量不大，没必要单独写外部文件，直接在HTML的<script>标签里写内联代码，就能直接用Thymeleaf表达式：

<script>
    function showUserInfo() {
        const name = "[[${user.name}]]";
        alert(`当前用户：${name}`);
    }
</script>
<!-- 页面按钮调用这个方法 -->
<button onclick="showUserInfo()">查看用户信息</button>

为什么你之前拿到0？ #

大概率是因为你在外部JS里读取了未被Thymeleaf正确渲染的元素值——比如你可能写了<input id="age" type="number" value="[[${user.age}]]">，但外部JS执行时Thymeleaf还没完成模板渲染，或者外部JS文件根本没被模板引擎处理，导致input的value是空值，而type="number"的输入框在JS读取空值时会自动转成0，这就是你看到的结果。

内容的提问来源于stack exchange，提问作者이기태