JS获取URL中参数值的4种方法

方法1：现代浏览器都支持 URL 和 URLSearchParams 对象，可以很方便地从URL中提取参数

// 假设当前URL为 "https://example.com/?name=John&age=30"
const url = new URL(window.location.href); 
// 或者你可以直接传入一个URL字符串
const name = url.searchParams.get('name'); // "John"
const age = url.searchParams.get('age'); // "30"
console.log(name, age);

方法2：使用正则表达式

可以使用正则表达式匹配URL参数，这种方法相对较低效且较复杂，但也可以做到。

function getQueryParam(name) {
  const regex = new RegExp('[?&]' + name + '=([^&#]*)', 'i')
  const results = regex.exec(window.location.href)
  return results ? decodeURIComponent(results[1]) : null
}
// 假设当前URL为 "https://example.com/?name=John&age=30"
const name = getQueryParam('name'); // "John"
const age = getQueryParam('age'); // "30"
console.log(name, age)

方法3：使用 split 和 reduce

可以通过 split 方法手动拆分查询参数，并用 reduce 将其转化为对象。

function getQueryParams() {    
    return window.location.search
    .substring(1) // 去掉 ?        
    .split('&') // 按 & 拆分       
    .reduce((params, param) => {            
        const [key, value] = param.split('=');            
        params[decodeURIComponent(key)] = decodeURIComponent(value || '');            
        return params;        
    }, {});
}
// 假设当前URL为 "https://example.com/?name=John&age=30"
const params = getQueryParams();
const name = params['name'];// "John"
const age = params['age']; // "30"
console.log(name, age);

方法4：使用 location.search 和自定义函数

在 location.search 上构建自己的解析函数，此方法比较简单。

function getQueryParameter(name) {
  const params = new URLSearchParams(location.search)
  return params.get(name)
}
// 假设当前URL为 "https://example.com/?name=John&age=30"
const name = getQueryParameter('name'); // "John"
const age = getQueryParameter('age'); // "30"
console.log(name, age)