背景
我们在日常开发中经常会遇到要对url中的参数进行修改和新增，但是自己手动每次敲就会导致代码很麻烦，且不易维护
前言
以前写过两次次解析url的并且对url的应用场景做了深层挖掘 （个人感觉，没有这个帖子好用，因为以前是正则表达式来进行的，但是思路对下面的方法同样适用）
（巨好使，详细，解析URl，URl自定义传参）js URl中快速自定义传参，并且实现参数解析 修改 和新增，替换功能_自定义url协议 传参__揽的博客-CSDN博客
new URL()
首先写一个假的地址（q=URLUtils.searchParams&topic=api）相当于当前的window.location.href
const urlParams = new URL(window.location.href);//将字符串变成url对象 urlParams.searchParams.has("topic") === true; // true //判断url是否存在这个key值 urlParams.searchParams.get("topic") === "api"; // true //获取这个key值的value urlParams.searchParams.getAll("topic"); // ["api"] //获取url所有的key urlParams.searchParams.get("foo") === ""; // true //key值为空的情况 urlParams.searchParams.append("topic", "webdev"); //url追加一个key-value urlParams.searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev" //将参数对象转为字符串并且进行了拼接 urlParams.searchParams.set("topic", "More webdev"); //设定key-value urlParams.searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev" urlParams.searchParams.delete("topic"); //删除key-value urlParams.searchParams.toString(); // "q=URLUtils.searchParams"
博主絮叨
这个方法比前两个博客中的正则更实用，但是前两个博客的思路一定可以多看看
