Django项目中向HTML模板JS传递变量失败，求解决方案

问题原因 #

你当前的写法会让模板渲染出这样的JS代码：

let availableKeywords = ['name1', 'name2'];

虽然看起来正常，但这是Python风格的数组表示——JS虽能兼容简单场景，但如果列表项包含特殊字符（比如单引号、换行），会直接导致JS语法错误。另外Django的自动转义机制可能会把引号转成HTML实体，进一步破坏代码结构。

正确实现方式 #

方法1：使用json_script过滤器（官方推荐） #

后端代码保持不变：

username_list = [user.username for user in User.objects.all()]
return render(response, "main/main-page.html", {"list": username_list})

模板中修改为：

{{ list|json_script:"username-list" }}
<script>
    const availableKeywords = JSON.parse(document.getElementById('username-list').textContent);
    console.log(availableKeywords);
</script>

该方法由Django官方提供，会自动处理特殊字符和转义问题，同时避免XSS风险。

方法2：手动转成JSON字符串并关闭转义 #

后端先将列表转成JSON格式：

import json

username_list = [user.username for user in User.objects.all()]
list_json = json.dumps(username_list)
return render(response, "main/main-page.html", {"list_json": list_json})

模板中使用|safe过滤器关闭自动转义：

<script>
    let availableKeywords = {{ list_json|safe }};
    console.log(availableKeywords);
</script>

注意：必须添加|safe，否则Django会把JSON里的双引号转成"，导致JS无法识别该数组。

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