在 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