12.3 JavaScript内联

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

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

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

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

这会生成：

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

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

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

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

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

结果会是这样：

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

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