正文：

在前端开发中，经常需要操作URL参数来实现页面跳转、数据传递等功能。掌握JavaScript对URL参数的获取和修改方法，是每个开发者必备的技能。本文将详细介绍几种常见的实现方式，并提供代码示例。

1. 获取URL参数

方法1：使用URLSearchParams

现代浏览器提供了URLSearchParams API，可以方便地解析和操作URL参数。

// 获取当前URL的查询参数
const urlParams = new URLSearchParams(window.location.search);

// 获取单个参数值
const id = urlParams.get('id'); // 例如：?id=123 → "123"
const name = urlParams.get('name'); // 如果不存在则返回null

// 获取所有参数
for (const [key, value] of urlParams.entries()) {
    console.log(`${key}: ${value}`);
}

URLSearchParams 的优势在于语法简洁，支持遍历参数，并且可以直接修改参数（后续会介绍）。

方法2：正则匹配提取

如果不考虑兼容性，可以使用正则表达式快速提取参数：

function getParam(name) {
    const regex = new RegExp(`[?&]${name}=([^&]*)`);
    const match = window.location.search.match(regex);
    return match ? decodeURIComponent(match[1]) : null;
}

const userId = getParam('user'); // 例如：?user=admin → "admin"

这种方法适合简单场景，但缺乏对复杂参数（如多值参数）的支持。

2. 修改URL参数

方法1：使用URLSearchParams修改

通过URLSearchParams可以动态添加、删除或修改参数，然后通过history.pushState更新URL而不刷新页面：

// 添加或修改参数
const params = new URLSearchParams(window.location.search);
params.set('page', '2'); // 修改page参数为2
params.delete('sort'); // 删除sort参数

// 生成新URL并更新浏览器地址栏
const newUrl = `${window.location.pathname}?${params.toString()}`;
history.pushState({}, '', newUrl);

方法2：手动拼接URL

如果项目需要兼容旧浏览器，可以手动拼接参数：

function updateParam(key, value) {
    const params = new URLSearchParams(window.location.search);
    params.set(key, value);
    window.location.search = params.toString();
}

updateParam('lang', 'en'); // 例如：当前URL添加或修改lang=en

3. 完整工具函数示例

以下是一个综合工具函数，支持获取、设置和删除参数：

class URLUtils {
    static getParam(key) {
        const params = new URLSearchParams(window.location.search);
        return params.get(key);
    }

    static setParam(key, value) {
        const params = new URLSearchParams(window.location.search);
        params.set(key, value);
        window.history.pushState({}, '', `${window.location.pathname}?${params}`);
    }

    static removeParam(key) {
        const params = new URLSearchParams(window.location.search);
        params.delete(key);
        window.history.pushState({}, '', `${window.location.pathname}?${params}`);
    }
}

// 使用示例
URLUtils.setParam('theme', 'dark'); // 设置theme参数
console.log(URLUtils.getParam('theme')); // 输出"dark"

总结

• 推荐使用URLSearchParams：现代API，支持链式操作，代码更简洁。
• 兼容性处理：旧项目可通过正则或字符串拼接实现类似功能。
• 无刷新更新URL：结合history.pushState可实现SPA（单页应用）的路由控制。

通过灵活运用这些方法，开发者可以轻松应对URL参数相关的需求，提升用户体验和代码可维护性。