如何将字符串类型的URL转换为Route对象以获取查询参数？

方案1：使用原生URL API（推荐） #

现代浏览器和Node.js 10+都内置了URL构造函数，能直接解析URL字符串并提取各类信息，包括查询参数：

const urlStr = "http://localhost:8080/employee?name=john";
// 解析URL字符串
const urlObj = new URL(urlStr);

// 组装成类似route的对象
const route = {
  // 获取路径部分
  pathname: urlObj.pathname, // 输出: "/employee"
  // 将查询参数转为普通对象
  query: Object.fromEntries(urlObj.searchParams) // 输出: { name: "john" }
};

// 直接获取name参数
const name = route.query.name; // 得到"john"

urlObj.searchParams是URLSearchParams实例，还支持get()、has()、append()等方法，可灵活处理复杂查询参数（比如多值参数、URL编码参数）。

方案2：自定义解析函数（兼容老环境） #

如果需要兼容不支持URL API的老旧环境，可以手动拆分URL字符串：

function parseUrlToRoute(urlStr) {
  // 拆分路径和查询参数部分
  const [pathSection, querySection] = urlStr.split('?');
  // 提取路径（去掉协议、域名和端口）
  const pathname = pathSection.replace(/^https?:\/\/[^/]+/, '');
  // 解析查询参数
  const query = {};
  if (querySection) {
    querySection.split('&').forEach(item => {
      const [key, value] = item.split('=');
      // 解码URL编码的参数值
      query[key] = decodeURIComponent(value || '');
    });
  }
  return { pathname, query };
}

// 使用示例
const urlStr = "http://localhost:8080/employee?name=john";
const route = parseUrlToRoute(urlStr);
console.log(route.query.name); // 输出: "john"

注意：自定义函数需要额外处理URL编码、多参数、空参数等边界情况，优先推荐原生API方案。

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