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

【问题标题】：Thymeleaf - Unquoting a part of inline JavaScript expressionThymeleaf - 取消引用内联 JavaScript 表达式的一部分
【发布时间】：2019-09-12 15:11:28
【问题描述】：

我有一个 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。

【问题讨论】：

标签： javascript java spring thymeleaf

【解决方案1】：

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

由于你还想调用一些东西，你需要非内联版本，使用[(...)]符号：

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

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

更多信息：Thymeleaf: Javascript Inlining

【讨论】：

谢谢。 /*[(|'Hello, ${name}' + getMessage()|)]*/（带管道）似乎是要走的路。虽然，我应该澄清一下我使用的是依赖于 Thymeleaf 2.1 的 Spring Boot 1.5，而 Thymeleaf 2.1 似乎不理解 [(...)] 表示法。
[(...)] 符号似乎是 Thmeleaf 3 的新功能。github.com/thymeleaf/thymeleaf/issues/394
@DeokkeeMin，管道是literal substitution，所以我认为你会用它替换' 字符，而不仅仅是围绕它。想想看，试试不带[()] 符号。
使用不带[[...]] 或[(...)] 的管道（即/*|...|*/）不起作用。显然 Thymeleaf 并没有把它当作一种表达方式。

【解决方案2】：

发现通过使用特殊的注释语法/*[+...+]*/，我可以取消引用thymeleaf 表达式之后的部分。

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

结果：


var message = 'Hello, John' + getMessage();

适用于 Thymeleaf 2.1。

【讨论】：