Thymeleaf模板解析与JavaScript中[[]]语法冲突报错如何解决

• 你开启了th:inline="javascript"模式，Thymeleaf会把[[内容]]识别为内置的内联表达式，用于渲染后端变量。你代码里的[[]]是空表达式结构，会被判定为非法触发解析错误，就算写在注释里Thymeleaf也会扫描解析该结构，所以注释不生效。
• 模板中混用了JSP体系的<c:forEach>JSTL标签，Thymeleaf原生不支持该标签，这部分逻辑也会报错。

第一步：修复[[]]解析错误 #

避开直接写[[]]结构，换一种方式初始化二维数组，把原代码的var dps = [[]];替换为：

var dps = [];
dps.push([]);

第二步：替换JSTL标签为Thymeleaf的内联遍历语法 #

删除原有的<c:forEach>块，替换为Thymeleaf支持的JavaScript内联遍历写法：

[# th:each="dataPoints, loop : ${dataPointsList}"]
    [# th:each="dataPoint : ${dataPoints}"]
        yValue = parseFloat([[${dataPoint.y}]]);
        label = [[${dataPoint.label}]];
        dps[parseInt([[${loop.index}]])].push({
            label : label,
            y : yValue,
        });
    [/]
[/]

完整修复后的脚本块 #

<script type="text/javascript" th:inline="javascript">
window.onload = function() {
    // 替换原[[]]初始化写法，规避Thymeleaf内联表达式识别冲突
    var dps = [];
    dps.push([]);
    var chart = new CanvasJS.Chart("chartContainer", {
        theme: "light2", // "light1", "dark1", "dark2"
        exportEnabled: true,
        animationEnabled: true,
        title: {
            text: "Monthly Expenses"
        },
        data: [{
            type: "pie",
            showInLegend: "true",
            legendText: "{label}",
            yValueFormatString: "#,###\"%\"",
            indexLabelFontSize: 16,
            indexLabel: "{label} - {y}",
            dataPoints: dps[0]
        }]
    });
    
    var yValue;
    var label;
     
    // Thymeleaf内联遍历替换原JSTL的c:forEach
    [# th:each="dataPoints, loop : ${dataPointsList}"]
        [# th:each="dataPoint : ${dataPoints}"]
            yValue = parseFloat([[${dataPoint.y}]]);
            label = [[${dataPoint.label}]];
            dps[parseInt([[${loop.index}]])].push({
                label : label,
                y : yValue,
            });
        [/]
    [/]
     
    chart.render();
}   
</script>

如果你不需要在JavaScript中使用Thymeleaf内联变量，可以直接把script标签的th:inline="javascript"属性删掉，或者修改为th:inline="none"，此时[[]]不会被Thymeleaf解析，原var dps = [[]];可以保留，但注意这种情况下你需要自行实现后端变量渲染到JS的逻辑。

内容的提问来源于stack exchange，提问作者AmineBinOthman