fezaoduke / fe-practice-hard

晚练课
69 stars 6 forks source link

第 79 期(W3C 标准-URL):URLSearchParams #82

Open wingmeng opened 5 years ago

wingmeng commented 5 years ago

本期要介绍的是一个非常实用的 API —— URLSearchParams

从字面意思来看,这个 API 应该是用来处理 URL 的查询字符串的,事实上,它不仅可以轻松摆平 URL 查询字符串,而且还提供了许多非常丝滑的处理方法供开发者使用。 在此之前要对 URL 传参进行相关操作是比较繁琐的,常见的方法是通过前后两次 split 划分字符串为数组,找出参数,或者通过正则表达式匹配出参数。这类方法写起来成本较高,而且对于一些比较特殊的 URL 参数很容易出错(例如下面这些)。

http://xx.xx.xx?from=user.html?id=1
http://xx.xx.xx?favorite=rap&favorite=basketball&favorite=music

用法:

let urlParams = '?action=edit&username=Kitty&from=?user-list.html&favorite=rap&favorite=music&favorite=reading';

// 创建实例
let params = new URLSearchParams(urlParams);

console.log('是否有 action 字段:', params.has('action'));  // true
console.log('获取 username:', params.get('username'));  // Kitty
console.log('获取 from:', params.get('from'));  // ?user-list.html
console.log('获取 favorite:', params.get('favorite'));  // rap
console.log('获取全部 favorite:', params.getAll('favorite'));  //  ["rap", "music", "reading"]
console.log('输出所有的 key:', [...params.keys()]);
console.log('输出所有的 values:', [...params.values()]);
params.append('area', 'China');  // 追加数据
console.log('输出为字符串形式:', params.toString());

实例方法:

方法 描述
append() 向 URL 中追加数据(key/value)
delete() 删除所有匹配的 key/value 值
entries() 返回所有键值对 key/value
get() 返回与给定 key 匹配的第一个 value 值
getAll() 返回所有与给定 key 匹配 value 值
has() 查询指定 key 是否存在,返回一个布尔值
keys() 返回所有键 key
set() 设置 key 的 value 值
toString() 返回 URL 字符串
values() 返回所有值