URLSearchParams
时间: 2023-11-17 14:56:25 浏览: 45
URLSearchParams 是一个 JavaScript 内置对象,用于处理 URL 查询参数。它提供了一些方法来获取、设置、添加和删除查询参数。你可以使用它来解析 URL 查询参数,也可以使用它来构建 URL 查询参数。
例如,假设我们有一个 URL:https://example.com/search?q=JavaScript&page=2,我们可以使用 URLSearchParams 来获取查询参数:
```javascript
const params = new URLSearchParams(window.location.search);
console.log(params.get('q')); // 输出 "JavaScript"
console.log(params.get('page')); // 输出 "2"
```
我们还可以使用 URLSearchParams 来构建查询参数:
```javascript
const params = new URLSearchParams();
params.append('q', 'JavaScript');
params.append('page', '2');
console.log(params.toString()); // 输出 "q=JavaScript&page=2"
```
相关问题
urlsearchparams
URLSearchParams是一个API,用于读取和操作URL查询字符串。它提供了一系列方法,例如get()、append()、delete()等,可以用来获取、添加、删除查询参数。这个API主要用于处理URL查询字符串,与querystring模块的功能类似,但querystring模块更通用,允许使用自定义的分隔符。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [URLSearchParams](https://blog.csdn.net/mu0nian/article/details/123730474)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [URLSearchParams 解析参数](https://blog.csdn.net/m0_55960697/article/details/124488782)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
new URLSearchParams
`URLSearchParams` 是一个 JavaScript 内置的对象,用于处理 URL 查询参数。它提供了一组方法来解析、操作和构建 URL 查询参数。
使用 `new URLSearchParams()` 构造函数可以创建一个新的 `URLSearchParams` 对象。你可以将 URL 查询字符串作为参数传递给构造函数,也可以不传递任何参数。
以下是一些常用的 `URLSearchParams` 方法:
1. `append(name, value)`: 向查询参数中添加一个新的键值对。
2. `delete(name)`: 从查询参数中删除指定名称的键值对。
3. `get(name)`: 获取指定名称的第一个值。
4. `getAll(name)`: 获取指定名称的所有值,返回一个数组。
5. `has(name)`: 检查查询参数中是否存在指定名称的键。
6. `set(name, value)`: 设置指定名称的值,如果该名称已存在,则更新其值。
7. `sort()`: 对查询参数按照名称进行排序。
下面是一个示例代码,演示了如何使用 `URLSearchParams` 对象:
```javascript
const paramsString = 'foo=bar&baz=qux';
const searchParams = new URLSearchParams(paramsString);
searchParams.append('quux', 'corge');
searchParams.delete('baz');
console.log(searchParams.toString()); // 输出:'foo=bar&quux=corge'
console.log(searchParams.get('foo')); // 输出:'bar'
console.log(searchParams.getAll('foo')); // 输出:['bar']
console.log(searchParams.has('baz')); // 输出:false
searchParams.set('foo', 'new value');
console.log(searchParams.toString()); // 输出:'foo=new%20value&quux=corge'
searchParams.sort();
console.log(searchParams.toString()); // 输出:'foo=new%20value&quux=corge'
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)