怎么获取 URL 中的参数?

在 Web 开发中,我们经常需要从 URL 中获取参数。比如,我们需要根据不同的参数来展示不同的内容或者执行不同的操作等等,从URL中获取参数的重要性就不用我多描述了。那么,在 JavaScript 中,我们应该如何获取 URL 中的参数呢?
假设我们有以下 URL:

https://www.webxiaoliu.com?name=xiaoliu&age=18&gender=1

我们可以通过以下步骤来获取 URL 中的参数:

1. 使用 window.location.search

const search = window.location.search; //?name=xiaoliu&age=18&gender=1

2.使用 URLSearchParams 构造函数

params = new URLSearchParams(params); 

3. 使用 get() 方法来获取指定参数的值。

 const name = params.get('name'); // "xiaoliu"  
 const age = params.get('age'); // "18"  
 const gender = params.get('gender'); // "1"  

4.函数封装

function getUrlParams(url, options) {
            const search = url.search;
            const params = new URLSearchParams(search);
            const result = {};
            Object.keys(options).forEach(key => {
                const defaultValue = options[key];
                result[key] = params.get(key) || defaultValue;
            });
            return result;
 }
//使用
 const { name, age, gender } = getUrlParams(window.location, { name: '张三', age: 18, gender: 1 })
console.log(name, age, gender);//xiaoliu ,18, 1
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值