URLSearchParams(鲜为人知处理URL地址的技能)
最近学习中无意发现url新处理方式,看到之后十分感兴趣就整理了一下。
URLSearchParams
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。参照
URLSearchParams() 构造器创建并返回一个新的URLSearchParams 对象。 开头的'?' 字符会被忽略。
方法
append(name,value)
@function 插入一个指定的键/值对作为新的搜索参数。
@param name 需要插入搜索参数的键名
@param value 需要插入参数的值
const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
searchParams.append('c',3);
console.log(searchParams.toString())
运行结果
// a=1&b=2&c=3
delete(name)
@function 删除指定名称的所有搜索参数。
@param name 需要删除的键值名称
const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
searchParams.delete('b');
console.log(searchParams.toString())
运行结果
// a=1
entries()
@function 返回一个iterator可以遍历所有键/值对的对象。
@return {iterator}
const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
const paramArr = searchParams.entries();
for(const item of paramArr){
console.log(item)
}
运行结果
// ['a', '1']
// ['b', '2']
get(name)
@function 获取指定搜索参数的第一个值。
@param name 将要返回的参数的键名。
@return 返回一个 USVString ;如果没找到,返回 null.
const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('a'))
运行结果
// 1
getAll(name)
@function 获取指定搜索参数的所有值,返回是一个数组。
@param name 将要返回的参数的键名。
@return 一个USVString数组。
const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
console.log(searchParams.getAll('a'))
运行结果
// [1]
has(name)
@function 判断是否存在此搜索参数。
@param name 查找的参数的键名。
@return { Boolean }
const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
console.log(searchParams.has('a'))
运行结果
// true
keys()
@function 返回iterator 此对象包含了键/值对的所有键名。
@return 返回一个iterator.
const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
const keys = searchParams.keys()
for(let key of keys){
console.log(key)
}
运行结果
// a
// b
set(name, value)
@function 用于设置和搜索参数相关联的值。如果设置前已经存在匹配的值,该方法会删除多余的,如果将要设置的值不存在,则创建它
@param name 将要设置的参数的健值名。
@param value 所要设置的参数值。
const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
searchParams.set('a', 11);
console.log(searchParams.toString());
searchParams.set('w', 222);
console.log(searchParams.toString());
运行结果
// a=11&b=2
// a=11&b=2&w=222
sort(name, value)
@function 对包含在此对象中的所有键/值对进行排序,并返回undefined。排序顺序是根据键的Unicode代码点。该方法使用稳定的排序算法 (即,将保留具有相等键的键/值对之间的相对顺序)。
const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
searchParams.sort();
console.log(searchParams.toString());
运行结果
// a=1&b=2
toString()
@function 返回适用在URL中的查询字符串。
@return { String }
const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
console.log(searchParams.toString());
运行结果
// a=1&b=2
values()
@function 返回一个iterator,该遍历器允许遍历对象中包含的所有值。这些值都是USVString对象。
@return iterator
const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
const values = searchParams.values()
for(var value of values) {
console.log(value);
}
运行结果
// 1
// 2
实战
我们获取url上的参数之前会这么写
function getParams(url) {
const res = {}
if (url.includes('?')) {
const str = url.split('?')[1]
const arr = str.split('&')
arr.forEach(item => {
const key = item.split('=')[0]
const val = item.split('=')[1]
res[key] = decodeURIComponent(val) // 解码
})
}
return res
}
const user = getParams('http://www.programmer.com?a=1&b=2')
console.log(user)
// { a: 1, b: 1 }
如今学会了,只需两行代码搞定 加班那不可能
const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
const params = Object.fromEntries(searchParams.entries());
console.log(params)
// { a: 1, b: 1 }
URLSearchParams(鲜为人知处理URL地址的技能)的更多相关文章
- C# HttpWebRequest 绝技 根据URL地址获取网页信息
如果要使用中间的方法的话,可以访问我的帮助类完全免费开源:C# HttpHelper,帮助类,真正的Httprequest请求时无视编码,无视证书,无视Cookie,网页抓取 1.第一招,根据URL地 ...
- 获取Url地址中参数的3种方法【华为云技术分享】
获取Url的代码如下:window.location.href; 方法一:原生js(假设已经获得了Url地址) var url = 'https://gitbook.cn/gitchat/geekbo ...
- yii2获取登录前的页面url地址--电脑和微信浏览器上的实现以及yii2相关源码的学习
对于一个有登录限制(权限限制)的网站,用户输入身份验证信息以后,验证成功后跳转到登录前的页面是一项很人性化的功能.那么获取登录前的页面地址就很关键,今天在做一个yii2项目的登录调试时发现了一些很有意 ...
- url地址的图片路径
url地址的图片路径: (./images/1.jpg) 中的./指根路径,有或没有都可以: (../images/1.jpg) 中的../指相对路径: (../../images/1.jpg) 中的 ...
- i春秋url地址编码问题
i春秋学院是国内比较知名的安全培训平台,前段时间看了下网站,顺便手工简单测试常见的XSS,发现网站搜索功能比较有意思. 其实是对用户输入的内容HTML编码和URL编码的处理方式在这里不合理,提交到乌云 ...
- ASP.NET MVC中获取URL地址参数的两种写法
一.url地址传参的第一种写法 1.通过mvc中默认的url地址书写格式:控制器/方法名/参数 2.实例:http://localhost:39270/RequestDemo/Index/88,默认参 ...
- URL地址中使用中文作为的参数【转】
原文:http://blog.csdn.net/blueheart20/article/details/43766713 引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作 ...
- 去除magento多店铺URL地址中的“___from_store=”
magento 的多店铺功能,大多数情况下是根据语言来进行选择的,当添加了多店铺之后,一般情况下我们会选择开启添加store code到url地址中. Magento 自带的这种功能算是比较不错了,但 ...
- 获取去除参数url地址
获取url地址除去?后的链接地址 var url = "12345.htm?x=666&y=777"; if(url.indexOf("?") != - ...
- 根据url地址单个或批量下载图片
我们在java开发的时候会遇到通过url地址下载图片的情况.方便起见,我把通过url地址下载图片封装了tool工具类,方便以后使用 1.根据如:http://abc.com/hotels/a.jpg ...
随机推荐
- 【力扣】2400. 恰好移动 k 步到达某一位置的方法数目
题目 2400. 恰好移动 k 步到达某一位置的方法数目 解题思路 观察上面示例,容易画出下面的递归树,因此可以考虑DFS. DFS 很容易写出DFS的代码 class Solution { int ...
- excel文件 实现自动处理数据的功能
目录 问题描述: 解决方案: 一.SQL查询 二.SQL.python处理 三.python处理 四.优化python处理 1.手动执行代码 2.开机自动执行代码 对比四种方案: 总结: 问题描述: ...
- Educational Codeforces Round 142 (Rated for Div. 2) A-D
比赛链接 A 题解 知识点:贪心. 代码 #include <bits/stdc++.h> using namespace std; using ll = long long; bool ...
- angular---路由传参数
- three.js实现分模块添加梦幻bloom辉光光晕方案--详细注释版本~~方案三版本~~
先上图对比方案1-2-3不同点,本文是方案3 方案1(旋转场景情况下发光体不应该遮住另一个,但是遮住了) 方案2(层次正常,发光正常) 方案3(层次正常,发光正常,但是转动场景时候部分辉光会被遮挡,但 ...
- 《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(5)-Charles如何设置捕获Https会话
1.简介 在大数据时代,互联网时代,个人信息安全尤为重要,网络安全在近日多起电信诈骗事情发酵下的情况下,引起国家,企业,个人对于互联网安全进一步的重视.而之前很多以http协议传输的网站出现的网站信息 ...
- Jemeter参数
以下是转载内容,仔细看过后,觉得用得最多的应该是csvread函数.用户自定义变量以及CSV DATA CONFIG控制器这几个,但是做练习之后,在结果树和聚合报告中怎么查看执行结果是个问题,没找到对 ...
- 使用pycharm打开sqlite的问题
目录 问题:有同学在sqlite数据库文件执行数据库迁移完成前,点开了他,导致sqlite数据库被pycharm当成文本文件打开了,并且不会改了. 其实sqlite文件和电脑中的其他文件(xx.mp4 ...
- spring-in-action-day04-配置属性 @ConfigurationProperties
1.Spring环境抽象的概念 2.怎么配置属性.在application.yml举例一些常用的配置 3.自定义配置属性@ConfigurationProperties(prefix = " ...
- CMAKE添加库
1.因为pthread不是C标准库,需要链接 2.在CMakeLists.txt里添加: FIND_PACKAGE(Threads REQUIRED) TARGET_LINK_LIBRARIES($ ...