双引号内的单引号弄乱了javascript代码答案

【问题标题】：Single quote inside double quote is messing up javascript code双引号内的单引号弄乱了javascript代码
【发布时间】：2023-04-01 09:43:01
【问题描述】：

我正在构建一个 Django Web 应用程序，并尝试使用 Django 模板变量将 JSON 对象发送到我的 javascript 代码。

# views.py

import json

def get_autocomplete_cache():
   autocomplete_list = ["test1", "test2", "test3", "test4 - don't delete"]
   return json.dumps(autocomplete_list)

<!-- html page -->
<script>
   // Things i've tried

   autocomplete = {{ autocomplete_list|safe }};
   autocomplete = '{{ autocomplete_list|safe }}';
   autocomplete = JSON.parse('{{ autocomplete_list|safe }}');
</script>

如果我将{{ autocomplete_list|safe } 包裹在'{{ autocomplete_list|safe }}' 这样的单引号中，那么test4 - don't delete 中的单引号会混淆变量并且

Uncaught SyntaxError: Unexpected identifier.

但是，如果我将其保留为 {{ autocomplete_list|safe }}，则 HTML 文本会将其突出显示为带有红色下划线的错误。我在这里做错了什么？

【问题讨论】：

我不知道 django 或 python，但是在其他一些模板引擎/语言中 safe 不编码单引号而是编码双引号。试试autocomplete = "{{ autocomplete_list|safe }}";。
@Karl-AndréGagnon 当我这样做时，引擎认为 autocomplete_list 中的第一个双引号是我试图关闭字符串，它把一切都搞砸了。
@charlietfl 这是一些非常基本的代码，主要是为了展示数据在后端的样子以及我如何尝试在前端加载它。这个故事不仅仅是我展示的代码，但这无关紧要
@Karl-AndréGagnon 我的意思是变量最终变为"["test1", "test2", "test3", "test4 - don't delete"]" 并且双引号与字符串中的引号相互作用。

标签： javascript python jquery json django

【解决方案1】：

我已经重写了你的代码，因为我理解你的意思是在两种变体中使用它（如下所示），它对我来说很好用。也许如果您发布更详细的代码，将更容易找出问题所在。

def view_1(request):
    ...
    return render(request, 'template.html', {'autocomplete_list': ["test1", "test2", "test3", "test4 - don't delete"]})

def view_2(request):
    ...
    return render(request, 'template.html', {'autocomplete_list': json.dumps(["test1", "test2", "test3", "test4 - don't delete"])})

<script>
    var autocomplete_list = {{ autocomplete_list|safe }};
</script>

你也可以试试SafeString： https://docs.djangoproject.com/en/2.2/ref/utils/#module-django.utils.safestring

from django.utils.safestring import SafeString

def view(request):
    ...
    return render(request, 'template.html', {'autocomplete_list': SafeString(autocomplete_list)})

也许json-script 过滤器对你有用： https://docs.djangoproject.com/en/2.2/ref/templates/builtins/#json-script

用法：

{{ value|json_script:"hello-data" }}

输出：

<script id="hello-data" type="application/json">{"hello": "world"}</script>

在 JS 中访问：

var value = JSON.parse(document.getElementById('hello-data').textContent);

【讨论】：