在 Django 模板中向 JavaScript 函数传参时，若未对字符串值（如日期 06-24-2024）添加引号，浏览器会将其误解析为数学表达式（如 06 - 24 - 2024），导致意外计算结果（如 -2042），而非预期字符串。正确做法是用单引号包裹整个 onclick 属性，并对字符串参数加双引号。
在 django 模板中向 javascript 函数传参时，若未对字符串值（如日期 `06-24-2024`）添加引号，浏览器会将其误解析为数学表达式（如 `06 - 24 - 2024`），导致意外计算结果（如 `-2042`），而非预期字符串。正确做法是用单引号包裹整个 `onclick` 属性，并对字符串参数加双引号。
在 Web 开发中，尤其是使用 Django（或其他服务端模板引擎）与前端 JavaScript 交互时，一个常见却隐蔽的陷阱是：HTML 属性中直接内联 JavaScript 调用时，服务端变量未被正确转义为字符串字面量。
你遇到的问题非常典型：
<button onclick="edit({{ note.id }},{{ note.date }},{{ note.mins }},{{ note.hours }})"></button>
当 note.date 渲染为 06-24-2024 时，实际生成的 HTML 是：
<button onclick="edit(123,06-24-2024,45,8.5)"></button>
此时浏览器将 06-24-2024 视为三个数字的减法运算：6 - 24 - 2024 = -2042（注意：前导零在 JS 中可能触发八进制解析，但现代浏览器通常按十进制处理 06；关键仍是连字符被识别为减号）。这就是为什么 editday.value 显示 2014 或其他错误数值——它根本不是字符串，而是运算结果。
✅ 正确写法（推荐）：
<button type="button" onclick='edit({{ note.id }},"{{ note.date }}",{{ note.mins }},{{ note.hours }})' style="background-color:grey;border:2px solid grey;"></button>
- 外层使用单引号（
onclick='...'），避免与内部双引号冲突； - 字符串参数（如
{{ note.date }}）用双引号包裹（"{{ note.date }}"），确保其作为 JS 字符串字面量传入； - 数字型字段（如
id、mins、hours）可不加引号（前提是它们确实是合法数字且无空格/特殊字符）。
? 验证技巧：
在浏览器中右键 → “查看页面源代码”，搜索生成的 onclick 内容，确认是否形如：
edit(123,"06-24-2024",45,8.5)
而非：
edit(123,06-24-2024,45,8.5) // ❌ 错误：被解析为算术表达式
⚠️ 注意事项：
- 若
note.date可能含双引号（如"2024-06-24"）、换行或反斜杠，需在服务端进行 JSON 转义（Django 推荐用|json_script或|escapejs过滤器）； - 更健壮的替代方案是：将数据通过
data-*属性绑定，再由事件监听器读取（避免内联 JS）：<button type="button" data-note-id="{{ note.id }}" data-note-date="{{ note.date }}" data-note-mins="{{ note.mins }}" data-note-hours="{{ note.hours }}" class="edit-btn"></button>document.querySelectorAll('.edit-btn').forEach(btn => { btn.addEventListener('click', function() { const id = this.dataset.noteId; const date = this.dataset.noteDate; // 自动为字符串 const mins = this.dataset.noteMins; const hours = this.dataset.noteHours; edit(id, date, mins, hours); }); });
? 总结：
永远记住——HTML 属性中的 JavaScript 表达式，必须符合 JS 语法规范。服务端变量若代表字符串，就必须显式加上引号；否则，破折号、空格、括号等都会引发解析错误。养成检查生成源码的习惯，并优先采用 data-* + 事件委托的现代实践，可大幅提升代码健壮性与可维护性。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
