如何在 JavaScript 中将变量值正确写入 JSON 对象-js教程-PHP中文网

如何在 JavaScript 中将变量值正确写入 JSON 对象

本文详解两种安全、规范的方式将 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}" }`; // ✅ 正确插值

⚠️ 但请务必注意：此方式极易出错。例如：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

const userName = 'Alice "The Hacker"'; // 包含双引号
const unsafeJSON = `{ "playerName": "${userName}" }`;
// 结果：{ "playerName": "Alice "The Hacker"" } → 无效 JSON！

此时 JSON.parse(unsafeJSON) 将抛出 SyntaxError。

? 实际应用建议（如用户表单提交）：

// 假设从 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 是数据交换格式，不是字符串模板引擎。