JavaScript 中奇怪的 JSON 解析行为："Unexpected token :" 错误

在前端开发中，我们经常要使用 JSON（JavaScript Object Notation）来交换数据。JSON 简单、易于理解和使用，而且可以通过 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象。然而，有时候我们会遇到 "Unexpected token :" 的错误信息，这通常是因为 JSON 字符串格式不正确导致的。

JSON 格式

首先，我们需要了解 JSON 的基本格式。一个简单的 JSON 对象看起来像下面这样：

{
  "name": "John",
  "age": 30,
  "city": "New York"
}

其中，对象由一对花括号 {} 包围，属性名和属性值之间用冒号 : 分隔，每个属性之间用逗号 , 分隔。属性名必须是字符串，属性值可以是字符串、数字、布尔值、数组或对象。

遇到问题："Unexpected token :"

当 JSON 字符串格式不正确时，可能会遇到 "Unexpected token :" 的错误信息。例如，下面的代码就会抛出该错误：

const jsonString = '{ "name": "John", "age": 30, "city": "New York", }';
const jsonObj = JSON.parse(jsonString);

这里我们意图将一个 JSON 字符串转换为 JavaScript 对象，但是由于结尾处多了一个逗号 ,，导致解析器无法正常解析，出现了 "Unexpected token :" 的错误。

解决问题

为了避免 JSON 解析错误，我们需要注意以下几点：

1. 确保 JSON 字符串的格式正确。可以使用 JSONLint 或其他 JSON 格式检查工具进行验证。
2. 不要在 JSON 对象中添加多余的逗号 ,，尤其是在最后一个属性后面。
3. 在处理可能会导致 JSON 解析错误的情况下，始终使用 try...catch 语句来捕获异常。

下面是一个示例代码，它演示了如何避免 "Unexpected token :" 错误：

const jsonString = `{ "name": "John", "age": 30, "city": "New York" }`;

try {
  const jsonObj = JSON.parse(jsonString);
  console.log(jsonObj);
} catch (e) {
  console.error(e.message);
}

在这个示例中，我们没有在最后一个属性后面添加逗号，而且使用了 try...catch 语句来捕获异常。如果 JSON 字符串格式不正确，就会输出相应的错误信息，否则将正常输出转换后的 JavaScript 对象。

结论

在前端开发中，使用 JSON 来交换数据是很常见的。但是，在处理 JSON 数据时，我们需要注意它的格式，以避免出现 "Unexpected token :" 的错误，影响程序的正常运行。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29077