URL 参数处理的那些事儿

获取 URL 参数

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

URL.searchParams

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

js 复制代码
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,以 & 分割字符串,再以 = 分割字符串。

js 复制代码
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。

js 复制代码
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;
}

正则

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

js 复制代码
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('='),原因后面会说。

js 复制代码
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:

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

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

+

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

%

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

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

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

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

在获取参数时进行解码

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

js 复制代码
paramsObj[key] = decodeURIComponent(value);

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

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

总结

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

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

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

相关推荐
Mintopia2 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农6 分钟前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye9 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤14 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子18 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang1 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
讨厌吃蛋黄酥1 小时前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
khalil1 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录1 小时前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器