Jinja+Django外部JS模板语法报错：Uncaught SyntaxError

安全阿岳

2026-7-10

解决外部JS文件中模板语法导致的语法错误问题

问题核心原因：你的模板引擎（比如Django，从{% static %}标签可判断）只会解析HTML文件内的模板标签/变量，外部JS文件是直接被浏览器请求加载的，不会经过模板引擎处理。因此{{ dish.recipe_as_list | safe }}会被JS当成原始语法，{{属于非法字符，直接触发语法错误。

下面是两种实用的解决方法：

方案一：通过全局变量传递数据

在HTML中，外部JS引用之前，用<script>标签定义全局变量，把模板数据注入进去：

<div class="recipe">
    ...
    <script>
        // 将模板数据挂载到window全局对象
        window.recipeData = {{ dish.recipe_as_list | safe }};
    </script>
    <script src="{% static 'dishes/js/dish-details.js' %}"></script>
</div>

修改外部JS代码，直接引用这个全局变量：

constructor() {
    this.data = window.recipeData;
    ...
}

方案二：通过HTML data属性传递数据

把数据嵌入到HTML元素的data-*属性中，再在外部JS里读取解析：

修改HTML，给容器元素添加data属性：

<div class="recipe" data-recipe="{{ dish.recipe_as_list | safe }}">
    ...
    <script src="{% static 'dishes/js/dish-details.js' %}"></script>
</div>

在外部JS中读取并解析数据：

constructor() {
    // 获取目标容器元素
    const recipeContainer = document.querySelector('.recipe');
    // 读取data属性并解析为JS对象（需确保数据是合法JSON格式）
    this.data = JSON.parse(recipeContainer.dataset.recipe);
    ...
}