前端关于JSON.parse解析报错问题的避坑指南
#文 一像素
问题描述
对于深度嵌套的JSON字符串，使用 JSON.parse 进行解析时，会出现代码错误
简单模拟一下报错的过程
经过上述步骤，我们得到了一个结果，基于JSON.stringify转义的2层嵌套的JSON字符串：'{"b":"{\"a\":\"a123\"}"}'，这个结果是不是看起来没问题
但是当我们尝试使用JSON.parse 解析该字符串，则会出现报错如下图所示：
值得注意的是，当我们直接使用 示例1 中的 变量json2进行解析时，有是可以正确进行解析的
这表明，json2 实质上并不等同于字符串：'{"b":"{\"a\":\"a123\"}"}' ，下面执行结果可以证明：
由此可以断定，此种情况下，json2的表达结果与变量本身并不相符，即当使用JSON.parse解析 '{"b":"{\"a\":\"a123\"}"}' 这一字面量声明的字符串时，实际上改JSON串是缺少一层 “\” 转义的。
实测结果包含但不限于上述示例所表述的这一种格式，还包括使用 [ ] 数组包裹的格式，\n 特殊字符等格式，均会引发解析异常。另外，这一解析错误不只会发生在前端，对于后端解析也会发生错误
解决方案
对于上述情况，有如下几种解决方案：
1. 规范JSON字符串的嵌套格式，防止或避免嵌套
2. 对于被嵌套的字符串，采取转义处理
3. 使用正则进行报错格式和特殊字符的替换
方案具体实现分析及示例
1. 规范JSON字符串的嵌套格式，防止或避免嵌套
对于数据源头发生在前端逻辑的点，可以通过规范格式来防止JSON字符串多层嵌套问题的发生
如 示例1 中的 json2 数据，转化为 示例4 所示，传输和解析过程就不会出错了
对于多层JSON的组装，我用了一个方法来进行处理，供大家参考
多个值需要处理时可重复使用：
因为解析错误的情况是多端都可能发生的，如数据生成的源头在后端，必要的情况下，我们也可以要求他们返回给我们规范的格式
2. 对于被嵌套的字符串，采取转义处理
使用 encodeURIComponent、escape、btoa等对嵌套内容进行转码，使用时再进行解码即可
开头 示例1 的数据，可以写成
要注意的是，该方案可能需要前后端共同编解码处理，视具体逻辑决定
3. 使用正则进行报错格式和特殊字符的替换
对于JSON解析报错的处理，推荐使用方案1和2，如果仍坚持多层嵌套的格式，那么可以使用正则进行报错格式和特殊字符的替换 ，原理就是期望把 示例1 中的格式，强行替换为 示例4 的格式，以防止报错
对于此类情况我也提供了JSON字符串转化的公共方法供大家参考，集成了最常见的报错格式的正则替换
方法中的正则替换如存在不够全面或转化不正确的情况，欢迎大家提出建议和指正
事实上，即使上述方法足够完善，仍不推荐使用该方案，因为在复杂数据格式的情况下，正则替换仍可能存在一定概率不可预见的错误。
以上是我在项目开发中遇到这一问题和处理方案总结，如大家有更好的想法或建议，欢迎大家积极提议，期待与大家的讨论
