Thymeleaf中如何转义JavaScript里的双方括号？

这个问题我之前也踩过坑！核心原因是你加了th:inline="javascript"属性，Thymeleaf会把JS代码里的[[...]]当成它的内联表达式来解析——哪怕你放在CDATA块里也没用，因为Thymeleaf处理内联JS时会自动忽略CDATA标记，照样去解析里面的[[语法。

给你几个实用的解决方案，按需选择：

方案一：移除th:inline="javascript"（最简单） #

如果这段JS代码里不需要用到Thymeleaf的变量替换（比如[[${someVariable}]]这种动态内容），直接把th:inline="javascript"删掉就行。这样Thymeleaf就不会去解析这段脚本里的内容，你的[[ 0, 'asc' ]]就能正常被Datatables识别了：

<script type="text/javascript" class="init"> 
/*<![CDATA[*/ 
$(document).ready(function() { 
    $('#myTable').DataTable({ 
        "order" : [[ 0, 'asc' ]] 
    }); 
}); 
/*]]>*/ 
</script>

方案二：拆分双方括号，避免Thymeleaf解析 #

如果必须保留th:inline="javascript"（比如要在脚本里插入Thymeleaf变量），可以把[[拆成Thymeleaf不会识别的形式，用注释占位符让Thymeleaf处理后还原成[[：

<script type="text/javascript" th:inline="javascript" class="init"> 
/*<![CDATA[*/ 
$(document).ready(function() { 
    $('#myTable').DataTable({ 
        "order" : [/*[+[]+*/[ 0, 'asc' ]] 
    }); 
}); 
/*]]>*/ 
</script>

Thymeleaf处理时会把/*[+[]+*/解析为空，最终输出的JS代码就是你想要的[[ 0, 'asc' ]]。

方案三：用变量间接定义排序规则 #

另一种更优雅的方式是先把排序数组用变量定义，避开直接写[[：

<script type="text/javascript" th:inline="javascript" class="init"> 
/*<![CDATA[*/ 
$(document).ready(function() { 
    var defaultSort = [0, 'asc'];
    $('#myTable').DataTable({ 
        "order" : [defaultSort] 
    }); 
}); 
/*]]>*/ 
</script>

这种方式不仅避免了Thymeleaf的解析冲突，代码可读性也更好。

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