URLSearchParams生成和解析URL或者参数字符串
2021-02-19 22:19
标签：for pen ati oca end url str 返回 save 开发项目的过程中，可能需要解析和生成相应的URL，使用URLSearchParams可以更快的去生成或者解析。 首先需要npm install个url-search-params-polyfill包 添加完成之后，将其引入到项目中。 set的格式为set（参数名，值），设置参数字符串以及URL代码如下 get的格式为get（参数名），代码如下 has的格式为has（参数名），返回的是boolean类型，代码如下 在开发过程中，可能需要使用url传递一个数组参数，比如http://localhost:3000/?arr=[1,2,3]，但是在推荐的形式是：http://localhost:3000/?arr=1&&arr=2&&arr=3，这种情况就可以使用append来添加相同的参数，使用getAll来获取这个参数，获取后自动转化为数组类型。 append的格式为append（参数名，值），getAll的格式为getAll（参数名），具体代码如下 常用的大概就是这几个，还有delete，sort，foreach，keys，values，for of等，具体的可以参考一下原文https://www.npmjs.com/package/url-search-params-polyfill。 URLSearchParams生成和解析URL或者参数字符串 标签：for pen ati oca end url str 返回 save 原文地址：https://www.cnblogs.com/minorf/p/12922779.html一、添加URLSearchParams
npm install url-search-params-polyfill --save
import ‘url-search-params-polyfill‘;
二、使用URLSearchParams
1、设置参数set
let search = new URLSearchParams()
search.set(‘test‘, ‘测试set‘)
search.set(‘type‘, ‘1‘)
let searchUrl = new URLSearchParams(window.location.href)
searchUrl.set(‘urlTest‘, ‘测试set‘)
searchUrl.set(‘urlType‘, ‘2‘)
console.log(‘输出结果：‘, search.toString()) //输出结果： test=%E6%B5%8B%E8%AF%95set&type=1
console.log(‘URL输出结果：‘, searchUrl.toString()) //URL输出结果： http%3A%2F%2Flocalhost%3A3000%2F=&urlTest=%E6%B5%8B%E8%AF%95set&urlType=2
2、获取参数值get
console.log(search.get(‘test‘)) //输出结果：测试set
console.log(searchUrl.get(‘urlType‘)) //URL输出结果：2
3、判断是否存在某参数has
console.log(search.has(‘type‘)) //输出结果：true
console.log(searchUrl.has(‘test‘)) //URL输出结果：false
4、append和getAll
search.append(‘type‘, ‘10‘)
searchUrl.append(‘urlType‘, ‘20‘)
console.log(search.getAll(‘type‘)) //输出结果：["1", "10"]
console.log(searchUrl.getAll(‘urlType‘)) //URL输出结果：["2", "20"]
文章标题：URLSearchParams生成和解析URL或者参数字符串
文章链接：http://soscw.com/essay/57722.html