面试官问：如何拆解URL参数中queryString

た入场券 2022-11-18 05:58 136阅读 0赞

**入参格式参考：**

const url = 'http://sample.com/?a=1&b=2&c=xx&d=2#hash';

**出参格式参考：**

const result = { a: '1', b: '2', c: 'xx', d: '' };
    // 拆解URL参数中queryString，返回一个 key - value 形式的 object

**解答一：正则**

const queryString = (str)=>{
        const obj = {}
        str.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => (obj[k] = v))
        return obj
    }

**解答二：URLSearchParams**

function getParams(u: URL) {
      const s = new URLSearchParams(u.search)
      const obj = {}
      s.forEach((v, k) => (obj[k] = v))
      return obj
    }
    
    const url = 'http://sample.com/?a=1&b=2&c=xx&d=2#hash';
    getParams(new URL(url))

**解答三：字符串分割**

字符串分割拿到参数相关的字符串，再做类型转换

const dismantle = (url) => {
         const aimUrl = url.split('?').pop().split('#').shift().split('&');
         const res = {};
         aimUrl.forEach(item => {
              const [key, val] = item.split('=');
              res[key] = val;
         });
         return res;
    }

公众号内回复【正则】

免费领取【JavaScript 正则表达式迷你书.pdf】

来源：https://github.com/sisterAn/JavaScript-Algorithms

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端算法源码编程群，每日一刷（工作日），每题瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

![ef2aa94ec34f3449ae297a65605ab885.png][]

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持