JavaScript使用Object.fromEntries()返回对象键带引号如何解决？

问题根因 #

控制台打印的键外层带引号只是显示效果，键本身并没有额外的引号。报错的原因是user-name这类包含连字符-的键不属于合法的JS标识符，不能直接用.操作符访问。

解决方案1：不修改键名，直接用方括号访问 #

不需要调整参数生成逻辑，直接用方括号语法读取值即可：

// 示例访问代码
console.log(obj['user-name']); // 输出 phill
console.log(obj['user-lastname']); // 输出 smith

解决方案2：转换为驼峰命名，支持点操作符访问 #

如果希望用更符合习惯的.操作符访问，可以在生成对象的时候把连字符键转换为驼峰格式：

const params = window.location.search;
const searchParams = new URLSearchParams(params);
const obj = Object.fromEntries(
  Array.from(searchParams.entries()).map(([key, value]) => {
    // 连字符转驼峰逻辑
    const camelCaseKey = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
    return [camelCaseKey, value];
  })
);

// 转换后即可用点操作符访问
console.log(obj.userName); // 输出 phill
console.log(obj.userLastname); // 输出 smith

内容的提问来源于stack exchange，提问作者Carlos Muñoz