JSON.parse()在Chrome与Firefox中的报错差异及解决咨询

核心原因 #

Chrome的V8引擎默认JSON.parse()未实现多行格式化JSON的错误行列号解析，而Firefox的SpiderMonkey引擎原生支持这一功能，这是不同JS引擎的实现差异导致的。

可行解决方案 #

方案1：自定义错误定位逻辑 #

手动结合字符偏移量计算行列号，弥补Chrome原生解析的不足：

function parseJsonWithLineInfo(jsonStr) {
  try {
    return JSON.parse(jsonStr);
  } catch (err) {
    const charMatch = err.message.match(/position (\d+)/);
    if (!charMatch) throw err;

    const targetIndex = parseInt(charMatch[1], 10);
    // 统一处理换行符差异
    const normalizedStr = jsonStr.replace(/\r\n/g, '\n');
    const lines = normalizedStr.split('\n');
    
    let charCount = 0;
    let lineNum = 1;

    for (const line of lines) {
      const lineLen = line.length + 1; // 包含换行符的长度
      if (charCount + lineLen > targetIndex) {
        const column = targetIndex - charCount + 1;
        err.message = `${err.message} (行: ${lineNum}, 列: ${column})`;
        break;
      }
      charCount += lineLen;
      lineNum++;
    }
    throw err;
  }
}

// 使用示例
const faultyJson = `{
    "name": "demo",
    "age": 30,
    "invalid": ,
}`;

try {
  parseJsonWithLineInfo(faultyJson);
} catch (err) {
  console.error(err.message);
}

方案2：使用第三方JSON解析库 #

选择自带错误位置分析的库（如jsonlint），这类工具专门针对格式化JSON做了错误定位优化：

// 示例基于jsonlint库
const jsonlint = require('jsonlint');

const faultyJson = `{
    "name": "demo",
    "age": 30,
    "invalid": ,
}`;

try {
  jsonlint.parse(faultyJson);
} catch (err) {
  console.error(`行: ${err.line}, 列: ${err.column}, 错误信息: ${err.message}`);
}

方案3：调试阶段的临时方法 #

如果只是开发调试时需要定位错误，可将多行JSON直接粘贴到Chrome DevTools控制台中执行，DevTools会自动解析并显示错误对应的行号（需保证粘贴内容为完整的多行格式）。

注意事项 #

• 自定义逻辑需处理不同系统的换行符（\r\n和\n），避免行列计算偏差
• 第三方库会增加项目体积，建议仅在开发环境引入，生产环境仍使用原生JSON.parse()保证性能

内容的提问来源于stack exchange，提问作者Ecce Robot