Django模板中直接写console.log({{ order.order_number }})会导致JavaScript语法错误，因未加引号的模板变量被当作JS标识符或数字解析；正确做法是用单引号包裹：console.log('{{ order.order_number }}')，确保字符串原样输出。

django模板中直接写`console.log({{ order.order_number }})`会导致javascript语法错误，因未加引号的模板变量被当作js标识符或数字解析；正确做法是用单引号包裹：`console.log('{{ order.order_number }}')`，确保字符串原样输出。

在Django开发中，将后端数据注入前端JavaScript时，一个看似微小却极易引发问题的细节是模板变量在JS上下文中的渲染方式。你遇到的现象——console.log({{ order.order_number }}) 输出值与页面源码中实际渲染的order_number不一致——根本原因在于：Django模板引擎会将 {{ order.order_number }} 未经转义地插入HTML/JS文本中，而浏览器JavaScript引擎会按自身语法规则解释该内容。

例如，假设生成的订单号为 '20241231152030123'（由时间戳+ID拼接而成）：

• ❌ 错误写法：console.log({{ order.order_number }})
  渲染后变为：console.log(20241231152030123)
  → JavaScript 将其识别为一个超长整数字面量（超出安全整数范围），触发精度丢失（如自动转为科学计数法或截断），导致控制台显示 20241231152030120 或类似异常值。

• ✅ 正确写法：console.log('{{ order.order_number }}')
  渲染后变为：console.log('20241231152030123')
  → 明确作为字符串字面量传递，完整保留原始字符序列，与页面源码完全一致。

此外，还需注意以下关键点：

• 永远避免裸变量插入JS上下文：除非你100%确定变量值是合法、无副作用的JS字面量（如纯数字且在 Number.MIN_SAFE_INTEGER 到 Number.MAX_SAFE_INTEGER 范围内），否则必须加引号。

  立即学习“Java免费学习笔记（深入）”；

  

  Alibabacloud Sdk Client Initialization For Java

  在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

  下载

• 推荐更健壮的方案：使用 json_script 模板标签（Django 3.1+）

  {{ order.order_number|json_script:"order-number-data" }}
  <script>
    const orderNumber = JSON.parse(document.getElementById('order-number-data').textContent);
    console.log('order number:', orderNumber);
  </script>

  它自动处理引号、转义和特殊字符（如换行、单双引号），彻底规避XSS与解析风险。

• 警惕 |safe 的误用：{{ order.order_number|safe }} 不解决JS语法问题，反而可能引入安全漏洞，切勿用于JS变量注入。

总结：模板变量进入JavaScript环境不是“复制粘贴”，而是“代码嵌入”。务必遵循JS语法规则——字符串需引号包裹，复杂数据优先走JSON序列化。一次引号的缺失，可能导致调试数小时；而一个json_script，就能让前后端数据交接既准确又安全。