JS获取地址栏参数的几种方法小结

在JavaScript中，获取地址栏（URL）参数是一个常见的需求，可以通过几种不同的方法来实现。以下是几种简洁且常用的方法：

### 方法一：使用正则表达式

这种方法通过正则表达式来匹配和解析URL参数。

function getQueryParam(name) {
    const search = window.location.search.substring(1);
    const regex = new RegExp(`[?&]${name}=([^&#]*)`, 'i');
    const results = regex.exec(search);
    return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null;
}

// 使用示例
console.log(getQueryParam('paramName'));

### 方法二：分割字符串

将URL的查询字符串分割成键值对数组，然后遍历找到需要的参数。

function getQueryParam(name) {
    const search = window.location.search.substring(1);
    const params = search.split('&').reduce((acc, param) => {
        const [key, value] = param.split('=');
        acc[decodeURIComponent(key)] = decodeURIComponent(value.replace(/\+/g, ' '));
        return acc;
    }, {});
    return params[name] || null;
}

// 使用示例
console.log(getQueryParam('paramName'));

### 方法三：使用URLSearchParams

如果浏览器支持`URLSearchParams`（现代浏览器通常都支持），这是获取URL参数的推荐方式，因为它既简洁又易于使用。

function getQueryParam(name) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(name);
}

// 使用示例
console.log(getQueryParam('paramName'));

### 方法比较

- **正则表达式**：灵活性强，可以处理复杂的URL结构，但代码可读性较差。

- **分割字符串**：代码相对直观，适合简单的URL解析，但效率可能不如`URLSearchParams`。

- **URLSearchParams**：现代浏览器的推荐方式，简洁、高效、易于理解和使用。

在实际开发中，建议优先使用`URLSearchParams`，因为它既简洁又符合现代Web开发的最佳实践。如果需要在不支持`URLSearchParams`的老旧浏览器上运行，可以考虑使用正则表达式或分割字符串的方法。