跳到主要内容

利用 原生 API ULRSearchParms 处理 url query/search 参数转换问题

· 阅读需 2 分钟

前端开发中，经常会有处理 url query 参数的需求，大部分人会自己封装一个方法，去用正则转换解析成 js 对象或者遍历生成 query 参数字符串，或者找一些第三方库或 node 原生库 querystring 等。

但是许多人都或者不知道或者没用过 JS 的新的 Window 对象 API：ULRSearchParms， ULRSearchParms 就是专门用来处理 query 参数的各种转换问题。

JS 对象转为 URL query 参数​

new URLSearchParams({ id: 1, name: 'Jack' }).toString();
// id=1&name=Jack'

URL query 参数转为 JS 对象​

const query = 'id=1&name=Jack';
const searchParms = new URLSearchParams(query);
Object.fromEntries(searchParms);
// {id: '1', name: 'Jack'}

因此，可以将当前 url 的 query 参数传递给 URLSearchParams

const searchParms = new URLSearchParams(window.location.search);

其他用法​

  • URLSearchParams.get(name):

    插入一个指定的键/值对作为新的搜索参数。

    const searchParms = new URLSearchParams('id=1&name=Jack');
    searchParms.get('name');
    // 'Jack'

  • URLSearchParams.append(name, value):

    插入一个指定的键/值对作为新的搜索参数。

    const searchParms = new URLSearchParams('id=1&name=Jack');
    searchParms.append('age', '18');
    Object.fromEntries(searchParms);
    // {id: '1', name: 'Jack', age: '18'}

  • URLSearchParams.delete(name):

    插入一个指定的键/值对作为新的搜索参数。

    const searchParms = new URLSearchParams('id=1&name=Jack');
    searchParms.delete('id');
    Object.fromEntries(searchParms);
    // {name: 'Jack'}

  • URLSearchParams.has('name')

    返回 Boolean 判断是否存在此搜索参数。

  • URLSearchParams.toString()

    返回搜索参数组成的字符串，可直接使用在 URL 上。

当然，我们可以先将 search 字符串 转为 js 对象，再使用对象的操作方法，最后再根据需要转回 search 字符串。

更多用法见 https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams