如何在Django模板中将后端传递的JSON字符串转为JavaScript可识别的JSON对象

这个问题我之前做Django项目时也踩过坑，核心原因是Django的自动HTML转义，加上JSON格式的规范要求，咱们一步步来解决：

从根源上解决问题，避免前端做额外处理，这是最稳妥的方式。

1. 后端生成标准JSON字符串 #

千万不要直接用str()把Python字典转成字符串（那样会生成单引号的非标准JSON），一定要用json.dumps()来序列化，它会生成符合JSON规范的双引号格式字符串：

import json
from django.shortcuts import render

def your_view(request):
    # 你的业务数据
    data = {'meta': {'chord_style': 'bossa'}}
    # 序列化为标准JSON字符串
    json_str = json.dumps(data)
    # 如果有中文，记得加ensure_ascii=False：json.dumps(data, ensure_ascii=False)
    return render(request, 'your_template.html', {'json_data': json_str})

2. 模板中关闭自动转义 #

Django默认会对模板变量进行HTML转义，把单引号、双引号这些特殊字符转成HTML实体（比如'转成'），所以需要告诉模板不要转义这个JSON字符串，有两种简单方式：

方式一：用safe过滤器 #

直接给模板变量加上safe过滤器，告诉Django这个内容是安全的，不需要转义：

<script>
    // 直接就能拿到JSON对象，不用额外解析
    var jsonObj = {{ json_data|safe }};
    console.log(jsonObj.meta.chord_style); // 会输出 'bossa'
</script>

方式二：用autoescape标签 #

如果有多个类似的变量需要关闭转义，可以用这个标签包裹起来：

{% autoescape off %}
<script>
    var jsonObj = {{ json_data }};
</script>
{% endautoescape %}

如果因为某些原因，前端已经接收到了带'的转义字符串，也可以在前端处理，但这只是临时办法，优先推荐上面的后端方案：

// 先解码HTML实体
function decodeHtmlEntities(str) {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = str;
    return tempDiv.textContent;
}

// 假设这是你从页面拿到的转义字符串
var escapedJsonStr = "{'meta': {'chord_style': 'bossa'}}";
// 解码后得到单引号格式的字符串
var decodedStr = decodeHtmlEntities(escapedJsonStr);
// 替换单引号为双引号，转换成标准JSON格式
var standardJsonStr = decodedStr.replace(/'/g, '"');
// 解析成JSON对象
var jsonObj = JSON.parse(standardJsonStr);

console.log(jsonObj.meta.chord_style); // 输出 'bossa'

注意 #

前端替换单引号的方式有风险，如果你的数据字符串里本身包含单引号（比如{'name': "O'Neil"}），替换后会破坏结构，所以还是优先用后端生成标准JSON+模板safe过滤的方案。

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