URL参数的stringify和parse方案

无论是开发前端页面，还是用Node.js进行后端API开发，常常都会遇到需要对URL参数进行格式化和解析的操作，在实际项目中，有哪些方案可以供我们选择呢?

第三方库（qs，querystring)

import qs from 'qs'

const data = {
  name: 'foo',
  topic: 'api'
}

console.log(qs.stringify(data)) // name=foo&topic=api

如果要解析，就使用parse方法：

const str = 'name=foo&topic=api'

console.log(qs.parse(str)) // {name: 'foo', topic: 'api'}

对于querystring库，功能也是一样，不过已经被deprecated了，其提示说：The querystring API is considered Legacy. new code should use the URLSearchParams API instead。既如此，那么我们来看看 URLSearchParams 的用法。

URLSearchParams

这个是浏览器自带的标准，最大的好处是不用安装第三方库，我们来看看用它实现上面的例子：

const params = new URLSearchParams()
const data = {
  name: 'foo',
  topic: 'api'
}
for (let key in data) {
  params.append(key, data[key])
}

console.log(params.toString()) // name=foo&topic=api

解析起来也稍微麻烦点：

const searchParams = new URLSearchParams("name=foo&topic=api")

const data = {}
for (let p of searchParams) {
  data[p[0]] = p[1]
}

console.log(data) // {name: 'foo', topic: 'api'}

它本身是一个可迭代的对象，它还有很多其他方法，功能十分强大，无非就是使用起来啰嗦点，目前主流的浏览器都已经兼容，值得推荐。

Node.js模块（querystring）

如果是开发后台API，那么，可以使用querystring模块来进行相关处理，先看stringify：

const querystring = require('querystring')

const result = querystring.stringify({ name: 'foo', topic: 'api' })
console.log(result) // name=foo&topic=api

使用起来非常方便，解析用parse:

const result = querystring.parse('name=foo&topic=api')
console.log(result) //  { name: 'foo', topic: 'api' }

可以看到，其使用方法和第三方库qs是一样的。

参考

• qs
• URLSearchParams
  
• Node.js v18.16.0 documentation