js中使用URLSearchParams获取url参数
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. 微信小程序申请注册流程
微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。
查看详情