URLSearchParams 的妙用在 MDN 中文文档上看到 URLSearchParams 是一个实验性的 API

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

后续更新：我提交的 PR 已经通过，现在 URLSearchParams 中文文档已经更新到最新版本：Update CN docs to sync with the latest docs by Hacker-C · Pull Request #12260 · mdn/translated-content (github.com)

兼容性：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
}

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

npm i qs: 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

（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'))    // '小明'