URL 参数处理的那些事儿

获取 URL 参数

这几乎是前端开发最常见的操作，获取 url 参数的操作一般有以下几种：

URL.searchParams

上篇文章介绍过 new URL，根据 MDN：URL 接口的 searchParams 属性返回一个 URLSearchParams 对象，这个对象包含当前 URL 中解码后的 GET 查询参数。

export function getURLParams() {
  let paramsObj = {};
  let url = new URL(window.location.href);
  for (let [key, value] of url.searchParams.entries()) {
    paramsObj[key] = value;
  }
  return paramsObj;
}

split

利用 split 分割字符串。获取当前 url query，以 & 分割字符串，再以 = 分割字符串。

function getURLParams() {
  const paramsObj = {};
  const query = window.location.search.substring(1);
  const paramsArr = query.split("&");
  for (const paramStr of paramsArr) {
    const [key, value] = paramStr.split("=");
    paramsObj[key] = value;
  }

  return paramsObj;
}

a 标签 + split

利用 a 标签，这种方法较少人使用，它的原理就是利用了 a 标签得到一些内置属性，如 href、hash、search 等属性。其余和 spilt 分割一样处理，只是这种方法可以处理任意 url。

function getURLParams(url) {
  const paramsObj = {};
  const parser = document.createElement("a");
  parser.href = url;
  const query = parser.search.substring(1);
  const paramsArr = query.split("&");

  for (const paramStr of paramsArr) {
    const [key, value] = paramStr.split("=");
    paramsObj[key] = value;
  }
  return paramsObj;
}

正则

这里用正则处理用 & 分割后的字符串

function getURLParams() {
  let paramsObj = {};
  let paramsStr = window.location.search.substring(1);
  let paramArr = paramsStr.split("&");
  for (let paramsStr of paramArr) {
    let match = paramsStr.match(/^([^=]+)=(.*)$/); // 正则匹配键值对
    if (match) {
      let key = decodeURIComponent(match[1]);
      let value = decodeURIComponent(match[2]);
      paramsObj[key] = value;
    }
  }

  return paramsObj;
}

spilt + 找到 = 的位置

这里键值对的分割不使用 split('=')，原因后面会说。

export function getURLParams() {
  let paramsObj = {};
  let paramsStr = window.location.search.substring(1);  // 去掉问号
  let paramsArr = paramsStr.split('&');  // 根据"&"分割参数

  for (let paramStr of paramsArr) {
    let equalSignIndex = paramStr.indexOf('=');  // 找到"="的位置
    let key = paramStr.substring(0, equalSignIndex);  // 获取键
    let value = paramStr.substring(equalSignIndex + 1);  // 获取值
    paramsObj[key] = decodeURIComponent(value);
  }

  return paramsObj;
}

URL 字符串编码和解码

浏览器 URL 只能包含特定的字符集，例如字符 = 在 URL 中有特殊的含义（用于分隔参数名和参数值），因此在 URL 参数值中不能直接使用。为了使这些特殊字符能够作为参数值的一部分出现，它们被转换为"%加上ASCII值的十六进制表示"的形式，这就是URL编码（也称为百分号编码）。

要做这样的转换，可以用 encodeURIComponent，这叫做编码，可以对 url 中的字符进行编码，相对的，decodeURIComponent 方法用于解码由 encodeURIComponent 方法或者其他类似方法编码的部分统一资源标识符（URI）。

有两种可能的 uURL：

• 解码后：www.abc.com/?name=bob&m...
• 编码后：www.abc.com/?name=bob&m...

在获取参数时，对于编码后的 URL，在获取参数后，需要对其解析解码；对于解码后的 URL，获取参数需要做特殊的处理。

使用 URL.searchParams 的方式获取参数

+

参数中的 + 会变成空格，因为在 URL 中 + 是一个特殊字符代表空格。

%

以 % 开头，后面跟2个有效的十六进制数字时，会被解码为对应的字符。例如，%20 会被解码为一个空格，%2B 会被解码为 +。

使用 split 分割字符串获取参数

以 = 分割 paramStr 时，如果参数本身就包含 =，就会获取错误的参数值。所以才有上面最后一种获取参数的方法 spilt + 找到 = 的位置 它以第一个 = 来分割参数 key 和 value。

当然如果参数中还包含 &，那就没法处理了，URL 首先需要考虑编码的操作。

在获取参数时进行解码

上面获取 URL 参数的方法中，我都没有添加解码，一般需要需要对参数值进行解码：、

paramsObj[key] = decodeURIComponent(value);

解码一般是安全的，对于已经解码的字符，再使用 decodeURIComponent 进行解码不会有任何影响，如果是编码过的内容，就正常解码。

但是也要注意，正如上面说的，如果参数值包含 %，那么解码就会改变它真实的值。

总结

所以关于 URL 参数到底需要编码还是解码要视情况而定。

URL 在不同情境下表现不一。可能同一个地址在不同平台会被编码或解码。

有说为了要符合URL 规范，浏览器会自动对特殊字符进行编码，但是我观察，实际上，浏览器中 URL 并不会自动编码。