在URL中，查询参数字符串值通常会提供有关请求的信息，例如搜索参数或正在使用的对象的ID。如果您在前端处理任何业务或请求逻辑，了解如何从URL检索查询字符串值很重要。本文分享三种从URL获取参数的方法。URLSearchParams接口在除IE11之外的所有主要浏览器版本中均受支持。它通过解析URL的查询字符串并提供访问该值的方法来工作。例如：此接口的缺点之一是您只能将URL的查询字符串传递给它。如果您使用当前的浏览器URL，这很容易做到，因为您只需传递window.location.search。如果使用任何其他URL，则需要单独解析和传递查询字符串。constparams=newURLSearchParams("q=devpoint&page=1");params.get("q");//'devpoint'params.get("page");//'1'将查询参数解析为对象，请使用URL.searchParams的.entries()方法，该方法返回Iterator键/值对，并使用Object.fromEntries将其转换为对象。constparams=newURLSearchParams("q=devpoint&page=1");constentries=params.entries();Object.fromEntries(条目);//{q:'devpoint',page:'1'}以参数的形式传递数组值，参数名可以相同，下面的参数uid:constparamsString="q=devpoint&uid=1&uid=3&uid=4";constsearchParams=newURLSearchParams(paramsString);console.log(console.log(searchParams.getAll("uid")));//['1','3','4']URL除了IE11，各大浏览器版本也都支持URLAPI。它提供了一种更灵活的解析URL的方法，还提供了一种访问查询字符串值的方法。例如：consturl=newURL("https://stackabuse.com/search?q=devpoint&page=1");constsearchParams=url.searchParams;searchParams.get("q");//'devpoint'searchParams.得到（“页面”）;//'1'url.searchParams与URLSearchParams返回的实例对象类型相同。上面的url对象还将URL的所有部分分解为各个部分。例如：url.href；//'https://stackabuse.com/search?q=devpoint&page=1'url.origin;//'https://stackabuse.com'url.protocol;//'https:'url.host;//'stackabuse.com'url.hostname;//'stackabuse.com'url.port;//''url.路径名；//'/search'url.search;//'?q=devpoint&page=2'url.hash;//''PureJS如果你因为某种原因不能访问上面的API或者想对解析有更多的控制，你可以使用下面的代码将查询字符串解析成一个对象。functiongetQueryParams(url){constparamArr=url.slice(url.indexOf("?")+1).split("&");常量参数={};paramArr.map((param)=>{const[key,val]=param.split("=");params[key]=decodeURIComponent(val);});returnparams;}函数执行后效果如下：getQueryParams("https://stackabuse.com/search?q=devpoint&page=2");//{q:'devpoint',page:'2'}作者：天行无极链接：https://juejin.cn/post/7139169269941534733来源：稀土掘金版权所有归所有作者所有。商业转载请联系作者授权，非商业转载请注明出处。
