Django渲染异常：console.log与页面源订单号不一致

当订单号是纯数字组成的字符串时，Django模板直接输出后会被JavaScript当作数值类型解析。而JavaScript的Number类型是双精度浮点数，无法精确表示超过2^53的整数，会导致数字部分出现精度丢失，这就是控制台显示的id部分和页面源码不一致的核心原因。

模板中的{{ order.order_number }}未被当作字符串传递给JS，直接输出成了数值，触发了JS的精度丢失问题。

方法1：用引号包裹订单号 #

在模板里把订单号用单引号或双引号包裹，强制JS将其识别为字符串：

<script>
    console.log('order number 0: ', '{{ order.order_number }}')
</script>

方法2：使用json_script过滤器（更安全） #

借助Django模板的json_script过滤器，安全地将数据传递给JS：

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

额外修复视图潜在问题 #

原视图中如果form.is_valid()不通过，datas变量会未定义，导致后续datas.order_number报错。建议把订单查询逻辑移到表单验证通过的分支内，同时处理验证失败的情况：

if request.method == "POST": 
    form = OrderForm(request.POST)
    if form.is_valid():
        datas = Order()
        datas.user = current_user
        datas.save()

        current_datetime = datetime.datetime.now().strftime('%Y%H%S%m%M%d')
        order_number = current_datetime + str(datas.id)
        datas.order_number = order_number 
        datas.save()

        # 将订单查询移到验证通过的分支内，避免报错
        order = Order.objects.get(user=current_user, is_ordered=False, order_number=datas.order_number)
        context['order'] = order
    else:
        # 这里可以添加表单验证失败的处理逻辑，比如返回错误提示
        pass
    context['user'] = request.user
    return render(request, 'orders/order.html', context) 

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