前端关于JSON.parse解析报错问题的避坑指南

#文 一像素 

问题描述

对于深度嵌套的JSON字符串，使用 JSON.parse 进行解析时，会出现代码错误

示例1

简单模拟一下报错的过程

 

经过上述步骤，我们得到了一个结果，基于JSON.stringify转义的2层嵌套的JSON字符串：'{"b":"{"a":"a123"}"}'，这个结果是不是看起来没问题

但是当我们尝试使用JSON.parse 解析该字符串，则会出现报错如下图所示：

示例2

值得注意的是，当我们直接使用 示例1 中的 变量json2进行解析时，有是可以正确进行解析的

示例3

这表明，json2 实质上并不等同于字符串：'{"b":"{"a":"a123"}"}' ，下面执行结果可以证明：

由此可以断定，此种情况下，json2的表达结果与变量本身并不相符，即当使用JSON.parse解析 '{"b":"{"a":"a123"}"}' 这一字面量声明的字符串时，实际上改JSON串是缺少一层 “” 转义的。

实测结果包含但不限于上述示例所表述的这一种格式，还包括使用 [ ] 数组包裹的格式， 特殊字符等格式，均会引发解析异常。另外，这一解析错误不只会发生在前端，对于后端解析也会发生错误

解决方案

对于上述情况，有如下几种解决方案：

1. 规范JSON字符串的嵌套格式，防止或避免嵌套

2. 对于被嵌套的字符串，采取转义处理

3. 使用正则进行报错格式和特殊字符的替换

方案具体实现分析及示例

1. 规范JSON字符串的嵌套格式，防止或避免嵌套

对于数据源头发生在前端逻辑的点，可以通过规范格式来防止JSON字符串多层嵌套问题的发生

如 示例1 中的 json2 数据，转化为 示例4 所示，传输和解析过程就不会出错了

示例4

对于多层JSON的组装，我用了一个方法来进行处理，供大家参考

示例5

多个值需要处理时可重复使用：

示例6

 

因为解析错误的情况是多端都可能发生的，如数据生成的源头在后端，必要的情况下，我们也可以要求他们返回给我们规范的格式

 

2. 对于被嵌套的字符串，采取转义处理 

使用 encodeURIComponent、escape、btoa等对嵌套内容进行转码，使用时再进行解码即可

开头 示例1 的数据，可以写成

示例7

要注意的是，该方案可能需要前后端共同编解码处理，视具体逻辑决定

3. 使用正则进行报错格式和特殊字符的替换

对于JSON解析报错的处理，推荐使用方案1和2，如果仍坚持多层嵌套的格式，那么可以使用正则进行报错格式和特殊字符的替换 ，原理就是期望把 示例1 中的格式，强行替换为 示例4 的格式，以防止报错

对于此类情况我也提供了JSON字符串转化的公共方法供大家参考，集成了最常见的报错格式的正则替换

示例8

方法中的正则替换如存在不够全面或转化不正确的情况，欢迎大家提出建议和指正

事实上，即使上述方法足够完善，仍不推荐使用该方案，因为在复杂数据格式的情况下，正则替换仍可能存在一定概率不可预见的错误。

以上是我在项目开发中遇到这一问题和处理方案总结，如大家有更好的想法或建议，欢迎大家积极提议，期待与大家的讨论