内容简介:现在有这么个URL:www.baidu.com/s?wd=蔡徐坤&skill=篮球&year=2019 ,怎么才能获取query上的字段呢?这时候正则表达式就派上用场了,效果如图:杀鸡焉用牛刀呢,今天我们来学习下专门用来处理URL的query的接口:URLSearchParams 。只需要new一个URLSearchParams的实例即可,代码:
现在有这么个URL:www.baidu.com/s?wd=蔡徐坤&skill=篮球&year=2019 ,怎么才能获取query上的字段呢?这时候正则表达式就派上用场了,效果如图:
杀鸡焉用牛刀呢,今天我们来学习下专门用来处理URL的query的接口:URLSearchParams 。
简单使用
只需要new一个URLSearchParams的实例即可,代码:
let url = '?wd=蔡徐坤&skill=篮球&year=2019'; let searchParams = new URLSearchParams(url); for (let p of searchParams) { console.log(p); } // ["wd", "蔡徐坤"] // ["skill", "篮球"] // ["year", "2019"] 复制代码
获取单个字段
假如现在我只想获取单个字段的值,该怎么办呢?只需要调用这个实例的get方法即可, 代码:
searchParams.get('wd') // "蔡徐坤" searchParams.get('skill') // "篮球" searchParams.get('year') // "2019" 复制代码
有时候不知道一个字段是否存在,所以想事先校验下。使用实例的has方法进行判断,代码:
searchParams.has('wd') // true searchParams.has('age') // false 复制代码
添加字段
实例提供了append方法来添加字段,这个方法接收两个参数,前者是key,后者是value,代码:
searchParams.append('age', 26); searchParams.has('age'); // true searchParams.get('age'); // 26 复制代码
删除字段
现在不想要year字段了,直接使用delete即可,代码:
searchParams.delete('year'); searchParams.has('year'); // false 复制代码
设置字段
有时候想重写一个字段,而不是添加(append)一个字段,这时候需要使用set方法,比如,我们觉得坤哥不仅会篮球,还会唱,跳,rap。代码:
searchParams.set('skill', '篮球 唱 跳 rap'); 复制代码
转为字符串
修改实例后,有时候需要再转为字符串,进行路由跳转等,使用toString方法
searchParams.toString(); // "wd=蔡徐坤&skill=篮球+唱+跳+rap&year=2019&age=26" 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 前端模拟用户的复制操作
- 前端必知的Emmet实用操作
- 使用Go开发前端应用(四)- 操作canvas绘制一个表格
- 一文搞定前端代理骚操作!再也不怕线上 bug 啦
- 056.Python前端Django模型ORM多表基本操作
- 前端培训-中级阶段(6)- jQuery元素节点操作(2019-07-18期)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
MATLAB高效编程技巧与应用
吴鹏 / 北京航空航天大学 / 2010-6 / 39.00元
《MATLAB高效编程技巧与应用:25个案例分析》是作者八年MATLAB使用经验的总结,精心设计的所有案例均来自于国内各大MATLAB技术论坛网友的切身需求,其中不少案例涉及的内容和求解方法在国内现已出版的MATLAB书籍中鲜有介绍。 《MATLAB高效编程技巧与应用:25个案例分析》首先针对MATLAB新版本特有的一些编程思想、高效的编程方法、新技术进行了较为详细的讨论,在此基础上,以大量......一起来看看 《MATLAB高效编程技巧与应用》 这本书的介绍吧!
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
XML、JSON 在线转换
在线XML、JSON转换工具