极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# 实现一个函数用来解析 URL 的 querystring

更多描述

示例,如

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

// 解析后得到 qs 如下
const qs = {
  a: 3,
  b: 4,
  c: 5
}

镜像问题: 【Q440】实现一个函数用来对 URL 的 querystring 进行编码 (opens new window)

Issue

欢迎在 Issue 中交流与讨论: Issue 436 (opens new window)

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

  1. 如何使用正则解析 qs
  2. 如何正确转义汉字
  3. 如何正确处理数组
  4. 如何处理各种复杂的嵌套对象

关于如何实现复杂嵌套对象,边界条件过多,强烈推荐一个 npm 库 qs (opens new window)

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

// {}
'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' 

// {name: '1+1=2'}
'https://shanyue.tech?name=1%2B1%3D2' 

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

function parse(url) {

  // 一、夹杂在 ? 与 # 之前的字符就是 qs,使用 /\?([^/?#:]+)#?/ 正则来抽取
  // 使用正则从 URL 中解析出 querystring
  // 二、通过 Optional Chain 来避免空值错误
  const queryString = url.match(/\?([^/?#:]+)#?/)?.[1]

  if (!queryString) { return {} }

  queryObj = queryString.split('&').reduce((params, block) => {
    // 三、如果未赋值,则默认为空字符串
    const [_k, _v = ''] = block.split('=')
    // 四、通过 decodeURIComponent 来转义字符,切记不可出现在最开头,以防 ?tag=test&title=1%2B1%3D2 出错
    const k = decodeURIComponent(_k)
    const v = decodeURIComponent(_v)

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

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

  1. new URL(url)
  2. new URLSearchParams(paramsString)

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 6/30/2021, 1:59:30 PM