JavaScript中如何获取URL参数？

在前端开发过程中，我们经常会遇到需要获取URL中携带的参数的场景，比如页面跳转时传递的用户ID、筛选条件等，都可以通过URL参数进行传递。那么JavaScript中如何获取URL参数呢？下面给大家介绍几种常用的实现方式。

方法一：使用location对象手动解析

传统的获取URL参数方式是通过location.search获取URL中?后面的参数字符串，再手动进行分割处理。这种方式的兼容性很好，适合需要兼容老版本浏览器的场景。

// 获取URL参数的函数
function getUrlParamByLocation(paramName) {
    // 获取?后面的参数字符串，比如?name=test&age=18
    const searchStr = location.search.substring(1);
    if (!searchStr) {
        return null;
    }
    // 按&分割得到每个参数键值对
    const paramArr = searchStr.split('&');
    for (let i = 0; i < paramArr.length; i++) {
        const item = paramArr[i];
        const [key, value] = item.split('=');
        // 解码URI组件，处理中文或特殊字符
        if (decodeURIComponent(key) === paramName) {
            return decodeURIComponent(value);
        }
    }
    return null;
}
// 调用示例，获取name参数
const name = getUrlParamByLocation('name');
console.log(name);

方法二：使用正则匹配获取参数

如果不想手动分割字符串，也可以通过正则匹配的方式快速提取指定参数的值，这种方式代码更简洁，适合只需要获取单个参数的场景。

function getUrlParamByReg(paramName) {
    // 正则匹配指定参数，支持参数在URL任意位置
    const reg = new RegExp('(^|&)' + paramName + '=([^&]*)(&|$)', 'i');
    // 获取search字符串，前面加&方便匹配开头的情况
    const searchStr = location.search.substring(1);
    const matchResult = searchStr.match(reg);
    if (matchResult) {
        // 解码返回参数值
        return decodeURIComponent(matchResult[2]);
    }
    return null;
}
// 调用示例，获取age参数
const age = getUrlParamByReg('age');
console.log(age);

方法三：使用URLSearchParams API

现代浏览器提供了原生的URLSearchParams API，专门用于解析和处理URL查询参数，使用起来非常方便，不需要手动处理字符串分割和编码问题。

function getUrlParamBySearchParams(paramName) {
    // 创建URLSearchParams实例，传入location.search
    const searchParams = new URLSearchParams(location.search);
    // 直接通过get方法获取指定参数，会自动处理解码
    return searchParams.get(paramName);
}
// 调用示例，获取id参数
const id = getUrlParamBySearchParams('id');
console.log(id);

如果需要获取所有URL参数，也可以遍历URLSearchParams对象：

function getAllUrlParams() {
    const searchParams = new URLSearchParams(location.search);
    const paramsObj = {};
    // 遍历所有参数键值对
    for (const [key, value] of searchParams.entries()) {
        paramsObj[key] = value;
    }
    return paramsObj;
}
// 获取所有参数
const allParams = getAllUrlParams();
console.log(allParams);

不同方法对比

下面通过表格对比三种方法的优缺点，方便开发者根据场景选择：

注意事项

• URL参数如果存在中文或特殊字符，传递时通常会经过encodeURIComponent编码，获取时需要通过decodeURIComponent解码，除了URLSearchParams会自动处理解码，其他方法都需要手动解码。
• 如果URL中没有对应的参数，上述方法都会返回null或者undefined，使用时需要做空值判断，避免出现报错。
• 如果参数值中包含=或者&等特殊字符，手动解析的方式可能会出现问题，这种情况更推荐使用URLSearchParams API。

JavaScriptURL参数URLSearchParamslocation对象正则匹配修改时间：2026-05-29 22:53:41