原生JS获取URL链接参数的方法有好几种，我们一起来学习一下常见的几种。
1.使用正则表达式
2.利用a标签内置方法
3.利用split分割方法
4.使用URLSearchParams方法
方法一: 正则表达式
正则表达式解释:
- ：这部分是一个捕获组，表示匹配不包含 、、 的任意字符的一个或多个，即匹配参数名部分。
- ：表示匹配参数名和参数值之间的等号。
- ：这部分也是一个捕获组，表示匹配不包含 的任意字符的一个或多个，即匹配参数值部分。
- ：表示使用全局匹配模式，即匹配目标字符串中所有符合模式的部分。
方法二： 利用a标签
a标签内置的方法能够快速且方便地获取URL参数，
它的原理主要就是利用了a标签得到一些内置属性，如href、hash、search等属性。
考虑到URL中的哈希部分，在函数中，会检查URL中的哈希部分是否存在，如果存在则将哈希值存储到参数对象中，并将属性名设置为"HASH"。这样在返回的参数对象中，如果URL中有哈希部分，就可以通过"HASH"来访问哈希值。
上段代码中先创建了一个a标签，然后就可以根据a标签的属性分别得到url的各个部分了，这其实和Vue的路由跳转获取参数有点类似。
1. 将传入的URL赋值给 `<a>` 标签的 `href` 属性的目的是利用浏览器提供的原生 API 来帮助实现 URL 参数的解析。通过将URL赋值给 `<a>` 标签的 `href` 属性，浏览器会自动解析这个URL，包括提取其中的协议、主机、路径、查询参数等各个部分，从而方便我们对这个URL进行进一步的操作。
2. 通过`link.search.substr(1)`和`link.hash.substr(1)`可以获取URL中问号后面的字符串和`#`后面的值，是因为浏览器在解析URL后会将这些信息存储在`<a>`标签对象的对应属性中。具体来说：
- `link.search` 包含了 URL 中问号后面的部分（即查询参数部分）。
- `link.hash` 包含了 URL 中`#`后面的部分（即片段部分）。
- 使用`substr(1)`是为了去掉字符串中的问号或`#`字符，只留下真正的参数内容或片段内容。
方法三： split分割法
这种方法利用了split可以以某个字符讲字符串分割为数组的特点，巧妙地将各个参数分割出来。
关于hash地址部分
在处理 URL 查询参数时，通常情况下不需要处理 hash 地址部分。
Hash 地址通常用于客户端路由或页面内导航，一般不会包含查询参数信息。
但在某些情况下，可能需要处理带有 hash 地址的 URL，例如：
1. 当需要从 URL 中提取查询参数时，如果 URL 中的查询参数部分后面紧跟着 hash 地址（如 `http://example.com/page?name=John#section2`），需要排除 hash 部分以确保正确提取查询参数。
2. 如果要监听 hash 地址的变化，并根据不同的 hash 地址执行不同的逻辑（如单页面应用路由器），则需要处理 hash 地址的改变并做出响应。 总的来说，在处理 URL 查询参数时一般不需要处理 hash 地址部分，但在特定情况下需要注意并处理。
方法四： URLSearchParams
URLSearchParams方法能够让我们非常方便的获取URL参数，但是存在一定的兼容性问题，官网的解释如下：
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。
该接口提供了非常的的方法让我们来处理URL参数，这里我们只介绍如何获取URL参数值，更加详细的使用方法大家可以参考官网。
这里我们基本上只用了两行主要代码就实现了参数的解析。需要注意的是urlSearchParams.entries()返回的是一个迭代协议iterator，所以我们需要利用Object.fromEntries()方法将把键值对列表转换为一个对象。
关于迭代协议，大家可以参考官网：迭代协议
这里介绍了四种方法来实现URL链接参数值的解析，其中使用最为广泛的应该当属split分割法。总的来说，了解和掌握这些方法可以帮助前端开发者更有效地处理URL参数，从而提升开发效率和应对面试中可能出现的相关问题。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/13439.html