你不知道的 JSON.stringify!!!
The following article is from 大迁世界 Author 前端小智
如若转载请联系原公众号
JSON.stringify
是我们经常用到的的一个方法,它主要作用是将 JavaScript 值和对象转换为字符串。如:
JSON.stringify({ foo: "bar" });
// => '{"foo":"bar"}'
JSON.stringify(123);
// => '123'
但是JS 的许多地方都有问题,这个函数也不例外。我们可能会想象一个叫做 "stringify "的函数总是返回一个字符串......但它并没有!
例如,如果你尝试 stringify undefined
,它返回 undefined
,而不是一个字符串。
JSON.stringify(undefined);
// => undefined
接下来,我将分两部分讲:
列举 JSON.stringify
不返回字符串的情况我们将如何避免这些陷阱
什么时候 JSON.stringify
不返回字符串?
undefined
、任意的函数以及 symbol
值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成 null
(出现在数组中时)。函数、undefined
被单独转换时,会返回 undefined
。
对包含循环引用的对象(对象之间相互引用,形成无限循环)执行此方法,会抛出错误
我认为 JSON.stringify
能够返回字符串以外的东西是挺惊讶的。但在6种情况下,它可以返回undefined
:
试图在顶层对 undefined
进行序列化,会返回undefined
。
JSON.stringify(undefined);
// => undefined
尝试序列化函数也会返回 undefined
。对于常规函数、箭头函数、异步函数和生成器函数都是如此。
JSON.stringify(function foo() {});
// => undefined
JSON.stringify(() => {});
// => undefined
function bar() {}
bar.someProperty = 123;
JSON.stringify(bar);
// => undefined
尝试序列化symbol 也会返回 undefined
。
JSON.stringify(Symbol("computers were a mistake"));
// => undefined
在浏览器中,试图序列化被废弃的 document.all
也会返回undefined
。
// => undefined
这只影响到浏览器,因为document.all在其他环境中是不可用的,比如Node。
带有 toJSON
函数的对象将被运行,而不是试图正常地序列化它们。但是如果toJSON
返回上面的一个值,试图在顶层序列化它将导致JSON.stringify
返回undefined
。
JSON.stringify({ toJSON: () => undefined });
// => undefined
JSON.stringify({ ignored: true, toJSON: () => undefined });
// => undefined
JSON.stringify({ toJSON: () => Symbol("heya") });
// => undefined
你可以传递第二个参数,称为 "replacer",它可以改变序列化的逻辑。如果这个函数为顶层返回上述值之一, JSON.stringify
将返回undefined
。
JSON.stringify({ ignored: true }, () => undefined);
// => undefined
JSON.stringify(["ignored"], () => Symbol("hello"));
// => undefined
需要注意的是,其中的许多东西实际上只影响到顶层的序列化。例如,JSON.stringify({foo: undefined})
,返回字符串"{}"
,这并不令人惊讶。
我还想提一下,TypeScript的类型定义在这里是不正确的。例如,下面的代码类型的校验可以通过:
const result: string = JSON.stringify(undefined);
在第2部分中,我们将讨论如何更新 TypeScript 的定义以确保其正确性。
JSON.stringify
也可能遇到问题,导致它抛出一个错误。在正常情况下,有四种情况会发生:
循环引用会导致抛出一个类型错误。
const b = { a };
a.b = b;
JSON.stringify(a);
// => TypeError: cyclic object value
注意,这些错误消息在不同浏览器可能提示是不样的,例如,Firefox 的错误信息与Chrome的不同。
BigInts不能用 JSON.stringify
进行序列化,这些也会导致一个TypeError。
JSON.stringify(12345678987654321n);
// => TypeError: BigInt value can't be serialized in JSON
JSON.stringify({ foo: 456n });
// => TypeError: BigInt value can't be serialized in JSON
带有 toJSON
函数的对象将被运行。如果这些函数抛出错误,它将冒泡到调用者。
const obj = {
foo: "ignored",
toJSON() {
throw new Error("Oh no!");
},
};
JSON.stringify(obj);
// => Error: Oh no!
你可以传递第二个参数,称为 replacer
。如果这个函数抛出一个错误,它将冒泡。
JSON.stringify({}, () => {
throw new Error("Uh oh!");
});
// => Error: Uh oh!
现在我们已经看到了 JSON.stringify
不返回字符串的情况,接下来,我们来看看如何避免这些问题。
如何避免这些问题
没有关于如何解决这些缺陷的通用方法,所以这里只介绍一些常见的情况。
处理循环引用
根据个人经验,JSON.stringify
在传递循环引用时最容易出错。如果这对你来说是一个常见的问题,我推荐 json-stringify-safe 包,它能很好地处理这种情况。
const stringifySafe = require("json-stringify-safe");
const a = {};
const b = { a };
a.b = b;
JSON.stringify(a);
// => TypeError: cyclic object value
stringifySafe(a);
// => '{"b":{"a":"[Circular ~]"}}'
封装
你可能想用你自己的自定义函数来封装 JSON.stringify
。你可以决定你想要它做什么。错误应该冒出来吗?如果 JSON.stringify
返回 undefined
,应该怎么做?
例如,Signal Desktop有一个名为 reallyJsonStringify 的函数,它总是返回一个用于调试的字符串。就像这样
function reallyJsonStringify(value) {
let result;
try {
result = JSON.stringify(value);
} catch (_err) {
// If there's any error, treat it like `undefined`.
result = undefined;
}
if (typeof result === "string") {
// It's a string, so we're good.
return result;
} else {
// Convert it to a string.
return Object.prototype.toString.call(value);
}
}
关于TypeScript类型的说明
如果你已经在用 TypeScript,可能会惊讶地发现,TypeScript对 JSON.stringify
的官方定义在这里并不正确。它们实际上看起来像这样:
// Note: 这里面简化过
interface JSON {
// ...
stringify(value: any): string;
}
不幸的是,这是一个长期存在的问题,没有一个完美的解决方案。
你可以尝试修补 JSON.stringify
的类型,但每个解决方案都有一定的缺点。我建议用自定义类型定义自己的包装器并。例如,Signal Desktop的reallyJsonStringify
的模板:
function reallyJsonStringify(value: unknown): string {
// ...
总结
JSON.stringify
有时会返回undefined
,而不是一个字符串JSON.stringify
有时会抛出一个错误我们可以通过用不同的方式包装函数来解决这个问题
希望这篇文章能让你对 JSON.stringify
有更全面的了解。
我是刷碗智,励志退休后要回家摆地摊的人,我们下期见。
作者:BlackLivesMatter 译者:前端小智 来源:devinduct 原文:https://evanhahn.com/when-stringify-doesnt-return-a-string
推荐阅读:
基于el-form封装一个依赖 json 动态渲染的表单控件
直接拿来用!盘点一些拯救头发的 JS 单行代码,网友:摸鱼必备啊
每日打卡赢积分兑换书籍入口