> For the complete documentation index, see [llms.txt](https://jack80342.gitbook.io/thymeleaf/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jack80342.gitbook.io/thymeleaf/i.-using-thymeleaf/12-nei-lian/12.3-javascript-inlining.md).

# 12.3 JavaScript内联

JavaScript内联考虑了更好地整合`HTML`模版模式下的JavaScript `<script>`块。

与文本内联一样，这实际上等价于在`JAVASCRIPT`模版模式下处理脚本内容。因此，文本模版模式（看下一章）的所有能力也就触手可及了。但是，这一节我们将聚焦在如何使用它来将Thymeleaf表达式的输出添加到JavaScript块里。

JavaScript内联需要使用`th:inline="javascript"`显式启用：

```markup
<script th:inline="javascript">
    ...
    var username = [[${session.user.name}]];
    ...
</script>
```

这会生成：

```markup
<script th:inline="javascript">
    ...
    var username = "Sebastian \"Fruity\" Applejuice";
    ...
</script>
```

上面的代码里有两件重要的事情需要提醒一下：

首先，JavaScript内联不仅仅会输出需要的文本，而且会用引号将它括起来，并转义内容。这样，表达式的结果会以`格式良好的JavaScript字面量`输出。

其次，会这样是因为我们以`转义`的方式输出了`${session.user.name}`表达式。即使用双括号表达式：`[[${session.user.name}]]`。如果我们使用非转义的方式，例如：

```markup
<script th:inline="javascript">
    ...
    var username = [(${session.user.name})];
    ...
</script>
```

结果会是这样：

```markup
<script th:inline="javascript">
    ...
    var username = Sebastian "Fruity" Applejuice;
    ...
</script>
```

这是畸形的JavaScript代码。但是如果我们正在用追加内联表达式的方式构建部分脚本，输出非转义的东西可能正是我们需要的。所以，手边有这个工具还是很赞的。