JavaScript 从URL查询字符串构造对象是否有更优实现方案？

函数命名建议 #

你当前的功能是从URL路径的末尾段提取键值对参数，通用的见名知意的命名可以用 parsePathQueryParams，如果是提取标准?开头的查询参数可以用parseUrlSearchParams，不需要太抽象的命名，能体现功能范围即可。

原有代码存在的鲁棒性问题 #

• 没有处理参数编码场景：如果参数包含中文、空格、特殊转义字符，解析结果会出现乱码
• 未限制等号分割次数：如果参数值本身包含=，会被截断导致解析错误
• 无异常过滤逻辑：遇到空参数、只有key没有value的异常项、路径末尾没有参数的情况，会生成无效的对象属性
• 未处理URL附加内容：如果URL末尾带?标准查询串或者#锚点，会被错误混入解析内容

优化实现方案 #

适配当前场景（从路径最后一段提取参数） #

function parsePathQueryParams(url) {
  // 提取路径最后一段，同时过滤掉标准查询串和锚点的干扰
  const lastPathSegment = url.split('/').at(-1).split(/[?#]/)[0];
  // 无有效参数直接返回空对象
  if (!lastPathSegment.includes('=')) return {};

  return lastPathSegment.split('&').reduce((result, currItem) => {
    // 只分割第一个=，适配值包含=的场景
    const equalSignIndex = currItem.indexOf('=');
    if (equalSignIndex < 1) return result;

    // 解码处理转义字符
    const key = decodeURIComponent(currItem.slice(0, equalSignIndex).trim());
    const value = decodeURIComponent(currItem.slice(equalSignIndex + 1).trim());

    result[key] = value;
    return result;
  }, {});
}

如果是提取标准查询参数（?后面的内容） #

优先用浏览器内置的URLSearchParamsAPI，完全符合URL规范，不需要自己处理各种边缘情况，鲁棒性最高：

function parseUrlSearchParams(url) {
  const urlInstance = new URL(url);
  const params = {};
  for (const [key, value] of urlInstance.searchParams) {
    params[key] = value;
  }
  return params;
}

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