快速精确地获取location.search中的各个参数值

2024-01-08 18:06| 来源: 网络整理| 查看: 265

在项目开发中，经常会遇到去获取location.search中参数的情况，有时候是获取全部，有时候是获取其中一个参数。下面我总结了三种方法，第一个之前经常用，但是有了第二个、第三个方法之后，嗯嗯，真香。目前主要用第二个或者第三个。

1、通过location.search去获取参数字符串，再进行截取转化获取。

以 http://localhost:9090/mobile/login/register?id=2f63398&mark=577962 为例

window.location.search 是‘?id=2f63398&mark=577962’

let search = window.location.search.slice(1); let params = search.split('&'); let [id, mark] = ['', ''] if (params[0].includes('id')) { id = params[0].split('=')[1] mark = params[1].split('=')[1] } else { id = params[1].split('=')[1] mark = params[0].split('=')[1] } console.log(id) // 2f63398 console.log(mark) // 577962

这个方法是能获取到search中的参数，但是有点麻烦。

2、通过 new URL()

以 http://localhost:9090/mobile/login/register?id=2f63398&mark=577962 为例

let params = new URL(location.href).searchParams; let [id, mark] = [params.get('id'), params.get('mark')]; console.log(id) // 2f63398 console.log(mark) // 577962

第二种方法和第一种方法对比，简洁了很多，也方便了很多，想获取哪个参数，直接get(参数名)。 new URL()更详细的用法，请看MDN，链接：URL_API

3、通过 new URLSearchParams()

以 http://localhost:9090/mobile/login/register?id=2f63398&mark=577962 为例

let params = new URLSearchParams(location.search); let [id, mark] = [params.get('id'), params.get('mark')]; console.log(id) // 2f63398 console.log(mark) // 577962

new URLSearchParams()更详细的用法，请看MDN，链接：URLSearchParams

3.2、通过 new URLSearchParams() 获取hash中的参数

以 https://sign-sg.com.cn/sign/index.html#/wlPage?managerName=lm&managerUm=2&manageruuId=3&authType=1,2,3&chanceId=dW5kZWZpbmVk 为例

我们的项目使用的vue框架，经常会遇到参数放在hash值后面这种情况

location.search // ''

这个时候，我们用location.search会发现得到的是一个空字符串，因为 location.search 会读取到第一个 ? 之后的内容，但是还有一点就是他只能读取 # 之前的内容。因为 # 之前没有 ? ，所以读取到的内容就是空。

小总结：因为window.location.search只能在取到“?”后面和“#”之前的内容，如果“#”之前没有“?”，search取值为空字符串。请记住，只取“?”后面和“#”之前的内容。

那么我们应该怎么用上述的方法快速获取到hash后面的参数值呢？用location.hash 方法如下，直接上代码：

// 先获取hash值 location.hash // 得到的结果如下： // #/wlPage?managerName=lm&managerUm=2&manageruuId=3&authType=1,2,3&chanceId=dW5kZWZpbmVk var searchParams1 = new URLSearchParams(location.hash.split("wlPage?")[1]); searchParams1.get('authType') // '1,2,3' searchParams1.get('managerName') // 'lm' searchParams1.get('managerUm') // '2' searchParams1.get('manageruuId') // '3'

通过上面代码我们可以发现，其实和通过location.search获取到参数值是一样的，只不过把location.search换成了location.hash 所以，我们要活学活用，不过new URLSearchParams这个方法是真好用。

从上面最后两种种方法可以看到，有更简便的api方法帮我们快速精确地获取location.search中的各个参数值。加油！

【本文地址】

公司简介

联系我们