第 79 期(W3C 标准-URL)：URLSearchParams

[wingmeng]

本期要介绍的是一个非常实用的 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()	返回所有值