【淘宝】实现一个函数用来解析 URL 的 querystring

栖息在斯诺希尔岛的成年帝企鹅和幼崽，南极 (© Martin Ruegner/Getty Images)

本题摘自于我 github 上的面试每日一题：https://github.com/shfshanyue/Daily-Question，并有大厂面经及内推信息，可「在左下角打开本题原文链接」

示例，如

const url = 'https://shanyue.tech?a=3&b=4&c=5'

const qs = {
  a: 3,
  b: 4,
  c: 5
}

关于路由中解析 querystring，无论前端开发还是后端开发都无时无刻在使用这项功能，即使几乎没有人手动解析过它。这里来实现一个简单粗暴的解析函数

如何使用正则解析 qs
如何正确转义汉字
如何正确处理数组

为此总结出以下用例用以检查解析函数的正确性

// {}
'https://shanyue.tech' 

// {a: ''}
'https://shanyue.tech?a' 

// {name: '山月'}
'https://shanyue.tech?name=%E5%B1%B1%E6%9C%88'    

// {name: '山月', a: 3}                
'https://shanyue.tech?name=%E5%B1%B1%E6%9C%88&a=3'            

// {name: '山月', a: [3, 4]}
'https://shanyue.tech?name=%E5%B1%B1%E6%9C%88&a=3&a=4'   

// {name: '山月', a: 3}
'https://shanyue.tech?name=%E5%B1%B1%E6%9C%88&a=3#hash'

纯碎使用 javascript 完成解析函数，而不利用浏览器 DOM 特性 API，代码如下所示，细节在注释中体现

function parse(url) {
  // 通过 decodeURIComponent 来转义字符
  // 夹杂在 ? 与 # 之前的字符及时 qs，使用 /?([^/?#:]+)#?/ 正则来抽取
  // 使用正则从 URL 中解析出 querystring
  // 通过 Optional Chain 来避免空值错误
  const queryString = decodeURIComponent(url).match(/?([^/?#:]+)#?/)?.[1]

  if (!queryString) { return {} }

  queryObj = queryString.split('&').reduce((params, block) => {
    // 如果未赋值，则默认为空字符串
    const [k, v = ''] = block.split('=')

    if (params[k] !== undefined) {
      // 处理 key 出现多次的情况，设置为数组
      params[k] = [].concat(params[k], v)
    } else {
      params[k] = v
    }
    return params
  }, {})
  return queryObj
}

如果引入浏览器特性 API，问题就简单很多迎刃而解，所涉及到的 API 有两个，这里不做展开

new URL(url)
new URLSearchParams(paramsString)

【淘宝】实现一个函数用来解析 URL 的 querystring

更多面试