前端关于JSON.parse解析报错问题的避坑指南 |
您所在的位置:网站首页 › json查错 › 前端关于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串是缺少一层 “\” 转义的。 实测结果包含但不限于上述示例所表述的这一种格式,还包括使用 [ ] 数组包裹的格式,\n 特殊字符等格式,均会引发解析异常。另外,这一解析错误不只会发生在前端,对于后端解析也会发生错误 解决方案对于上述情况,有如下几种解决方案: 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 方法中的正则替换如存在不够全面或转化不正确的情况,欢迎大家提出建议和指正 事实上,即使上述方法足够完善,仍不推荐使用该方案,因为在复杂数据格式的情况下,正则替换仍可能存在一定概率不可预见的错误。 以上是我在项目开发中遇到这一问题和处理方案总结,如大家有更好的想法或建议,欢迎大家积极提议,期待与大家的讨论
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |