本文详解两种安全、规范的方式将 JavaScript 变量（如用户输入的用户名）注入 JSON 数据：使用模板字符串插值或先构建对象再调用 JSON.stringify()，避免语法错误与安全隐患。
本文详解两种安全、规范的方式将 javascript 变量（如用户输入的用户名）注入 json 数据：使用模板字符串插值或先构建对象再调用 `json.stringify()`，避免语法错误与安全隐患。
在 JavaScript 中，直接在 JSON 字符串字面量中引用变量（如 "{\"playerName\": userName}"）会导致语法错误——因为 JSON 格式本身不支持变量解析，它只接受静态的、符合 RFC 8259 规范的字符串。你遇到的 "userName is not valid JSON" 错误，本质是 JavaScript 尝试将未加引号、未求值的标识符 userName 当作 JSON 字符串的一部分解析，而 JSON 要求所有字符串必须用双引号包裹，且不允许未定义标识符。
✅ 推荐方式一：先构造对象，再序列化（最安全、最可靠）
这是生产环境首选方法。它天然规避了引号转义、特殊字符（如换行、双引号、反斜杠）和 XSS 风险：
const userName = "Bob";
const userOBJ = { playerName: userName }; // 构建普通 JS 对象
const userJSON = JSON.stringify(userOBJ); // 自动处理转义 → {"playerName":"Bob"}
console.log(userJSON); // 输出：{"playerName":"Bob"}若需格式化输出（如缩进），可传入第三个参数：
const prettyJSON = JSON.stringify(userOBJ, null, 2);
// 输出：
// {
// "playerName": "Bob"
// }✅ 方式二：使用模板字符串（仅限简单、可信字符串）
仅当 userName 是已知安全、不含双引号、反斜杠、控制字符的纯 ASCII 字符串时可临时使用：
const userName = "Bob";
const userJSON = `{ "playerName": "${userName}" }`; // ✅ 正确插值⚠️ 但请务必注意：此方式极易出错。例如：
const userName = 'Alice "The Hacker"'; // 包含双引号
const unsafeJSON = `{ "playerName": "${userName}" }`;
// 结果：{ "playerName": "Alice "The Hacker"" } → 无效 JSON！此时 JSON.parse(unsafeJSON) 将抛出 SyntaxError。
立即学习“Java免费学习笔记（深入）”；
? 实际应用建议（如用户表单提交）：
// 假设从 input 获取值
const inputElement = document.getElementById('username');
const userName = inputElement.value.trim();
// ✅ 安全做法：始终用对象 + stringify
const userData = {
playerName: userName,
timestamp: new Date().toISOString(),
score: 0
};
const payload = JSON.stringify(userData);
// 后续可用于 fetch 请求
fetch('/api/players', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: payload
});? 总结：永远优先使用 JSON.stringify() —— 它由引擎原生实现，自动处理 Unicode、引号转义、undefined/function 过滤（默认忽略）等边界情况；而字符串拼接模板仅适用于教学演示或完全可控的常量场景。记住：JSON 是数据交换格式，不是字符串模板引擎。
