`JSON.parse(undefined)` 导致 "undefined" 非法 JSON 错误

Question

**问题：为何调用 `JSON.parse(undefined)` 会抛出“Unexpected token u in JSON at position 0”错误？** 在实际开发中，若将 `undefined` 作为参数传递给 `JSON.parse()`，JavaScript 引擎会尝试解析字符串 `"undefined"`，由于该字符串并非合法的 JSON 格式（如 null、对象、数组等），解析器在遇到首字母 "u" 时即抛出语法错误。常见于未正确校验存储数据（如 localStorage.getItem 为 null 时误传入 parse）。正确做法是始终确保传入 `JSON.parse()` 的参数为有效 JSON 字符串，并增加前置判断，如 `typeof value === 'string'`，避免非法输入导致运行时异常。

Answer 1

1. 问题现象：为何调用 JSON.parse(undefined) 会抛出“Unexpected token u in JSON at position 0”错误？

当开发者在 JavaScript 中执行 JSON.parse(undefined) 时，控制台通常会抛出如下错误：

Uncaught SyntaxError: Unexpected token u in JSON at position 0

这个错误信息表明，JSON 解析器在字符串的第一个位置（position 0）遇到了一个无法识别的字符 "u"。要理解其成因，需深入解析 JavaScript 的类型转换机制。

2. 深层原理：JavaScript 类型转换与 JSON.parse 的行为

JSON.parse() 方法期望接收一个合法的 JSON 格式的字符串，例如：'{"name": "Alice"}' 或 '[1,2,3]'。然而，当传入 undefined 时，JavaScript 并不会直接拒绝该参数，而是对其进行隐式类型转换。

根据 ECMAScript 规范，所有非字符串类型的参数在传入 JSON.parse() 前都会被强制转换为字符串。因此：

• JSON.parse(undefined) 实际上等价于 JSON.parse(String(undefined))
• String(undefined) 的结果是字符串 "undefined"
• 解析器尝试将字符串 "undefined" 当作 JSON 处理，但该字符串并非合法 JSON 格式

由于合法 JSON 的起始字符只能是：{、[、"、t（true）、f（false）、n（null）、或数字，而 u 不在其中，故解析失败。

3. 常见触发场景与代码示例

以下是一些典型导致此错误的实际开发场景：

场景	代码示例	风险点
从 localStorage 读取未设置的键	JSON.parse(localStorage.getItem('userData'))	getItem 返回 null，转为字符串后为 "null"，虽合法但可能非预期；若逻辑错误传入 undefined 则报错
异步请求返回空值	JSON.parse(response.data)（data 为 undefined）	未校验接口响应完整性
函数默认参数缺失处理	function parseData(input) { return JSON.parse(input); }	调用时未传参，input 为 undefined

4. 安全解析方案与最佳实践

为避免此类运行时异常，应实施前置校验机制。以下是推荐的防护策略：

1. 检查输入是否为字符串类型
2. 进一步判断字符串内容是否为空或非法值
3. 使用 try-catch 包裹解析过程以优雅降级

function safeParse(jsonInput) {
  if (typeof jsonInput !== 'string') {
    console.warn('Invalid type passed to JSON.parse:', typeof jsonInput);
    return null;
  }
  if (jsonInput.trim() === '') {
    return null;
  }
  try {
    return JSON.parse(jsonInput);
  } catch (e) {
    console.error('JSON parse error:', e.message);
    return null;
  }
}

5. 流程图：安全 JSON 解析决策路径

graph TD A[开始解析 JSON] --> B{输入是否为字符串?} B -- 否 --> C[返回 null 或抛出自定义错误] B -- 是 --> D{字符串是否为空白?} D -- 是 --> C D -- 否 --> E[执行 JSON.parse()] E --> F{解析成功?} F -- 是 --> G[返回解析结果] F -- 否 --> H[捕获异常，记录日志] H --> I[返回默认值或 null]

6. 扩展思考：与其他数据序列化方法的对比

相较于 JSON.parse 的严格语法要求，其他反序列化方式如 eval() 或 new Function() 虽能执行类似功能，但存在严重安全风险，不推荐用于不可信数据。此外，现代框架如 Vue 或 React 在状态管理中常封装了解析逻辑，例如 Vuex 使用插件持久化时自动处理 null 与 undefined 边界情况。

值得一提的是，TypeScript 可在编译期辅助识别潜在的类型错误，若结合运行时校验，可大幅降低此类 Bug 出现概率。