Flask框架下Jinja2如何正确输出JavaScript字符串变量值

问题原因 #

Jinja2渲染字符串变量时默认不会自动添加JavaScript语法要求的引号，也不会自动处理特殊字符。你当前的写法test({{s}})渲染后得到的test(Hello! Jinja~)没有对字符串做引号包裹，JavaScript会把Hello! Jinja~识别为未定义的变量，因此抛出错误。

解决方案 #

方案1：使用tojson过滤器（最推荐） #

Jinja2内置的tojson过滤器可以直接把Python类型转换为合法的JavaScript字面量，会自动处理引号包裹、特殊字符转义，还能避免XSS注入风险，完全适配变量来自数据库等不可信来源的场景。
修改后的代码如下：

<a href='#' onclick='test({{ s|tojson }})'>click me</a>

渲染后的代码会自动变为符合JS语法的格式：

<a href="#" onclick="test(&quot;Hello! Jinja~&quot;)">click me</a>

浏览器会自动解析实体编码的引号为普通双引号，点击后就能正常弹出预期内容。

方案2：手动加引号配合转义（不推荐） #

如果需要手动控制格式，也可以给变量套上引号，同时用escape过滤器处理特殊字符：

<a href='#' onclick='test("{{ s|escape }}")'>click me</a>

该方案存在缺陷：如果变量内容本身包含双引号，会打断字符串结构导致新的语法错误，因此仅适合确定变量不含引号的场景使用。

内容的提问来源于stack exchange，提问作者Shrdi