js字符串转数组JSON.parseUnexpectedtoken报错

在 JavaScript 中使用 JSON.parse() 将字符串解析为数组时，出现 SyntaxError: Unexpected token 报错，其核心原因是被解析的字符串不符合严格的 JSON 语法规范（RFC 8259）。最常见的诱因包括：字符串内部使用了单引号而非标准双引号、数组元素末尾遗留了多余的逗号、直接将普通逗号分隔的文本传入了 JSON.parse()，或者输入值本身是 undefined 以及序列化异常的 "[object Object]"。解决该问题的完整路径是：依据报错提示中的字符位置定位具体非法符号，从数据源头确保生成标准的双引号 JSON 串；对于普通的非 JSON 字符列表切换为 String.prototype.split() 转换；并在业务解析侧包裹 try...catch 实现防御式异常兜底。

一、报错表现与语法机理：为什么 JSON.parse 会抛出 Unexpected token？

当 JavaScript 引擎执行 JSON.parse(text) 时，它启动的是一个内置的静态词法分析器，而不是普通的 JavaScript 代码求值器。解析器会从左至右逐个字符扫描输入的字符串，并严格依照 JSON 语法状态机比对字符。一旦在当前语法状态下读取到不属于预期规则集的字符，解析器会立即中断后续分析，并抛出形如 SyntaxError: Unexpected token ... in JSON at position ... 的异常。

开发者最容易产生的误解，是将“JavaScript 代码中合法的数组字面量写法”与“JSON 规范定义的数组字符串”混为一谈。在普通的 JavaScript 脚本中，定义数组允许使用单引号、反引号，甚至可以在末尾加上尾随逗号；但在标准 JSON 语法中，这些特性全部属于语法错误。

如上图所示，当包含单引号 ' 或尾随逗号 , ] 的字符串进入 JSON.parse() 时，解析器在建立抽象语法节点时无法将其识别为合法的字符串闭合符或下一个数组元素，从而在具体字符索引位置（position）触发非预期 Token 报错。

二、四类高频报错场景分析与具体修复方案

排查 Unexpected token 报错的关键在于观察控制台中给出的具体 Token 字符以及报错位置（position）。以下是实际开发中最典型的四种错误场景及其针对性修复方法。

场景 1：单引号包裹的伪 JSON 字符串（Unexpected token '）

这是最为高频的错误原因。例如从某些后端语言（如 Python 的 str(list)）返回数据，或者前端手动拼接字符串时使用了单引号：

// 环境：Node.js 或 浏览器控制台
const rawStr = "['apple', 'banana', 'orange']";
const arr = JSON.parse(rawStr); // 抛出语法错误

根本原因：JSON 规范中字符串的边界限定符必须且只能是双引号 "。解析器读取到索引 1 处的单引号 ' 时，直接判定为非法标记。

正确修复做法：首选方案是从数据提供端采用标准的序列化方法（如在 JavaScript 中使用 JSON.stringify()，在 Python 中使用 json.dumps()）。如果数据源不可控且能够确认内容不包含复杂的转义字符，可在解析前将单引号安全替换为双引号：

// 方案 A：从源头规范化生成标准 JSON
const validJson = JSON.stringify(['apple', 'banana', 'orange']);
const resultA = JSON.parse(validJson);
console.log(resultA);

// 方案 B：对简单单引号伪 JSON 字符串做预处理替换
const rawStr = "['apple', 'banana', 'orange']";
const normalized = rawStr.replace(/'/g, '"');
const resultB = JSON.parse(normalized);
console.log(resultB);

场景 2：数组末尾含有尾随逗号（Unexpected token ]）

在手动拼接数组或模板渲染数据时，容易在最后一个元素后面多写一个逗号：

const rawStr = '[10, 20, 30,]';
const arr = JSON.parse(rawStr);

根本原因：JSON 规范中逗号 , 意味着后面必须跟随一个新的合法数据项。当解析器遇到逗号后直接读到闭合中括号 ] 时，便认为出现了非预期的闭合符号。

正确修复做法：杜绝手工字符串拼装，改用数组方法 push 后统一执行 JSON.stringify()。对于必须处理存量不合规字符串的场景，可利用正则表达式清理闭合括号前的尾随逗号：

const rawStr = '[10, 20, 30,]';
// 清除闭合符号 ] 或 } 前的多余逗号
const cleaned = rawStr.replace(/,\s*([\]}])/g, '$1');
const arr = JSON.parse(cleaned);
console.log(arr);

场景 3：普通分隔符字符串被误传入 JSON.parse（Unexpected token 字符）

许多场景下，前端接收到的字符串仅仅是由逗号或其它符号连接的常规文本（如 "1,2,3" 或 "apple,banana"），并不包含外层的方括号 []：

const tagString = "javascript,css,html";
const tags = JSON.parse(tagString);

根本原因：JSON.parse() 是用来解析 JSON 数据结构的，而不是通用文本切分工具。以普通字母开头的字符串既不是合法数值、不是由引号包裹的 JSON 字符串，也不是数组或对象。

正确修复做法：对于普通字符分隔的文本，直接使用 JavaScript 原生的 String.prototype.split() 方法，无需调用 JSON.parse()：

const tagString = "javascript,css,html";
// 使用 split 直接按分隔符切分为数组
const tags = tagString ? tagString.split(',') : [];
console.log(tags);

场景 4：变量为 undefined 或已是对象导致隐式转换（Unexpected token u / o）

当传递给 JSON.parse(val) 的变量不是字符串类型时，JavaScript 引擎会先隐式调用 String(val) 进行强制转换：

