28. URLSearchParams 的妙用

我曾经在 MDN 中文文档上看到 URLSearchParams 是一个实验性的 API，不过今天再去看时，发现英文文档上面已经取消了这个标注，并且这个 API 已经得到了大部分浏览器（除了 IE）的支持。这让我感叹中文文档更新太慢，也让我一直疑惑是否应该在实际开发中使用这个 API。

兼容性：Can I use URLSearchParams

在开发者，我们会遇到这样的需求，将 query params 在 string 形式和 plain object 之间进行转换。

?keyword=apple&sort=price => {keyword: 'apple', sort: 'price'} => 获取 keyword、sort 的值
{keyword: 'apple', sort: 'price'} => keyword=apple&sort=price => 拼接到请求地址

最基本的方法是，我们手写一个 util 函数，将这两者进行转换。

// query params string to object
function qsToObj(qs) {
  if (qs[0] === '?') qs = qs.slice(1)
  const kvs = qs.split('&')
  const res = {}
  kvs.forEach(kv => {
    const [k, v] = kv.split('=')
    res[k] = v
  })
  return res
}

//  object to query params string
function objToQs(obj) {
  const keys = Object.keys(obj)
  const pairs = keys.map(key => {
    return encodeURIComponent(key) + "=" + encodeURIComponent(obj[key])
  });

  const queryString = pairs.join("&")
  return queryString
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

但是，每次都要这样写太麻烦了，我们更多的是选择使用轮子，npm 有一个 qs 库，下载使用即可。

npm i qs: https://www.npmjs.com/package/qs

但其实，我们并不都是需要这些库，随着 ES 规范里 API 的丰富，有些库确实不一定需要。

参考：You-Dont-Need-Lodash-Underscore

我的意味很明显了，URLSearchParams 可以代替 qs 这个库，满足我们对查询参数转换的一般需求。

（1）对象转查询参数字符串：

const object = { keyword: 'apple', sort: 'price', name: '小明' }

console.log(new URLSearchParams(object).toString())
// keyword=apple&sort=price&name=%E5%B0%8F%E6%98%8E

1
2
3
4

（2）查询参数字符串转对象

const qs = '?keyword=apple&sort=price&name=%E5%B0%8F%E6%98%8E'

const paramObj = new URLSearchParams(qs)
console.log(paramObj.get('keyword')) // 'apple'
console.log(paramObj.get('sort'))    // 'price'
console.log(paramObj.get('name'))    // '小明'

1
2
3
4
5
6

28. URLSearchParams 的妙用 #

28. URLSearchParams 的妙用