使用 URLSearchParams 解析和管理URL query参数

前言

对前端来说处理url ? 后面的参数是很常见的需求。如果我们自己处理的话需要考虑很多情况，也比较麻烦。例如

1. www.example.com?a=1&a=2 参数可能会重复
2. www.example.com?a=&b=2 参数a对应的value可能为空
3. www.example.com?a=1&b=%40 参数可能会encode

不过现在有了 URLSearchParams可以让我们很方便的管理url参数。下面我们看下如何使用URLSearchParams。

介绍

首先 URLSearchParams是一个构造函数，会生成一个URLSearchParams对象，参数类型： 不传 ｜ string ｜ object ｜ URLSearchParams， 并且遇到特殊字符它会自动帮我们encode 和 decode

const urlSearch = new URLSearchParams();

console.log("urlSearch", urlSearch);

可以看到生成的是一个URLSearchParams类型的对象，并且对象原型上会有一些操作函数。下面是这些函数的解释和使用

var paramsString = "a=1&a=2&b=%40&c=@"
var searchParams = new URLSearchParams(paramsString);

//has 返回 [`Boolean`] 判断是否存在此搜索参数
searchParams.has("a") // true

//get 获取指定搜索参数的第一个值，如果是编码过的会自动转码， 比如 b对应的值是 %40，会自动转为 @
searchParams.get('b') // @

//getAll 获取指定搜索参数的所有值，返回是一个数组
searchParams.getAll('a') // ['1','2']
searchParams.getAll('b') // ['@']

//append 插入一个指定的键/值对作为新的搜索参数。
searchParams.append("d", "3")
searchParams.get('d') // '3'

//set 设置一个搜索参数的新值，假如原来有多个值将删除其他所有的值。
searchParams.getAll('a') // ['1','2']
searchParams.set('a', '5')
searchParams.getAll('a') // ['5']

//delete 从搜索参数列表里删除指定的搜索参数及其对应的值。
searchParams.getAll('a') // ['1','2']
searchParams.delete('a')
searchParams.getAll('a') // []

//toString 返回搜索参数组成的字符串，可直接使用在 URL 上, 如果值有特殊字符会自动encode, 比如c 对应的 @ 会自动encode 为 %40
searchParams.toString() // "a=1&a=2&b=%40&c=%40"

//keys 返回一个iterator对象，此对象包含了键/值对的所有键名, 可以用for of 循环这个对象
for (const key of searchParams.keys()) {
     console.log(key); // 循环打印 'a' 'a' 'b' 'c'
}

// values 和 entries 方法 同 keys 方法，都返回一个iterator对象， values会包含了键/值对的所有值， entries会包含了键/值对

注意点

• URLSearchParams 构造函数不会解析完整的URL，它会把 = 前面的当做key, = 后面当做value，如下会把'example.com/search?quer…' 当做key，%40 当做value

const paramsString = 'http://example.com/search?query=%40';
const searchParams = new URLSearchParams(paramsString);

searchParams.get('query') // null
searchParams.get('http://example.com/search?query') // @

• 如果字符串起始位置有 ? 的话会被去除，所以字符串起始位置带不带 ？都可以

const paramsString1 = '?query=1';
const searchParams1 = new URLSearchParams(paramsString1);

const paramsString2 = 'query=1';
const searchParams2 = new URLSearchParams(paramsString2);

searchParams1.toString() // query=1
searchParams2.toString() // query=1

实战

• 当我们需要解析url 后面参数时，通过原型上面的方法就可以方便获取和操作

const paramsString = 'a=1&b=2'; 
// 或 const paramsString = '?a=1&b=2'; 
const searchParams = new URLSearchParams(paramsString);
searchParams.get('a') // '1'

• 当我们需要生成url 后面的参数时

const params = { a:1, b:2, c:'@'};
const urlSearchStr = new URLSearchParams(params).toString(); // a=1&b=2&c=%40   注意生成的字符串不带 ？

其他

你如果使用react-router-dom v6版本的话，有一个 useSearchParamshook，也是基于URLSearchParams