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

实现如下效果

const url = "https://xxxx.com?a=3&b=4&c=5&name=1+1=2";
 
// 解析后得到 qs 如下
const qs = {
  a: 3,
  b: 4,
  c: 5,
　name: '1+1=2'
};

纯碎使用 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，就是下面这个

new URLSearchParams(paramsString)

我们一起来看看使用这个API，实现步骤

function parse() {
  let serach = window.location.search;
  let params = new URLSearchParams(serach), queryObj = {};
  for (let [k, v] of params.entries()) {
    if (queryObj[k] !== undefined) {
      queryObj[k] = [].concat(queryObj[k], v);
    } else {
      queryObj[k] = v;
    }
  }
  return queryObj;
}