怎样通过js脚本获取url参数

在前端开发的实际场景中，经常需要通过js脚本获取url参数来实现对应的业务逻辑，比如根据url中的用户ID加载对应的用户数据，或者根据活动标识展示不同的活动页面内容。url参数通常拼接在地址栏的问号之后，多个参数之间用&符号分隔，值的格式可能存在编码情况，需要合理的方式才能准确解析。

一、使用URLSearchParams API获取参数

URLSearchParams是浏览器原生提供的用于解析url查询字符串的API，兼容性覆盖大部分现代浏览器，使用起来非常简单，不需要自己处理字符串分割和编码转换的逻辑。

首先可以通过window.location.search获取当前页面url中的查询字符串部分，然后实例化URLSearchParams对象，调用对应的方法获取参数。

// 假设当前url为 https://www.ipipp.com/page?name=张三&age=20&hobby=篮球&hobby=足球
// 获取查询字符串
const queryString = window.location.search;
// 实例化URLSearchParams对象
const params = new URLSearchParams(queryString);

// 获取单个参数
const name = params.get('name');
console.log(name); // 输出 张三，自动处理了解码

// 获取所有参数键值对
const allParams = {};
params.forEach((value, key) => {
    // 处理多值参数，比如hobby有两个值
    if (allParams[key]) {
        if (Array.isArray(allParams[key])) {
            allParams[key].push(value);
        } else {
            allParams[key] = [allParams[key], value];
        }
    } else {
        allParams[key] = value;
    }
});
console.log(allParams); // 输出 {name: '张三', age: '20', hobby: ['篮球', '足球']}

// 判断参数是否存在
const hasAge = params.has('age');
console.log(hasAge); // 输出 true

这种方法的优点是代码简洁，原生支持参数解码，不需要额外处理特殊字符，但是不支持IE浏览器，如果需要兼容IE场景，需要选择其他方法。

二、通过字符串分割方式获取参数

如果需要兼容更老的浏览器，或者不想依赖原生API，可以通过手动分割查询字符串的方式获取参数，这种方式兼容性更好，但是需要自己处理编码和边界情况。

function getUrlParamsBySplit() {
    const queryString = window.location.search.slice(1); // 去掉开头的?
    if (!queryString) return {};
    const params = {};
    // 按&分割参数对
    const paramPairs = queryString.split('&');
    paramPairs.forEach(pair => {
        // 按=分割键和值
        const [key, value] = pair.split('=');
        if (!key) return;
        // 解码键和值，处理特殊字符
        const decodedKey = decodeURIComponent(key);
        const decodedValue = value ? decodeURIComponent(value) : '';
        // 处理多值参数
        if (params[decodedKey]) {
            if (Array.isArray(params[decodedKey])) {
                params[decodedKey].push(decodedValue);
            } else {
                params[decodedKey] = [params[decodedKey], decodedValue];
            }
        } else {
            params[decodedKey] = decodedValue;
        }
    });
    return params;
}

// 使用示例
const params = getUrlParamsBySplit();
console.log(params);

这种方法的兼容性很好，几乎支持所有浏览器，但是需要注意如果参数值中包含=或者&符号，这种简单的分割方式会出现解析错误，需要更复杂的逻辑处理。

三、使用正则表达式匹配获取参数

正则表达式可以更灵活地匹配url中的参数，能够处理参数值中包含特殊字符的场景，适合对解析准确性要求较高的场景。

function getUrlParamsByRegex() {
    const queryString = window.location.search;
    const params = {};
    // 正则匹配 key=value 格式，value可以包含除了&之外的任意字符
    const regex = /([^?&]+)=([^&]*)/g;
    let match;
    while ((match = regex.exec(queryString)) !== null) {
        const key = decodeURIComponent(match[1]);
        const value = decodeURIComponent(match[2]);
        // 处理多值参数
        if (params[key]) {
            if (Array.isArray(params[key])) {
                params[key].push(value);
            } else {
                params[key] = [params[key], value];
            }
        } else {
            params[key] = value;
        }
    }
    return params;
}

// 使用示例
const params = getUrlParamsByRegex();
console.log(params);

这种正则方式可以正确匹配大部分参数格式，但是如果参数值中包含&符号，还是会出现解析错误，实际使用中需要根据参数的规则选择合适的解析方式。

四、常见问题处理

1. 参数编码问题

url中的中文、空格等特殊字符会被编码，比如空格会变成%20，中文会被编码成对应的百分号序列，所以获取参数后一定要使用decodeURIComponent进行解码，否则会得到乱码内容。

2. 多值参数处理

同一个参数可能出现多次，比如?hobby=篮球&hobby=足球，这种情况下需要根据业务需求决定是取第一个值、最后一个值还是保存为数组，上面的示例中都做了数组兼容处理。

3. hash中的参数获取

如果参数是拼接在hash部分的，比如https://www.ipipp.com/page#name=张三&age=20，可以通过window.location.hash获取hash部分，再按照上面的方式解析即可。

// 获取hash中的参数
function getHashParams() {
    const hash = window.location.hash.slice(1); // 去掉开头的#
    if (!hash) return {};
    const params = {};
    const regex = /([^?&]+)=([^&]*)/g;
    let match;
    while ((match = regex.exec(hash)) !== null) {
        const key = decodeURIComponent(match[1]);
        const value = decodeURIComponent(match[2]);
        if (params[key]) {
            if (Array.isArray(params[key])) {
                params[key].push(value);
            } else {
                params[key] = [params[key], value];
            }
        } else {
            params[key] = value;
        }
    }
    return params;
}

五、总结

不同的js获取url参数的方法各有适用场景，现代浏览器优先使用URLSearchParams API，代码简洁且不易出错；需要兼容老浏览器可以选择字符串分割或者正则表达式的方式，但是要注意特殊字符的处理。实际开发中可以根据项目的兼容性要求和参数规则选择合适的方法，也可以封装一个通用的参数解析函数，适配不同的场景需求。

jsURL参数获取URLSearchParams正则表达式参数解析修改时间：2026-07-07 00:33:41