方法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);