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

时清云
2,488 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

在项目开发中，经常会遇到去获取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

第二种方法使用了new URL()，URL API 是URL 标准的组件，new URL()更详细的用法，请看MDN，链接：URL_API。和第一种方法对比，简洁了很多，也方便了很多，想获取哪个参数，直接使用get(参数名)获取，nice！不过还有一个更简洁的方法，请看第三种方法。

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()之后直接使用get(参数名)获取，也不用再像第二种方法需要后面加上searchParams方法了，所以综上来看，第三种方法是最简便的。

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

以上就是获取location.search中的各个参数值的方法，从最后两种方法可以看到，有更简便的api方法帮我们快速精确地获取location.search中的各个参数值，再也不用自己写判断了。踪上来看，第三种方法是最简便的，赶紧使用起来吧。

这是我之前发表在其他平台上的原创文章。

不以物喜不以己悲。

我们下篇文章再见！

avatar
文章
阅读
粉丝