前言 -- 作为一个前端开发，我们很多时候都需要对URL进行操作和处理，最常见的一种就是获取URL链接中携带的参数值了。使用框架开发的小伙伴可能会觉得这很简单，因为框架提供了很多方法让我们方便的获取URL链接携带的参数。但是有些时候我们不能依赖框架，需要我们使用原生JS去获取参数，这也是面试中经常遇到的一道题。今天我们就手撕代码，利用原生JS去获取URL链接参数值。 1\. 获取方式总结 ---------- 利用原生JS获取URL链接参数的方法也有好几种，今天我们依次来讲解常见的几种： 1. 通过正则匹配的方式 2. 利用a标签内置方法 3. 利用split方法分割法 4. 使用URLSearchParams方法 2\. 具体实现方法 ---------- ### 2.1 正则匹配法这是非常中规中举的一种方法，重点是要求我们要懂正则表达式。 **代码如下：** 上段代码中重点是正则表达式的定义以及replace方法的使用,其中$、$1、$2分别代表name=elephant、name、elephant，以此类推。replace结合正则更加详细的使用方法可以自行下去学习。 **实现效果：** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78654edbc64d424f9bd37b375584c6dd~tplv-k3u1fbpfcp-zoom-1.image) ### 2.2 利用a标签这种方法较少人使用，因为毕竟有点黑科技的意思在里面。它的原理主要就是利用了a标签得到一些内置属性，如href、hash、search等属性。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8fc6d5ddb44748f9aac1026fbe4f10d0~tplv-k3u1fbpfcp-zoom-1.image) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2e08c53e2914f089292a66ec5017b22~tplv-k3u1fbpfcp-zoom-1.image) **代码如下：** 上段代码中先创建了一个a标签，然后就可以根据a标签的属性分别得到url的各个部分了，这其实和Vue的路由跳转获取参数有点类似。 **实现效果：** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa0018e35bf54a80939076361e11ea2d~tplv-k3u1fbpfcp-zoom-1.image) ### 2.3 split分割法该种方法利用了split可以以某个字符讲字符串分割为数组的特点，巧妙地将各个参数分割出来。 **代码如下：** 上传代码中如果在实际项目中，可以直接利用location.search获取“?”后面的字符串，这里为了方便演示，所以利用split分割了以下。 **实现效果：** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa970f341bb64919b6bd0b18e6b80054~tplv-k3u1fbpfcp-zoom-1.image) ### 2.4 URLSearchParams方法 URLSearchParams方法能够让我们非常方便的获取URL参数，但是存在一定的兼容性问题，官网的解释如下： > URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。该接口提供了非常的的方法让我们来处理URL参数，这里我们只介绍如何获取URL参数值，更加详细的使用方法大家可以参考官网。 **代码如下：** 这里我们基本上只用了两行主要代码就实现了参数的解析。需要注意的是urlSearchParams.entries()返回的是一个迭代协议iterator，所以我们需要利用Object.fromEntries()方法将把键值对列表转换为一个对象。关于迭代协议，大家可以参考官网：[迭代协议](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols) **实现效果：** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e65fa2e0e8c4e65b8f7c510f016720d~tplv-k3u1fbpfcp-zoom-1.image) 兼容性： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/878adaf8814942faa78826830b59b9de~tplv-k3u1fbpfcp-zoom-1.image) 可以看到我们这个接口不兼容万恶之源的IE。总结 -- 这里介绍了四种方法来实现URL链接参数值的解析，其中使用最为广泛的应该当属split分割法。urlSearchParams 作为后起之秀，也逐渐被大家认可，也有很多方法让它兼容IE。