thymeleaf在js中取后台放在model中值的各种方式及区别
本文参考中 thymeleaf文档中文版
内联脚本(JavaScript inlining)
内联脚本为HTML模板模式下的的JavaScript的<script>块提供更好的集成。
和 内联文本 一样
这个模式需要使用th:inline="javascript"显式开启，即必须在<script></scipt>标签上加上：
1 <script th:inline="javascript"> 2 ... 3 4 ... 5 </script>
1、双中括号 [[ ]] 输出所需文本，结果会使用引号将其括起来并且对其文本内容中进行JS转义
1 <script th:inline="javascript"> 2 ... 3 var username = [[${session.user.name}]]; 4 ... 5 </script>
输出结果：
1 <script th:inline="javascript"> 2 ... 3 var username = "诸葛\"孔明\""; 4 ... 5 </script>
首先， 内联脚本不仅会输出所需文本，还会使用引号将其括起来并且对其内容进行JS转义，因此表达式的结果将会被输出为 格式正确的JS文本
例：用户在输入框中输入 > 今天真是一个"好"天气，这样存入数据库，再取出来放在js中时，因为会转义成一整句字符串："今天真是一个\"好\"天气"
2、中括号小括号 [( )] 输出所需文本，不会转义字符串中的内容，也不会在字符串两头加上引号
<script th:inline="javascript"> ... var arr = [(${session.user.name})]; ... </script>
输出结果：
<script th:inline="javascript"> ... var arr = 诸葛孔明; ... </script>
两端没了引号，js会报错，这种可直接使用后台传过来的转成json字符串后的对象或数组等，当然这只是举个例子，如果想使用数组或对象，后面有更好的方法
3、用多行注释 /* */ 输出文本，Thymeleaf会忽视一切注释之后和分号之前的内容，即可以看成用注释中的内容替换了后面的内容 （个人最推荐写法）
1 <script th:inline="javascript"> 2 ... 3 var username = /*[[${session.user.name}]]*/ "用户的名称"; 4 ... 5 </script>
输出结果：
1 <script th:inline="javascript"> 2 ... 3 var username = "诸葛孔明"; 4 ... 5 </script>
这里thymeleaf解析时，直接用注释里的内容把从注释到此句结束，即分号之前的所有内容替换成要取出的文本内容
个人比较推荐这种写法，因为这样，html即可以做为静态文件打开，也可以解析后由后台插入数据
例如：前端写出的页面里跳转为：
url: "./user_edit.html";
而我们替换成我们后台获取页面的绝对路径，这样写 当你静态的打开模板文件时（不通过服务器执行）它也会完美运行, 即不影响直接用浏览器打开页面跳转，也不影响后台thymeleaf解析使用
url: /* [[@{/userEdit/getPage}]] */ "./user_edit.html" ;
高级内联计算和JavaScript序列化
表达式的计算是智能且不局限于字符串的。Thymeleaf会将下列类型的对象用JavaScript语法正确输出：
- Strings
- Numbers
- Booleans
- Arrays
- Collections
- Maps
- Beans (必须有getter和setter方法)
1 <script th:inline="javascript"> 2 ... 3 var user = /*[[${session.user}]]*/ null; 4 ... 5 </script>
${session.user}确定为一个User对象，那么Thymeleaf会正确的将其转化为Javascript语法，输出结果：
1 <script th:inline="javascript"> 2 ... 3 var user = {"age":null,"firstName":"John","lastName":"Apricot", 4 "name":"John Apricot","nationality":"Antarctica"}; 5 ... 6 </script>
JavaScript的序列化是通过实现org.thymeleaf.standard.serializer.IStandardJavaScriptSerializer接口完成，可以在模板引擎使用的StandardDialect实例中配置。
JS序列化的默认实现是在classpath下寻找Jackson库，如果该库存在，则调用其方法实现。如果不存在，则会调用内置的序列化方法。这个方法覆盖了绝大多数场景的需求，并且提供相似的结果（但是灵活性较差）。
