携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情

JSON.parse遇到换行符的报错

开发过程中遇到这样一个场景：如下图，在编辑框中有个长的很像json格式的字符串数据，需要转成真正的json。

在代码里我们直接用JSON.parse处理，结果报了这样的错：

打印出在获取到的字符串json，"[\n {\n \"index\":0,\n \"type\":\"string\"\n }\n ]"

查了相关资料，才知道JSON.parse遇到\n、\t、空格会无法转换

那么处理方式是：替换所有的\n、\t和空格

let str = "[\n    {\n        \"index\":0,\n        \"type\":\"string\"\n    }\n ]".replace(/[\s|\r|\n]/g, '')
let res = JSON.parse("[{\"index\":0,\"type\":\"string\"}]")

这回就没有报错了

JSON.stringify格式化

解决了上个问题，现在还有个逆向回显问题，传给后端时我们希望转化成对象格式，但是回显时我们希望转换成string格式赋值到页面中。
这个时候如果直接转换，到页面中会显示在一行，丢失之前的格式，如下图
这当然不是我们想要的，对于用户来说就非常不友好了，明明有格式，回显时却丢掉了
查阅了相关资料，发现了JSON.stringify的第3个参数可以解决这个问题，官方名叫space，用来控制转换后的占位

let a = [
 {
  "index": 0,
  "type": "string"
 }
]
let s = JSON.stringify(a, null, '💜')
console.log(s)

结果如下图：

由此可看出，JSON.stringify的第3个参数可以用来占位，那么我们直接用如下代码即可格式化回显

let a = [
 {
  "index": 0,
  "type": "string"
 }
]
let s = JSON.stringify(a, null, '\t')
console.log(s)

至此，所有问题解决

JSON.parse遇到换行符的报错问题详解

JSON.parse遇到换行符的报错

JSON.stringify格式化