前端关于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

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

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

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

原文地址:https://www.cnblogs.com/liuyongqi/p/15353695.html