在js中为什么json会解析失败

JSON.parse() 在 JavaScript 中为什么会失败？常见错误与解决方案详解

在 JavaScript 开发中，我们经常需要处理从服务器获取的数据或存储在本地配置文件中的信息，而 JSON (JavaScript Object Notation) 作为一种轻量级的数据交换格式，无疑是这项任务的首选。JSON.parse() 方法是 JavaScript 中将 JSON 字符串转换为 JavaScript 对象的核心工具。

开发者们或多或少都遇到过 JSON.parse() 抛出 SyntaxError 的窘境，控制台里那个熟悉的 "Unexpected token ..." 错误提示，往往让人感到困惑和沮丧，本文将探讨导致 JSON 解析失败的常见原因，并提供相应的解决方案，帮助你彻底告别这个烦人的问题。

核心问题：JSON 的语法规则比 JavaScript 更严格

首先要明确一个关键概念：JSON 语法是 JavaScript 语法的一个子集，这意味着，所有合法的 JSON 字符串也一定是合法的 JavaScript 字符串，但反之则不成立。JSON.parse() 是一个“吹毛求疵”的解析器，它只认死理，严格遵守 JSON 的语法规范，任何一点不符合规则的地方都会导致解析失败。

下面,我们来看看最常见的几种“踩坑”场景。

最常见的错误：末尾多余的逗号

在 JavaScript 对象或数组中，我们常常习惯在最后一个元素后面也加上一个逗号，这在现代 JavaScript 引擎中是被允许的，因为它方便我们增删元素。

// 在 JavaScript 中，这是合法的
const jsObject = {
  name: "Alice",
  age: 30,
  hobbies: ["reading", "hiking"], // 注意这里的最后一个逗号
};

这 绝对不合法 的 JSON。JSON.parse() 在解析到或 ] 之前如果遇到了一个逗号，它会认为后面应该还有元素，结果却遇到了结尾，从而抛出错误。

错误示例：

const invalidJsonString = '{"name": "Bob", "age": 25,}';
try {
  const obj = JSON.parse(invalidJsonString);
} catch (error) {
  console.error(error); // SyntaxError: Unexpected token } in JSON at position...
}

解决方案：

确保在 JSON 字符串的最后一个属性或元素后面不要加逗号，在将 JavaScript 对象转换为 JSON 字符串时（使用 JSON.stringify()），它会自动帮你处理掉这个多余的逗号。

引号的“不忠”：属性名必须使用双引号

在 JavaScript 中，对象的属性名可以使用单引号、双引号，或者甚至不使用引号（如果属性名是合法的标识符符）。

// JavaScript 中，这三种写法都是合法的
const jsObj1 = { name: "Charlie" };
const jsObj2 = { 'name': "Charlie" };
const jsObj3 = { name: "Charlie" };

但 JSON 规范非常严格：对象的属性名必须且只能使用双引号 () 包裹，使用单引号或不使用引号都会导致解析失败。

错误示例：

const invalidJsonString1 = '{name: "David"}'; // 属性名无引号
const invalidJsonString2 = {'name': "David"}'; // 属性名单引号
try {
  JSON.parse(invalidJsonString1);
} catch (error) {
  console.error(error); // SyntaxError: Unexpected token n in JSON at position...
}

解决方案：

始终使用双引号来包裹 JSON 对象的键名，如果你是从一个 JavaScript 对象开始，确保在序列化之前它的属性名是合法的，JSON.stringify() 会自动将它们转换为双引号。

数据类型的不匹配：undefined 和函数不是“良民”

JSON 的设计初衷是数据交换，因此它只包含几种基本的数据类型：字符串、数字、布尔值、null、数组和对象，它不支持 JavaScript 中的 undefined、function、Symbol、Date 对象或正则表达式等。

如果你尝试将一个包含这些“非法”类型的 JavaScript 对象序列化为 JSON，JSON.stringify() 会采取“静默处理”的策略：

function、undefined 和 Symbol 会被忽略（在对象中）或转换为 null（在数组中）。
Date 对象会被转换为字符串（调用其 toString() 方法）。
循环引用的对象会直接抛出错误。

