new urlSearchParams

URLSearchParams 构造函数有很多实用的方法来处理 URL 的查询字符串

URLSearchParams构造函数 通过new实例化,并传入查询的字符串

前提 必须传入以下格式的字符串

const formatParam = '?id=1234&age=18&id=789'  //一般配合location.search使用
const params = new URLSearchParams(formatParam) 

URLSearchParams上的方法

  • has() 查询指定键名是否存在 返回一个Boolean值
params.has('id') // true
  • get() 获取指定搜索参数的第一个值
params.get('id') // '1234'
  • getAll()获取指定搜索参数的所有值,返回是一个数组
params.getAll('id') // ['1234','789']
  • toString() 返回搜索参数组成的字符串,可直接使用在URL上。
params.toString() // 'id=1234&age=18&id=789' 如果url上含有中文字符 需要进行decode处理
  • append() 插入一个指定的键/值对作为新的搜索参数
params.append('name','jack') // ?id=1234&age=18&id=789&name=jack
  • delete() 从搜索参数列表里删除指定的搜索参数及其对应的值,所有符合条件的都会被删除。
params.delete('id')
params.toString()  // age=18
  • set() 设置一个搜索参数的新值,如果原来有多个值将删除其他所有的值。
params.set('id','000')
params.toString()  //id=000&age=18
  • entries() 返回一个iterator,允许遍历该对象中包含的所有键/值对 可以使用for of 进行循环
  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
`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' ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值