前言

在前端开发中，处理URL参数是一个常见的任务，尤其是在没有框架支持的情况下。虽然许多框架提供了方便的方法来获取URL参数，但有时我们需要依赖原生JavaScript来完成这个任务。这也是面试中经常出现的问题之一。今天让我们一起来探讨如何利用原生JavaScript来获取URL参数值。

获取方法总结

原生JS获取URL链接参数的方法有好几种，我们一起来学习一下常见的几种。

1.使用正则表达式

2.利用a标签内置方法

3.利用split分割方法

4.使用URLSearchParams方法

具体实现

方法一: 正则表达式

<code>// 利用正则表达式

let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100";

// 返回参数对象

function queryURLParams(url) {

let pattern = /(\w+)=(\w+)/ig; //定义正则表达式

let parames = {}; // 定义参数对象

// $代表整个匹配到的字符串

// $1代表第一个括号内匹配到的内容

// $2代表第二个括号内匹配到的内容

url.replace(pattern, ($, $1, $2) => {

parames[$1] = $2;

});

return parames;

}

console.log(queryURLParams(url))

这段代码使用了正则表达式/(\w+)=(\w+)/ig，用来匹配形如key=value的字符串。利用正则表达式的replace方法，从URL中提取了参数名和参数值，然后将其存储到一个对象中并返回。这样可以方便地读取和处理URL中的参数。

方法二： 利用a标签

a标签内置的方法能够快速且方便地获取URL参数，

它的原理主要就是利用了a标签得到一些内置属性，如href、hash、search等属性。

考虑到URL中的哈希部分，在函数queryURLParams(url)中，会检查URL中的哈希部分是否存在，如果存在则将哈希值存储到参数对象中，并将属性名设置为"HASH"。这样在返回的参数对象中，如果URL中有哈希部分，就可以通过"HASH"来访问哈希值。

let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig"

function queryURLParams(url) {

// 1.创建a标签

let link = document.createElement('a');

link.href = url;

let searchUrl = link.search.substr(1); // 获取问号后面字符串

let hashUrl = link.hash.substr(1); // 获取#后面的值

let obj = {}; // 声明参数对象

// 2.向对象中进行存储

hashUrl ? obj['HASH'] = hashUrl : null; // #后面是否有值

let list = searchUrl.split("&");

for (let i = 0; i < list.length; i++) {

let arr = list[i].split("=");

obj[arr[0]] = arr[1];

}

return obj;

}

console.log(queryURLParams(URL))

上段代码中先创建了一个a标签，然后就可以根据a标签的属性分别得到url的各个部分了，这其实和Vue的路由跳转获取参数有点类似。

方法三： split分割法

这种方法利用了split可以以某个字符讲字符串分割为数组的特点，巧妙地将各个参数分割出来。

function getUrlParams(url, paramName) {

// 从 URL 中提取查询参数部分

const queryString = url.split('?')[1];

// 如果没有查询参数，返回空对象

if (!queryString) {

return {};

}

// 处理带有 hash 地址的情况

const hashIndex = queryString.indexOf('#');

if (hashIndex !== -1) {

queryString = queryString.substring(0, hashIndex);

}

// 将查询参数字符串解析为键值对

const queryParams = {};

queryString.split('&').forEach(param => {

const [key, value] = param.split('=');

// 如果值已经存在，则将其转换为数组存储

if (queryParams[key]) {

if (Array.isArray(queryParams[key])) {

queryParams[key].push(decodeURIComponent(value));

} else {

queryParams[key] = [queryParams[key], decodeURIComponent(value)];

}

} else {

queryParams[key] = decodeURIComponent(value);

}

});

// 如果没有指定参数名称，则返回包含所有查询参数的对象

if (!paramName) {

return queryParams;

}

// 如果指定了参数名称

if (queryParams[paramName]) {

return queryParams[paramName];

} else {

// 参数不存在，返回空字符串

return '';

}

}

// 示例 URL

const url = 'https://example.com?name=John&age=30&name=Jane&gender=male';

const urlWithHash = 'http://xxx.com/#/operations/app?name=John&age=30&name=Jane&gender=male';

console.log(getUrlParams(url));

// 输出: { name: ['John', 'Jane'], age: '30', gender: 'male' }

console.log(getUrlParams(url, 'name'));

// 输出: ['John', 'Jane']

console.log(getUrlParams(url, 'age'));

// 输出: '30'

console.log(getUrlParams(url, 'city'));

// 输出: ''

console.log(getUrlParams(urlWithHash));

// 输出: { name: ['John', 'Jane'], age: '30', gender: 'male' }

关于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参数值，更加详细的使用方法大家可以参考官网。

let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"

function queryURLParams(URL) {

let url = URL.split("?")[1];

const urlSearchParams = new URLSearchParams(url);

const params = Object.fromEntries(urlSearchParams.entries());

return params

}

console.log(queryURLParams(URL))

这里我们基本上只用了两行主要代码就实现了参数的解析。需要注意的是urlSearchParams.entries()返回的是一个迭代协议iterator，所以我们需要利用Object.fromEntries()方法将把键值对列表转换为一个对象。

关于迭代协议，大家可以参考官网：迭代协议

总结：

这里介绍了四种方法来实现URL链接参数值的解析，其中使用最为广泛的应该当属split分割法。总的来说，了解和掌握这些方法可以帮助前端开发者更有效地处理URL参数，从而提升开发效率和应对面试中可能出现的相关问题。