前端解析URL GET参数方法（从新到旧-3种方法梳理）

本文链接：https://blog.youkuaiyun.com/weixin_43791896/article/details/146297659

第一种（最新）

		function getQueryParams(url) {
		    // 创建一个空对象来存储参数
		    const params = {};
		    // 使用 URL 接口解析 URL
		    const urlObj = new URL(url);
		    // 使用 URLSearchParams 解析查询字符串
		    const queryString = urlObj.search;
			console.log("queryString",queryString); 
		    // 如果没有查询字符串，直接返回空对象
		    if (!queryString) {
		        return params;
		    }
		    // 使用 URLSearchParams 解析查询字符串
		    const searchParams = new URLSearchParams(queryString);
			console.log(Array.from(searchParams)); 
			console.log(searchParams); 
		    // 遍历所有参数并存储到 params 对象中
			//*这里forEach循环伪数组，比如 name: "John"：value是John key是name
		    searchParams.forEach((value, key) => { 
				console.log(value,"value"); 
				console.log(key,"key"); 
		        params[key] = value;
		    });
		    return params;
		}
		// 示例用法
		const url = "https://example.com/page?name=John&age=30&city=New+York";
		const params = getQueryParams(url);
		console.log(params); // 输出: { name: "John", age: "30", city: "New York" }

new URL
用于解析和操作 URL。它可以将一个字符串解析为 URL 对象，并提供对 URL 各个部分（如协议、主机、路径、查询字符串等）的访问。
new URLSearchParams
用于解析和操作 URL 的查询字符串（即 ? 后面的部分）。它提供了一种简单的方式来处理键值对形式的查询参数。
它们从 2014-2016 年开始被提出

第二种

function parseQueryString(url) {
  const params = {};
  const queryString = url.split('?')[1] || '';

  queryString.split('&').forEach(pair => {
    const [keyEncoded, valueEncoded] = pair.split('=');
    const key = decodeURIComponent(keyEncoded || '');
    const value = decodeURIComponent(valueEncoded || '');
    if (key) {
      // 处理重复键（如多个同名参数）
      if (params[key] !== undefined) {
        if (!Array.isArray(params[key])) {
          params[key] = [params[key]];
        }
        params[key].push(value);
      } else {
        params[key] = value;
      }
    }
  });

  return params;
}

// 示例
const url = "https://example.com?name=John&age=30&hobby=code&hobby=read";
console.log(parseQueryString(url));
// 输出: { name: "John", age: "30", hobby: ["code", "read"] }

decodeURIComponent 的作用
decodeURIComponent 是 JavaScript 中用于解码 URI 组件的内置函数，它将 URI 中经过编码的特殊字符（如 %20、%3F 等）还原为原始字符。
它与 encodeURIComponent 是一对互补操作，常用于处理 URL 参数、哈希值等需要编码的场景。

URI 编码规则
在 URL 中，某些字符（如空格、中文、&、= 等）必须转换为 % 后跟十六进制数的形式（如空格 → %20）。
encodeURIComponent 会对这些字符编码，而 decodeURIComponent 负责解码还原。

第三种

function parseQueryWithoutDecode(url) {
  const params = {};
  const queryString = url.split('?')[1] || '';

  queryString.split('&').forEach(pair => {
    const [rawKey, rawValue] = pair.split('=');
    const key = rawKey || ''; // 保留未解码的键
    const value = rawValue || ''; // 保留未解码的值
    if (key) {
      // 处理重复键（保留最后一个值）
      params[key] = value;
    }
  });

  return params;
}

// 示例
const url = "https://example.com?name=John%20Doe&city=New%20York&emptyKey=";
const result = parseQueryWithoutDecode(url);
console.log(result);
// 输出: { name: "John%20Doe", city: "New%20York", emptyKey: "" }