前端URL参数的解析和编码

Sonder

2023-07-11

1334字

3分钟

浏览 (951)

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

示例如下：

复制代码

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

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

复制代码

function url2Params(url) {
 const dict = {};
 url.replace(/([^?&]*)=([^&]*)/g, (__, key, val) => {
   key = decodeURIComponent(key);
   val = decodeURIComponent(val);
   if (dict[key]) return (dict[key] = [dict[key], val].flat());
   dict[key] = val;
 });
 return dict;
}

实现一个函数用来对 URL 的 querystring 进行编码

示例如下：

复制代码

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

// 对 data 编码后得到 querystring 如下
//=> 'a=3&b=4&c=5'
stringify(data);

先上几个测试用例:

复制代码

// a=3&b=4
stringify({ a: 3, b: 4 });

// a=3&b=
stringify({ a: 3, b: null });

// a=3&%E5%B1%B1=%E6%9C%88
stringify({ a: 3, 山: "月" });

只做一些基本的功能，满足以下条件

对 null/undefined/object 编码为空字符
对 key/value 记得 encodeURIComponent
不考虑数组及嵌套对象等复杂操作

复制代码

function stringify(data) {
  const pairs = Object.entries(data);
  const qs = pairs
    .map(([k, v]) => {
      let noValue = false;
      if (v === null || v === undefined || typeof v === "object") {
        noValue = true;
      }
      return `${encodeURIComponent(k)}=${noValue ? "" : encodeURIComponent(v)}`;
    })
    .join("&");
  return qs;
}

这是一个最简单对 querystring 进行编码的函数，如果需要更复杂的需求如嵌套对象与数组可以参考 qs

上一篇 / v-html使用img点击实现放大效果下一篇 / 解决vite打包 @use rules must be written before any other rules.的问题

前端URL参数的解析和编码

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)