在JavaScript中获取地址栏(URL)参数值有多种方法,以下介绍两种常用的方法:
URLSearchParams
URLSearchParams
接口提供了方便的方法来处理URL中的查询参数。
示例代码:
// 假设当前URL为 https://example.com/page?name=John&age=30
// 获取查询参数字符串
const queryString = window.location.search;
// 创建URLSearchParams对象
const urlParams = new URLSearchParams(queryString);
// 获取特定参数值
const name = urlParams.get('name'); // "John"
const age = urlParams.get('age'); // "30"
console.log(`Name: ${name}, Age: ${age}`);
优势:
应用场景:
通过正则表达式手动解析查询字符串,适用于不支持URLSearchParams
的旧浏览器。
示例代码:
// 假设当前URL为 https://example.com/page?name=John&age=30
function getQueryParamByName(name) {
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
const results = regex.exec(window.location.href);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
const name = getQueryParamByName('name'); // "John"
const age = getQueryParamByName('age'); // "30"
console.log(`Name: ${name}, Age: ${age}`);
优势:
应用场景:
URLSearchParams
的环境中获取URL参数。decodeURIComponent
可以正确解码参数值。urlParams.getAll('paramName')
获取所有值。获取地址栏参数值在单页应用(SPA)、动态页面加载、用户行为跟踪等场景中非常常见。使用URLSearchParams
方法更为简洁和现代化,而正则表达式方法则提供了更高的兼容性和灵活性。根据具体需求选择合适的方法即可。
领取专属 10元无门槛券
手把手带您无忧上云