前端必知必会--操作URL的黑科技

栏目: 后端 · 前端 · 发布时间: 5年前

内容简介:现在有这么个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的黑科技

杀鸡焉用牛刀呢,今天我们来学习下专门用来处理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"
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法设计与分析基础

算法设计与分析基础

Anany Levitin / 潘彦 / 清华大学出版社 / 2015-2-1 / 69.00元

作者基于丰富的教学经验,开发了一套全新的算法分类方法。该分类法站在通用问题求解策略的高度,对现有大多数算法准确分类,从而引领读者沿着一条清晰、一致、连贯的思路来探索算法设计与分析这一迷人领域。《算法设计与分析基础(第3版)》作为第3版,相对前版调整了多个章节的内容和顺序,同时增加了一些算法,并扩展了算法的应用,使得具体算法和通用算法设计技术的对应更加清晰有序;各章累计增加了70道习题,其中包括一些......一起来看看 《算法设计与分析基础》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具