如何解决 ‘bad value with message: unexpected token `.`’ 错误：JavaScript 解析与修复指南

共计 1663 个字符，预计需要花费 5 分钟才能阅读完成。

错误背景

这个错误通常出现在处理 JSON 数据或执行动态 JavaScript 代码时。当解析器遇到非法的点号 (.) 时，就会抛出这个错误。最常见的情况包括：

• 尝试解析格式不正确的 JSON 字符串
• 在动态代码执行中使用了不规范的语法
• 解析包含保留字符的数据时未正确转义

根本原因分析

JavaScript 引擎抛出这个错误是因为它在解析过程中遇到了预期之外的语法结构。点号 (.) 在 JavaScript 中主要有三个用途：

1. 对象属性访问（如 obj.property）
2. 数字的小数点（如 3.14）
3. 类方法的调用（如 ClassName.method()）

当引擎遇到不符合这些使用场景的点号时，就会抛出 unexpected token '.' 错误。

解决方案对比

1. 使用 JSON.parse() 的严格模式

这是处理 JSON 数据最安全的方式。JSON.parse() 会严格验证输入格式，确保数据符合 JSON 规范。

/**
 * 安全解析 JSON 字符串
 * @param jsonString 要解析的 JSON 字符串
 * @returns 解析后的对象，或抛出错误
 */
function safeJsonParse(jsonString: string): any {
  try {return JSON.parse(jsonString);
  } catch (error) {console.error('JSON 解析失败:', error);
    throw error;
  }
}

2. 动态代码执行的替代方案

避免使用 eval()，改用 Function 构造函数更安全：

/**
 * 安全执行动态代码
 * @param code 要执行的代码字符串
 * @returns 执行结果
 */
function safeEval(code: string): any {
  try {return new Function(`return ${code}`)();} catch (error) {console.error('代码执行失败:', error);
    throw error;
  }
}

3. AST 解析方案

对于复杂场景，可以使用专业的解析器如 Acorn：

import * as acorn from 'acorn';
import * as walk from 'acorn-walk';

/**
 * 使用 AST 解析 JavaScript 代码
 * @param code 要解析的代码
 * @returns 解析结果
 */
function parseWithAcorn(code: string): any {
  try {const ast = acorn.parse(code, { ecmaVersion: 2020});
    // 可以在这里对 AST 进行进一步处理
    return ast;
  } catch (error) {console.error('AST 解析失败:', error);
    throw error;
  }
}

解决方案对比表

生产环境建议

1. 输入验证层设计
2. 对所有外部输入进行严格验证
3. 使用 JSON Schema 验证 JSON 结构

4. 对代码字符串进行语法检查

5. 安全解析最佳实践

6. 永远不要信任未经验证的输入
7. 使用沙盒环境执行不受信任的代码

8. 记录所有解析失败的案例

9. 性能优化

10. 对大文件使用流式解析
11. 考虑使用 Web Workers 处理大数据
12. 缓存解析结果避免重复处理

互动思考题

假设你收到一个包含以下内容的字符串，它既不是有效的 JSON，也不是合法的 JavaScript 表达式：

{user: { name: "John", age: 30}, timestamp: 2023.05.15 }

如何设计一个函数，能够安全地将这样的字符串转换为 JavaScript 对象？需要考虑哪些边界条件？

延伸阅读

1. MDN JSON.parse() 文档
2. ECMAScript 语法规范
3. Acorn 解析器文档
4. 安全 JavaScript 执行最佳实践

希望这篇文章能帮助你理解并解决 unexpected token '.' 错误。在实践中遇到任何问题，欢迎在评论区讨论交流。