JavaScript技巧：提取URL地址栏的参数

博主：小蓝
发布时间：2024 年 01 月 27 日
378 次浏览
暂无评论
2217字数
分类： Linux 技术杂烩

在JavaScript中，提取URL地址栏的参数是一项常见且实用的技巧。它可以用于多种场景，比如读取页面请求参数、进行页面跳转时的参数传递等。![](https://www.8kiz.cn/usr/uploads/2024/01/3371065935.png)以下是详细的方法和步骤：

### 方法一：使用原生JavaScript

1. **获取整个查询字符串**：首先，从URL中获取整个查询字符串部分。这通常是URL中 `?`后面的部分。你可以使用 `window.location.search`来实现这一点。

```javascript
   var queryString = window.location.search;
   ```
2. **处理查询字符串**：查询字符串是以 `&`符号分隔的键值对。首先，我们需要去掉字符串的第一个字符（通常是 `?`符号），然后使用 `split('&')`方法将其分割成键值对数组。

```javascript
   var queries = queryString.substring(1).split("&");
   ```
3. **提取参数**：遍历这个数组，使用 `split('=')`进一步分割每个键值对，然后将它们存储到一个对象中。

```javascript
   var params = {};
   queries.forEach(function(query){
      var pair = query.split('=');
      params[pair[0]] = decodeURIComponent(pair[1] || "");
   });
   ```
4. **使用参数**：现在，所有的URL参数都存储在 `params`对象中，你可以按照需要访问它们。

```javascript
   var myParam = params['myParam']; // 获取名为'myParam'的参数
   ```

### 方法二：使用URLSearchParams API

对于支持现代JavaScript的浏览器，你可以使用 `URLSearchParams` API，这是一个更简单、更直观的方法。

1. **创建URLSearchParams对象**：直接使用 `new URLSearchParams()`，传入 `window.location.search`。

```javascript
   var searchParams = new URLSearchParams(window.location.search);
   ```
2. **提取参数**：使用 `get()`方法可以直接获取指定名称的参数值。

```javascript
   var myParam = searchParams.get('myParam'); // 获取名为'myParam'的参数
   ```

### 实际应用

在实际应用中，你可能需要根据业务逻辑进行错误处理，比如参数不存在或参数值不符合预期等情况。同时，这些方法也可以根据需要进行封装，以提高代码的复用性和可读性。

### 注意事项

- 对于一些特殊字符，URL参数可能会进行编码。使用 `decodeURIComponent`函数可以确保这些参数值被正确解码。
- `URLSearchParams` API在一些旧版浏览器中不被支持，因此如果你需要兼容这些浏览器，建议使用第一种方法。

这两种方法各有优劣，但都是实现该功能的有效手段，你可以根据具体需求和浏览器兼容性选择合适的方法。

#### [云服务器/高防CDN推荐](https://www.tsyvps.com/)

#### [蓝易云](https://www.tsyvps.com/)国内/海外高防云服务器推荐

<div class="inner-content" >
<p class="inser-title">蓝易云-五网CN2服务器【点我购买】</p>
<div class="inster-summary text-muted">
<span style='color: red;'>蓝易云采用KVM高性能架构，稳定可靠，安全无忧！<br>蓝易云服务器真实CN2回国线路，不伪造，只做高质量海外服务器。</span>
</div>
</div>
</a>

</div>

</div>

---

**<span style='color:#000000'>海外免备案云服务器链接：[www.tsyvps.com](https://www.tsyvps.com)</span>**

**<span style='color:#000000'>蓝易云安全企业级高防CDN：[www.tsycdn.com](https://www.tsycdn.com)</span>**

**<span style='color:#DC143C'>持有增值电信营业许可证：B1-20222080【资质齐全】</span>**

**<span style='color:#DC143C'>蓝易云香港五网CN2 GIA/GT精品网络服务器。拒绝绕路，拒绝不稳定。</span>**