前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >快速精确地获取location.search中的各个参数值

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

作者头像
VIBE
发布2023-03-16 20:18:28
1.4K0
发布2023-03-16 20:18:28
举报
文章被收录于专栏:算法与开发

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

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

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

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

代码语言:javascript
复制
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 为例

代码语言:javascript
复制
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 为例

代码语言:javascript
复制
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!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-02-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、通过location.search去获取参数字符串,再进行截取转化获取。
  • 2、通过 new URL()
  • 3、通过 new URLSearchParams()
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档