关于URL的一些实用操作

最近在做项目时需要截取url中的参数，如果是以前肯定先截取?后面的参数然后做字符串操作，今天突发奇想在掘金上搜了一下关于url的一下操作，偶然发现了URLSearchParams。

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。 文档

1、常用的接口方法

1.1 get(name) 获取指定搜索参数的第一个值

如果url参数中有两个一样的参数，他只会返回第一个。
例如https://example.com?name=Jonathan&age=18&name=123，如果取name的值的话只会返回’Jonathan’而不会返回123

const url = new URL('https://example.com?name=Jonathan&age=18&name=123');
const params = new URLSearchParams(url.search);
console.log(params.get('name')) // Jonathan


// 如果不是在本地打开而是在线上环境的话可以直接使用location.search
const params = new URLSearchParams(location.search);
console.log(params.get('name')) // Jonathan

1.2 getAll() 获取指定搜索参数的所有值，返回是一个数组

const url = new URL('https://example.com?name=Jonathan&age=18&name=123');
const params = new URLSearchParams(url.search);
console.log(params.getAll('name')) // ["Jonathan", "123"]

1.3 append(key, value) 插入一个指定的键/值对作为新的搜索参数

const url = new URL('https://example.com');
const params = new URLSearchParams(url.search);
params.append('name', 'lilei');
console.log(params.toString()) // name=lilei
console.log(params.get('name')) // lilei

1.4 delete(name) 从搜索参数列表里删除指定的搜索参数及其对应的值

如果搜索的参数里面有多个要删除的字段，delete时会全部删除，不会只删除第一个

const url = new URL('https://example.com?name=Jonathan&age=18&name=123');
const params = new URLSearchParams(url.search);
params.delete('name');
console.log(params.toString()) // age=18
console.log(params.get('name')) // null

1.5 has(name) 返回 Boolean 判断是否存在此搜索参数

const url = new URL('https://example.com?name=Jonathan&age=18&name=123');
const params = new URLSearchParams(url.search);
params.has('name'); // true
params.has('name1'); // false

2、兼容性

浏览器兼容性

ie并不支持这个接口，我们可以使用url-search-params-polyfill这个npm包

手写一个query函数

const src = 'https://www.baidu.com/?id=123&name=aaa&phone=12345';

const getQueryString = url => {
    if (!url.includes('?')) {
        return null;
    }
    const [, search] = url.split('?');
    const obj = {};
    search.split('&').forEach(item => {
        if (item.includes('=')) {
            const [key, val] = item.split('=');
            Reflect.set(obj, key, val);
        }
    });
    return obj;
};

getQueryString(src) // {id: '123', name: 'aaa', phone: '12345'}