Spring+Thymeleaf中POJO转JSON赋值给JS变量出现转义如何解决

问题根本原因 #

Thymeleaf默认的[[ ]]内联表达式会执行HTML转义，你输出的JSON字符串里的双引号会被转义为"，直接放到JS代码里就会触发语法错误。你之前尝试的th:utext是针对普通HTML元素的文本渲染，在<script>标签内不生效，所以没有作用。

正确实现方案 #

方案1：使用Thymeleaf原生JavaScript内联（最推荐，无需手动序列化JSON） #

Thymeleaf的JavaScript内联模式支持直接将Java对象自动序列化为合法的JavaScript对象，不需要你手动写Jackson序列化逻辑：

1. 控制器中直接将需要传递的集合对象放入Model：

// 不需要自己序列化，直接放原始对象
mav.addObject("caseRegistrations", myObject.getCaseRegistrations());

2. 给script标签添加th:inline="javascript"属性，直接用[[ ]]取值即可，Thymeleaf会自动完成对象序列化：

<script type="text/javascript" th:inline="javascript">
  $(document).ready(function() {
       // 直接得到可用的JS数组/对象，不需要额外JSON.parse
       let registrations = [[${caseRegistrations}]];
       console.log(registrations);
  });
</script>

方案2：保留自定义toJSON方法的写法 #

如果你一定要自己实现JSON序列化逻辑，就使用JavaScript内联模式下的非转义语法[( )]，它会原样输出字符串不做转义：

<script type="text/javascript" th:inline="javascript">
  $(document).ready(function() {
       // [( )] 是非转义内联语法，不会处理双引号
       let registrations = JSON.parse([(${myObject.toJSON()})]);
       console.log(registrations);
  });
</script>

备选方案：通过隐藏DOM节点传递 #

如果不想用Thymeleaf的JS内联，也可以把JSON字符串放到隐藏的HTML元素中，用th:utext避免转义，再用JS读取解析：

<!-- 隐藏节点存储原始JSON -->
<div id="regJson" th:utext="${myObject.toJSON()}" style="display: none;"></div>

<script type="text/javascript">
  $(document).ready(function() {
       let registrations = JSON.parse($('#regJson').text());
       console.log(registrations);
  });
</script>

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