如何在 JavaScript 中将变量值安全注入 JSON 对象-js教程-PHP中文网

如何在 JavaScript 中将变量值安全注入 JSON 对象

本文讲解两种主流方式：使用模板字符串插值和先构建对象再序列化，重点推荐后者，因其类型安全、自动转义、避免语法错误。

本文讲解两种主流方式：使用模板字符串插值和先构建对象再序列化，重点推荐后者，因其类型安全、自动转义、避免语法错误。

在 JavaScript 中，将变量（如用户输入的 userName = "Bob"）嵌入 JSON 格式数据，并非简单拼接字符串即可——直接用反引号写 { "playerName": userName } 会因 userName 未加引号或含特殊字符（如双引号、换行符）导致生成非法 JSON，进而引发解析失败或 XSS 风险。

✅ 推荐方案：先创建原生对象，再用 JSON.stringify() 序列化
这是最安全、最健壮的方式。JavaScript 引擎会自动处理引号包裹、转义（如 "Alice's "Game"" → "Alice's \"Game\"")、以及 null/undefined/函数等不可序列化值的过滤（undefined 和函数会被忽略，Symbol 抛错）：

const userName = "Bob";
const userOBJ = { playerName: userName };
const userJSON = JSON.stringify(userOBJ);
console.log(userJSON); // {"playerName":"Bob"}

若需格式化输出（如缩进），可传入第三个参数：

const prettyJSON = JSON.stringify(userOBJ, null, 2);
// 输出：
// {
//   "playerName": "Bob"
// }

⚠️ 不推荐方案：模板字符串手动拼接
虽然语法上可行（需正确使用 ${} 和双引号）：

const userName = "Bob";
const userJSON = `{ "playerName": "${userName}" }`; // ✅ 表面可行

但存在严重隐患：

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

若 userName = 'Alice "The Winner"'，生成的 JSON 将为 {"playerName": "Alice "The Winner""} —— 双引号未转义，JSON 无效；
若 userName = "Alice Level5"，换行符会导致 JSON 解析中断；
无法自动处理 null、undefined 或布尔值等类型，易引入静默错误。

? 扩展建议