when I actually use it, it"s not what the documentation says.
my thymeleaf version

code calls the tostring method of the class in this way

<script>
console.log([[${games}]])
</script> 

chorme console: an error will be prompted, but the content will still be displayed, but cannot be used directly

(index): 16 Uncaught ReferenceError: Game is not defined

at (index):16

(anonymous) @ (index): 16

console.log ([Game [id=1, name=game, contents= [Content [id=1, text=h], Game [id=2, name=game, contents= [Content [id=2, text=h], Game [id=3, name=game, contents= [Content [id=3, text=h], Game [id=4, name=game, contents= [Content [id=4, text=h2], Content [id=5, text=null], Game [id=5, name=game, contents= [Content [id=6, text=h1], Content [id=7, text=h2])

add th:inline= "javascript", so that jackson is used to json the data

Code

<script th:inline="javascript">
    console.log([[${games}]])
</script> 

chorme console: content is displayed, but cannot be used directly

   console.log([{"id":1,"name":"hahagame","contents":    

[{"id": 1, "text": "h"]}, {"id": 2, "name": "game", "contents":
[{"id": 2, "text": "h"}]}, {"id": 3, "name": "game", "contents": [{"id": 3, "text": "h"]}, {"id": 4, "name": "game", "contents": "text": "h2"}, {"id": 5, "text": null}]}, {"id": 5, "name": "game", "contents": [{"id": 6, "text": "h1"}, {"id": 7, "text": "h2"}]})

(5) [{}, {}, {}, {}, {}]
0
:
{id: 1, name: "hahagame", contents: Array(1)}
1
:
{id: 2, name: "hahagame", contents: Array(1)}
2
:
{id: 3, name: "hahagame", contents: Array(1)}
3
:
{id: 4, name: "hahagame", contents: Array(2)}
4
:
{id: 5, name: "hahagame", contents: Array(2)}
length
:
5
__proto__
:
Array(0)

with double quotation marks, no error will be reported, so the tostring method of the class is called

Code

<script>
console.log("[[${games}]]")
</script> 

chorme console: content is displayed, but cannot be used directly

console.log ("[Game [id=1, name=game, contents= [Content [id=1, text=h], Game [id=2, name=game, contents= [Content [id=2, text=h], Game [id=3, name=game, contents= [Content [id=3, text=h], Game [id=4, name=game, contents= [Content [id=4, text=h2], Content [id=5, text=null], Game [id=5, name=game, contents= [Content [id=6, text=h1], Content [id=7, text=h2]")

below is my own article for reference

https://codeshelper.com/a/11.

some changes and features in Thymeleaf 3

 th:inline="text"  HTMLXML

HTML5 



    Thymeleaf 3 :HTMLXMLTEXTJAVASCRIPTCSSRAW


ThymeleafCSSJavascriptCSSJavascript;
Thymeleaf:

[-sharp th:each="item : ${items}"]
  - [-sharp th:utext="${item}" /]
[/]
var a = [-sharp th:text="${msg}"/];


:

This product is called [[${product.name}]] and it"s great!
var a = [[${msg}]];