如何将API返回的字符串格式嵌套样式对象转为可调用的JS对象

你拿到的API响应是双重序列化的JSON字符串：后端先将样式对象序列化为JSON字符串，之后又将该字符串作为值再次序列化，因此出现了外层引号和内部的转义符。

JavaScript 实现代码 #

// 1. 拿到API返回的原始字符串
const rawResponse = "\"{\\\"div\\\":{\\\"display\\\": \\\"flex\\\",\\\"flexDirection\\\": \\\"column\\\",\\\"alignItems\\\":\\\"center\\\",\\\"fontFamily\\\":\\\"Helvetica Neue\\\"},\\\"a\\\":{\\\"fontSize\\\": 16, \\\"textAlign\\\": \\\"center\\\",\\\"fontWeight\\\":\\\"bold\\\",\\\"color\\\":\\\"#324F85\\\"},\\\"p\\\":{\\\"fontSize\\\": 34,\\\"textAlign\\\":\\\"center\\\",\\\"color\\\": \\\"#7f8f96d\\\"},\\\"h5\\\": {\\\"fontWeight\\\": \\\"normal\\\",\\\"fontSize\\\": 18,\\\"textAlign\\\":\\\"center\\\"}}\"";

// 2. 第一次parse，去掉外层包裹，得到正常JSON字符串
const innerJson = JSON.parse(rawResponse);

// 3. 第二次parse，转换为目标对象
const targetObj = JSON.parse(innerJson);

// 补充：如果你需求中p的color值为#7f8f96d6，手动修改该属性即可
targetObj.p.color = '#7f8f96d6';

注意事项 #

如果你用的请求工具（比如Axios、Fetch）默认开启了响应自动反序列化，第一次parse操作会被工具自动完成，你拿到的响应内容已经是内层JSON字符串，直接执行一次JSON.parse即可得到目标对象。

其他语言实现思路 #

• 核心逻辑一致，对返回结果连续执行两次JSON反序列化操作即可
• 如果单次反序列化直接得到字符串值，对该字符串执行第二次反序列化即可

内容的提问来源于stack exchange，提问作者ajay 24