这种“静默处理”往往会导致数据丢失，当你尝试用这个不完整的 JSON 字符串去解析时，虽然可能不会直接报错，但得到的结果已经不是你最初想要的了。

错误示例：

const objWithIllegalTypes = {
  name: "Eve",
  age: undefined, // 会被忽略
  sayHi: function() { console.log("hi"); }, // 会被忽略
  data: new Date(), // 会被转换为字符串
  regex: /test/ // 会被忽略
};
const jsonString = JSON.stringify(objWithIllegalTypes);
console.log(jsonString); // 输出: {"name":"Eve","data":"...当前日期和时间字符串..."}
// 解析这个字符串是成功的，但数据已经丢失
const parsedObj = JSON.parse(jsonString);
console.log(parsedObj); // { name: 'Eve', data: '...' }
console.log(parsedObj.sayHi); // undefined

解决方案：

在序列化之前,手动清理你的 JavaScript 对象，移除或转换所有 JSON 不支持的数据类型，对于特殊对象（如 Date），可以先用 toISOString() 等方法转换为字符串，在解析后再手动转换回来。

字符串中的非法字符与控制字符

JSON 字符串本身必须用双引号括起来，字符串内部虽然可以包含大部分 Unicode 字符，但也有一些控制字符是非法的，\b (退格), \f (换页), \n (换行), \r (回车), \t (制表符) 等，虽然 \n 和 \t 在 JavaScript 字符串字面量中很常见，但它们在 JSON 字符串的“值”部分也是非法的。

错误示例：

const invalidJsonString = "{'message': 'Hello\nWorld'}"; // 字符串中包含了换行符
try {
  JSON.parse(invalidJsonString);
} catch (error) {
  console.error(error); // SyntaxError: Unexpected token } in JSON at position...
}

解决方案：

如果需要在 JSON 字符串中表示换行或制表符，必须使用它们的转义形式，如 \n 和 \t，但请注意，这里的 \n 是写在 JSON 字符串本身的，而不是 JavaScript 字符串字面量中。

修正后的示例：

const validJsonString = '{"message": "Hello\\nWorld"}'; // 注意是两个反斜杠
const parsed = JSON.parse(validJsonString);
console.log(parsed.message); // 输出: Hello
                            //       World

意外的 JavaScript 对象引用

开发者会误以为一个 JavaScript 对象可以直接当作 JSON 使用，但实际上你需要的是一个字符串。JSON.parse() 的参数必须是字符串类型。

错误示例：

const jsObject = { name: "Frank" };
// 错误：向 JSON.parse() 传入了一个对象，而不是字符串
try {
  JSON.parse(jsObject);
} catch (error) {
  console.error(error); // TypeError: JSON.parse called on non-object
}

解决方案：

在使用 JSON.parse() 之前，请确保你的数据是一个字符串，如果它是一个对象，先用 JSON.stringify() 将其转换。

const jsObject = { name: "Frank" };
const jsonString = JSON.stringify(jsObject); // 先转换为字符串
const parsedObject = JSON.parse(jsonString); // 再解析

总结与最佳实践

为了避免 JSON.parse() 的失败，请遵循以下黄金法则：

使用可靠的数据源：确保你从 API 或文件中读取的是标准格式的 JSON，使用浏览器的开发者工具或 curl 等命令行工具来验证原始数据。
依赖 JSON.stringify()：如果你需要将 JavaScript 对象发送或存储为 JSON，始终使用 JSON.stringify() 来生成字符串，它能自动处理掉多余的逗号、统一使用双引号，并移除不支持的类型。
总是使用 try...catch：当你处理不可控来源的数据时（例如用户输入或第三方 API），永远将 JSON.parse() 放在 try...catch 块中，这样可以优雅地处理解析失败的情况，而不是让整个程序崩溃。
验证，验证，再验证：在开发阶段，使用在线 JSON 验证工具（如 JSONLint）来检查你的字符串是否符合规范，这是最快定位问题的方式。