在前端开发中，JSON 是一种常见的数据交换格式。但有时候我们会遇到包含换行符的 JSON 字符串，这会导致解析出错，给开发带来很大的麻烦。本文将介绍如何摆脱使用 JavaScript 包含换行符的 JSON 字符串。
问题来源
首先，让我们看一下包含换行符的 JSON 字符串是什么样子的。例如，以下代码片段是一个 JSON 字符串：
----- ---------- - --
------- --------
------ ---
---------- -
--------- ---- ---- -----
------- ----------
-------- ----
-
---可以看到，在这个 JSON 字符串中，有许多换行符和缩进，使其易于阅读。但是，当我们试图将其解析为 JavaScript 对象时，就会出现错误：
----- --- - ----------------------- -- ------------ ---------- ----- - -- ---- -- -------- -
这是因为 JSON 格式要求所有字符串都必须放在双引号中，并且不允许换行符。由于上述 JSON 字符串中包含了换行符和缩进，因此无法被正确解析为 JavaScript 对象。
解决方法
方法一：手动去除换行符和缩进
最简单的方法是手动去除 JSON 字符串中的换行符和缩进。虽然这种方法很麻烦，但可以确保 JSON 字符串符合标准。例如：
----- ---------- - -------------------------------------------------- ---- -------------------------------------- ----- --- - ----------------------- -----------------
输出结果为：
- ----- -------- ---- --- -------- - ------- ---- ---- ----- ----- ---------- ------ ---- - -
方法二：使用 JSON5 库
JSON5 是一个扩展了 JSON 格式的库，它允许在 JSON 字符串中包含注释、单引号、多行字符串等特性。借助 JSON5 库，我们可以轻松地处理包含换行符的 JSON 字符串。
首先，需要安装 JSON5 库：
--- ------- -----
然后，在代码中引入该库并使用其 parse() 方法即可解析包含换行符的 JSON 字符串。例如：
----- ----- - -----------------
----- ---------- - --
----- --------
---- ---
-------- -
------- ---- ---- -----
----- ----------
------ ----
-
---
----- --- - ------------------------
-----------------输出结果与上述方法一相同：
- ----- -------- ---- --- -------- - ------- ---- ---- ----- ----- ---------- ------ ---- - -
方法三：使用模板字符串
另一种方法是使用模板字符串。我们可以将 JSON 字符串作为模板字符串的一部分，并使用反斜杠（\）来转义所有换行符和引号。例如：
----- ---------- - --
------- --------
------ ---
---------- -
--------- ---- ---- -----
------- ----------
-------- ----
-
---
----- ------------ - -
-------------------------- --------------------------- ----
--
----- --- - -------------------------
-----------------输出结果与上述两种方法相同：
- ----- -------- ---- --- -------- - ------- ---- ---- ----- ----- ---------- ------ - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------