在日常的 Web 开发中,无论是在前后端的数据交互,还是在本地存储的处理上,JSON(JavaScript Object Notation)都扮演着至关重要的角色。作为开发者,我们经常需要将内存中的 JavaScript 对象转换为可以被传输或存储的字符串格式。在这篇文章中,我们将深入探讨如何高效且安全地在 JavaScript 中创建 JSON 字符串。这不仅是基础语法的学习,更是关于构建可维护、高性能且符合 2026 年现代开发标准的数据管道的探索。
为什么我们需要创建 JSON 字符串?
首先,让我们明确一下场景。当你构建一个 Web 应用时,前端的 JavaScript 对象是一个非常灵活的数据结构。然而,这种结构无法直接通过网络发送给服务器,也无法直接写入到 LocalStorage 中。这就需要我们将其“序列化”为 JSON 字符串。这个过程就像是把复杂的乐高模型拆解并装箱,变成一个可以被运输的标准包裹。到了目的地(服务器或另一端),它再被“反序列化”还原。
但在 2026 年,随着应用架构的日益复杂——边缘计算、AI 辅助编程以及高实时性的需求,简单的“打包”已经不够了。我们需要考虑数据的安全性、序列化的性能以及对特殊类型(如 BigInt、Date 或自定义类)的处理。接下来,让我们一起看看在 JavaScript 中创建 JSON 字符串的几种核心方式,以及它们在现代工程中的进阶应用。
—
方法一:使用 JSON.stringify() —— 标准且推荐的做法
这是最通用、最标准的方法。JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串。如果指定了 replacer 函数,则可以选择性地替换值;如果指定了 replacer 数组,则可以选择性地仅包含数组指定的属性。
1. 基础用法与类型转换陷阱
让我们从一个最简单的例子开始。假设我们有一个用户信息对象,我们需要把它发送到服务器。
// 让我们定义一个包含用户信息的 JavaScript 对象
const user = {
id: 101,
username: "alice_dev",
email: "[email protected]",
isAdmin: false
};
// 使用 JSON.stringify() 将对象转换为字符串
// 这是目前最稳妥、最常用的方式
const userJsonString = JSON.stringify(user);
// 让我们打印出来看看结果
console.log(userJsonString);
// 输出: {"id":101,"username":"alice_dev","email":"[email protected]","isAdmin":false}
// 你可以看到,原来的属性名被引号包裹,变成了纯粹的字符串格式
console.log(typeof userJsonString); // 验证类型:"string"
在这个例子中,你可能会注意到输出的字符串中所有的键都被双引号包围了,这正是 JSON 格式严格要求的。
2026 开发提示:随着 TypeScript 和现代 Linter 的普及,我们需要特别注意 JSON 不支持的类型。例如,JavaScript 中的 INLINECODE5dcf0a1e、INLINECODEd19f1547 和 INLINECODEee1ca6a6 在序列化时会被自动忽略或转换为 INLINECODE438b95f7(如果是在数组中)。如果你的 API 依赖这些值,前端可能会收到不完整的数据。
2. 进阶控制:美化输出与数据脱敏
在实际开发中,我们有时需要调试数据,直接看一长行的字符串非常痛苦。INLINECODEc08907e2 还接受另外两个参数,非常有用:INLINECODEb141bcea 和 space。
const product = {
id: "p_001",
name: "高性能机械键盘",
price: 899.00,
internalSKU: "INTERNAL-SECRET-99", // 假设这是内部数据,不想发给前端
developerNotes: "仅供内部测试使用"
};
// 场景 A:我们需要格式化输出(美化),让 JSON 更易读
// 第三个参数 "\t" 表示使用制表符进行缩进,数字 4 表示 4 个空格
const prettyJson = JSON.stringify(product, null, 4);
console.log("--- 格式化后的 JSON ---");
console.log(prettyJson);
/*
输出将是这样的:
{
"id": "p_001",
"name": "高性能机械键盘",
"price": 899,
"internalSKU": "INTERNAL-SECRET-99",
"developerNotes": "仅供内部测试使用"
}
*/
// 场景 B:数据脱敏——我们需要过滤掉敏感字段(比如 internalSKU)
// 第二个参数可以是一个数组,包含我们想要保留的属性名
const safeJson = JSON.stringify(product, ["id", "name", "price"], 2);
console.log("--- 过滤后的安全 JSON ---");
console.log(safeJson);
// 输出将不包含 internalSKU 和 developerNotes 字段
3. 高级技巧:使用 Replacer 函数处理复杂对象图
你可能会遇到更复杂的情况,比如数据中包含不允许被序列化的值(如 INLINECODE9fe90f99 对象、INLINECODE385543bc 或者循环引用)。我们可以利用 replacer 函数来精细控制。
const complexData = {
name: "Project Alpha",
startTime: new Date(),
status: "pending",
largeNumber: 9007199254740991n, // BigInt 类型
// 这个函数通常无法被直接序列化
getDetails: function() {
return `Project ${this.name} is ${this.status}`;
},
// undefined 也会被忽略
metadata: undefined
};
// 我们可以定义一个 replacer 函数来定制转换逻辑
const customReplacer = (key, value) => {
// 处理 BigInt:JSON 原生不支持,转为字符串
if (typeof value === ‘bigint‘) {
return value.toString() + " [BigInt]";
}
// 处理 Date:转换为 ISO 字符串
if (value instanceof Date) {
return value.toISOString();
}
// 处理函数:转为占位符或忽略
if (typeof value === ‘function‘) {
return "[Function Hidden]";
}
// 其他情况正常返回
return value;
};
const finalJson = JSON.stringify(complexData, customReplacer, 2);
console.log(finalJson);
—
方法二:使用模板字面量 —— 灵活但需谨慎的手动构建
除了使用标准 API,我们也可以利用 ES6 引入的模板字面量来手动构建 JSON 字符串。这种方式允许我们完全控制输出格式,但也伴随着更高的风险。
1. 基础示例与构建自定义日志
模板字面量使用反引号(`INLINECODE5c3142ac `INLINECODEf0329de2JSON.stringify()INLINECODEb7b57e71WeakSetINLINECODE07e387adtoJSONINLINECODE404bfd3btoJSON()INLINECODEf4667ae0JSON.stringify()INLINECODE859bf926JSON.parse(JSON.stringify(obj))INLINECODE02e4cf88structuredCloneINLINECODE2edbb17ereplacerINLINECODEf142c214MapINLINECODE8a29b327SetINLINECODE2ff38194protoINLINECODEbc2e36a4constructorINLINECODE2d2c8207JSON.stringifyINLINECODEe2db9651JSON.stringify()INLINECODE4b662e24replacerINLINECODE9b6a9549spaceINLINECODEdb940a39WeakSetINLINECODEc72c988ctoJSONINLINECODEc5eba708toJSON 方法,可以优雅地控制对象如何被序列化,非常适合隐藏敏感属性。structuredClone` 等新 API,并利用 AI 工具来编写繁琐的数据转换逻辑,但始终保持对安全边界的敏感度。
5. **拥抱现代工具**:关注
掌握了这些技巧,你就能在 JavaScript 开发中游刃有余地处理数据交换,编写出更健壮、更专业的代码。希望这些知识能帮助你解决实际开发中遇到的 JSON 处理难题!