javascript - Thymeleaf - 取消引用内联 JavaScript 表达式的一部分

Question

我有一个 Spring Boot 项目，我需要渲染脚本元素的一部分，如下所示。 (假设 getMessage 函数在其他地方定义。)

预期输出:

<script type="text/javascript">
    /*<![CDATA[*/
    var message = 'Hello, John' + getMessage();
    alert(message);
    /*]]>*/
</script>

其中 John 是 Spring 模型属性。

是否可以在单个 Thymeleaf 表达式中生成整个 'Hello, John' + getMessage() ？或者，将 Hello, John 和 getMessage() 分配给单独的 JavaScript 变量然后将它们连接起来是唯一的方法吗？我尝试了类似以下的内容，但似乎内联 JavaScript 表达式总是被引用。

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var message = /*[[|'Hello, ${name}' + getMessage()|]]*/ 'Hello, John';
    alert(message);
    /*]]>*/
</script>

实际输出:

<script type="text/javascript">
    /*<![CDATA[*/
    var message = "'Hello, John' + getMessage()";
    alert(message);
    /*]]>*/
</script>

顺便说一下，我使用的是 Thymeleaf 2.1。

Answer 1

[[...]] 表示法用于转义内联:它将内部的所有内容转换为格式良好的 Javascript 字符串。

由于您还想调用某些内容，因此需要使用 [(...)] 表示法的非内联版本:

var message = /*[('Hello, ${name}' + getMessage())]*/ 'Hello, John';

但是请注意，这样您将不会自动获得转义字符串，因此如果 ${name} 包含单引号字符 (')，您将获取格式错误的 JavaScript 表达式。您需要以某种方式处理这个问题。

更多信息:Thymeleaf: Javascript Inlining