Thymeleaf中th:onclick绑定触发Unexpected identifier语法错误如何解决？

你的代码报错是因为引号嵌套逻辑错误：th:onclick属性外层使用单引号包裹JS代码片段，内部addBadge的第一个参数badgeListTwy直接用了未转义的单引号，导致Thymeleaf渲染后JS代码的引号提前闭合，浏览器解析时识别到非法标识符抛出错误。

推荐两种修复方式，优先选第一种适配Thymeleaf 3.0+的标准写法：

方法1：使用Thymeleaf内嵌表达式（推荐） #

Thymeleaf 3.0及以上版本支持[[${表达式}]]语法直接在JS代码中嵌入变量，会自动处理字符串转义和引号包裹，无需手动拼接转义，代码更简洁不易出错：

th:onclick="addBadge('badgeListTwy', [[${taxiway.getId()}]], [[${taxiway.getName()}]])"

方法2：手动修正转义逻辑 #

如果使用低于3.0的Thymeleaf版本，需要把JS代码里所有单引号都加反斜杠转义，包括第一个参数badgeListTwy外层的单引号：

th:onclick="'addBadge(\'badgeListTwy\', \'' + ${taxiway.getId()} + '\', \'' + ${taxiway.getName()} + '\');'"

这里用更易维护的内嵌表达式写法：

<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li  th:each="taxiway : ${taxiways}">
        <a class="dropdown-item" href="#" 
           th:onclick="addBadge('badgeListTwy', [[${taxiway.getId()}]], [[${taxiway.getName()}]])">
            <span th:text="${taxiway.getName()}"></span>
        </a>
    </li>
</ul>

修复后可以右键查看页面源码确认渲染结果，正常情况下onclick属性渲染后应为类似onclick="addBadge('badgeListTwy', '1', 'T1滑行道');"的合法JS语法。

内容的提问来源于stack exchange，提问作者V. Pantis