• 传入 undefined 时，会被强制转换为字符串 "undefined"，在索引 0 处抛出 Unexpected token u；
• 传入一个已经是普通 JavaScript 对象的变量时，会被转换为 "[object Object]"，在索引 1 处抛出 Unexpected token o。

let dataA;
JSON.parse(dataA); // 抛出 Unexpected token u in JSON at position 0

const dataB = { name: "admin" };
JSON.parse(dataB); // 抛出 Unexpected token o in JSON at position 1

正确修复做法：在调用解析之前增加参数类型及空值校验，如果变量已经是对象或数组，直接复用即可：

function parseSafely(input) {
  if (!input) return [];
  if (Array.isArray(input)) return input;
  if (typeof input !== 'string') return [];
  return JSON.parse(input);
}

三、从排查到修复的标准化实施步骤

在实际项目维护中，面对不可预期的后端返回或历史数据，建议按照以下四个标准化步骤进行系统化排查与修复，确保代码的健壮性。

步骤 1：精确打印原始输入与报错定位

不要仅使用 console.log(str) 打印，因为控制台可能会隐藏换行符、首尾空白或 Unicode 字符（如零宽空格、BOM 头 \uFEFF）。推荐使用 console.log(JSON.stringify(str))，并结合 try...catch 提取 position 索引截取上下文：

function debugParseError(rawInput) {
  console.log("数据类型:", typeof rawInput);
  console.log("带转义视图:", JSON.stringify(rawInput));

  try {
    return JSON.parse(rawInput);
  } catch (err) {
    console.error("捕获报错:", err.message);
    // 从错误信息提取 position 索引
    const match = err.message.match(/position\s+(\d+)/);
    if (match && typeof rawInput === 'string') {
      const pos = parseInt(match[1], 10);
      const start = Math.max(0, pos - 15);
      const end = Math.min(rawInput.length, pos + 15);
      console.error("报错位置上下文:");
      console.error("截取内容:", rawInput.slice(start, end));
      console.error("问题字符:", rawInput[pos]);
    }
    return null;
  }
}

// 运行测试
debugParseError("['apple', 'banana']");

步骤 2：鉴别数据形态与转换路径

根据排查结果，将数据归入对应的处理路径：

• 如果数据本身就是数组对象，直接使用，不再执行解析；
• 如果数据是无中括号的逗号分隔字符串（如 "1,2,3"），使用 split(',') 处理；
• 如果数据以 [ 开头并以 ] 结尾，但包含单引号或尾逗号，执行语法清洗后再解析。

步骤 3：编写生产级安全转换工具函数

在生产业务中，任何未经容错包裹的 JSON.parse 都是运行时崩溃的潜在隐患。可以将类型鉴别、格式清洗与异常捕获整合为一个通用的工具函数：

/**
 * 安全地将字符串或未知输入转换为数组
 * @param {any} input 输入数据
 * @param {Array} fallback 转换失败时的兜底数组，默认为 []
 * @returns {Array} 转换后的数组
 */
function safeStringToArr(input, fallback = []) {
  // 1. 如果输入为空或未定义，直接返回兜底值
  if (input === null || input === undefined || input === '') {
    return fallback;
  }

  // 2. 如果本身已是数组，直接复用
  if (Array.isArray(input)) {
    return input;
  }

  // 3. 非字符串类型且非数组，无法解析
  if (typeof input !== 'string') {
    return fallback;
  }

  const trimmed = input.trim();

  // 4. 普通分隔符场景：不以 [ 开头，但包含逗号
  if (!trimmed.startsWith('[') && trimmed.includes(',')) {
    return trimmed.split(',').map(item => item.trim()).filter(Boolean);
  }

  // 5. 尝试直接标准解析
  try {
    const parsed = JSON.parse(trimmed);
    return Array.isArray(parsed) ? parsed : fallback;
  } catch (initialError) {
    // 6. 容错清洗路径：处理单引号伪 JSON 与尾随逗号
    try {
      const cleaned = trimmed
        .replace(/'/g, '"')               // 修复单引号为双引号
        .replace(/,\s*([\]}])/g, '$1');   // 消除尾随逗号
      const secondTry = JSON.parse(cleaned);
      return Array.isArray(secondTry) ? secondTry : fallback;
    } catch (cleanError) {
      // 最终解析失败，记录告警并返回兜底默认值
      console.warn("safeStringToArr 解析失败，回退至兜底值:", input);
      return fallback;
    }
  }
}

步骤 4：验证解析结果

对多种边界数据进行调用验证，确认函数在各种异常情况下均能返回预期数组，不抛出任何未捕获异常：

console.log("用例 1 (标准 JSON):", safeStringToArr('["React", "Vue"]'));
console.log("用例 2 (单引号伪 JSON):", safeStringToArr("['Node', 'Deno',]"));
console.log("用例 3 (普通逗号分割):", safeStringToArr("HTML, CSS, JS"));
console.log("用例 4 (undefined 传入):", safeStringToArr(undefined));
console.log("用例 5 (畸形非法文本):", safeStringToArr("[broken-data"));

四、安全禁区与全景防护总结

综上所述，解决 js字符串转数组JSON.parseUnexpectedtoken报错 的关键在于明确区分数据特征与规范要求。在团队协作中，接口交互优先使用严格的 JSON.stringify() 保证数据源头纯洁；在消费端面对多样化输入时，合理选择 JSON.parse 与 split，并常态化包裹防御兜底函数，即可彻底规避解析崩溃。