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

浅浅的花香味﹌ 2023-09-25 15:46 13阅读 0赞

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

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

————————————————  
版权声明：本文为CSDN博主「时清云」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/xiaolinlife/article/details/113642938

[URL_API]: https://developer.mozilla.org/zh-CN/docs/Web/API/URL_API
[URLSearchParams]: https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams