糯麦 NurMai

400-158-5662

糯麦科技

/

新闻资讯

/

技术讨论

/

js中使用URLSearchParams获取url参数

js中使用URLSearchParams获取url参数

原创 新闻资讯

于 2023-11-01 15:16:20 发布

16817 浏览

js中的URLSearchParams是在ECMAScript 2015(ES6)中引入的,可以简化对URL中参数的操作。


new URLSearchParams(name1=value1&name2=value2&...&namen=valuen)返回值有多个操作方法:

toString()
get(name)
getAll(name)
has(name)
append(name, value)
set(name, value)
delete(name)
keys()、values()、entries()

下面简单一一介绍一下这些方法。


1.toString()打印

params = new URLSearchParams('?color=red&name=apple')
params2 = new URLSearchParams('color=red&name=apple')
params.toString() // 'color=red&name=apple'
params2.toString() //'color=red&name=apple'

params = new URLSearchParams('?color=red&tast=%E5%A5%BD&test=测试&test再试=再次测试')
params.toString()
输出:
'color=red&tast=%E5%A5%BD&test=%E6%B5%8B%E8%AF%95&test%E5%86%8D%E8%AF%95=%E5%86%8D%E6%AC%A1%E6%B5%8B%E8%AF%95'


2.get(name)获取参数值:


有?:

params = new URLSearchParams('?color=red&name=apple')
params.get('color') // red
params.get('name') // apple

无?:

params = new URLSearchParams('color=red&name=apple')
params.get('color') // red
params.get('name') // apple

参数或参数值中有编码:

encodeURIComponent("好") // %E5%A5%BD
decodeURIComponent("%E5%A5%BD") // 好
params = new URLSearchParams('color=red&name=apple&tast=%E5%A5%BD')
params.get('tast') // 好

encodeURIComponent("test再试") // test%E5%86%8D%E8%AF%95
encodeURIComponent("再次测试") // %E5%86%8D%E6%AC%A1%E6%B5%8B%E8%AF%95
params = new URLSearchParams('color=red&test%E5%86%8D%E8%AF%95=%E5%86%8D%E6%AC%A1%E6%B5%8B%E8%AF%95')
params.get('test再试') // 再次测试
params.get('test%E5%86%8D%E8%AF%95') // null

有多个color:

params = new URLSearchParams('color=bule&color=red&name=apple')
params.get('color') // blue

有多个name:

params = new URLSearchParams('name=banana&color=red&name=apple')
params.get('name') // banana


3.getAll(name)获取所有对应名称的参数值

params = new URLSearchParams('color=red&name=apple')
params.getAll('color') // ['red']

有多个color:

params = new URLSearchParams('color=bule&color=red&name=apple')
params.get('color') // blue
params.getAll('color') // ['bule', 'red']


4.has(name)判断是否存在指定名称参数

params = new URLSearchParams('color=red&name=apple')
params.has('color') // true
params.has('color2') // false


5.append(name, value)向url中添加指定参数和对应值

params = new URLSearchParams('color=red&name=apple')
params.append('id', '123')
params.toString() // 'color=red&name=apple&id=123'

添加已有的参数:

params = new URLSearchParams('color=red&name=apple')
params.append('name', '123')
params.toString() // 'color=red&name=apple&name=123'


6.set(name, value)设置url中指定参数值,参数不存在时添加参数

params = new URLSearchParams('color=red&name=apple')
params.set('id', '123')
params.toString() // 'color=red&name=apple&id=123'
params.set('color', 'blue')
params.toString() // 'color=blue&name=apple&id=123'

有多个color:

params = new URLSearchParams('color=bule&color=red&name=apple')
params.toString() // 'color=bule&color=red&name=apple'
params.set('color', 'yellow') 
params.toString() // 'color=yellow&name=apple'


7.delete(name)删除指定参数

params = new URLSearchParams('color=red&name=apple')
params.delete('color222')
params.toString() // 'color=red&name=apple'

params.delete('color')
params.toString() // 'name=apple'

params = new URLSearchParams('color=bule&color=red&name=apple&color=yellow')
params.delete('color')
params.toString() // 'name=apple'

params = new URLSearchParams('color=bule&color=red&name=apple&color=yellow')
params.delete('name')
params.toString() // 'color=bule&color=red&color=yellow'
params.delete('color')
params.toString() // ''


8.keys()可用于遍历所有参数名、values()可用于遍历所有值、entries()可用于遍历所有键值对:

params = new URLSearchParams('color=bule&color=red&name=apple&tast=good')
for (const key of params.keys()) {
  console.log(key)
}
输出:
color
color
name
tast

for (const value of params.values()) {
  console.log(value) 
}
输出:
bule
red
apple
good

for (const [key, value] of params.entries()) {
  console.log(key+"="+value) 
}
输出:
color=bule
color=red
name=apple
tast=good

URLSearchParams对于旧版浏览器不太兼容,使用时要注意,且URLSearchParams已经自动对参数和参数值编码进行了处理,不用额外进行处理了~

js

web前端

网站开发

网站建设

阅读排行

  • 1. 几行代码就能实现Html大转盘抽奖

    大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。

    查看详情
  • 2. 浙江省同区域公司地址变更详细流程

    提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)

    查看详情
  • 3. 微信支付商户申请接入流程

    微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。

    查看详情
  • 4. 阿里云域名ICP网络备案流程

    根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。

    查看详情
  • 5. 微信小程序申请注册流程

    微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。

    查看详情