最推荐的方式是使用urlsearchparams对象。1. 使用new urlsearchparams(window.location.search)创建实例来获取当前url的查询参数；2. 通过get(‘key’)获取单个参数值；3. 使用getall(‘key’)获取同名参数的所有值组成的数组；4. 用has(‘key’)检查参数是否存在；5. 通过entries()遍历所有参数；6. 对于任意url字符串，可用new url(urlstring)解析，并通过其searchparams属性操作查询参数；7. urlsearchparams自动处理编码解码，无需手动调用decodeuricomponent或encodeuricomponent，确保参数值正确解析和生成，极大提升开发效率与代码健壮性。
在JavaScript里，想获取URL的查询参数，最直接也最推荐的方式就是使用
URLSearchParams
这个内置对象。它让处理URL参数变得异常简单和直观，省去了很多手动解析字符串的麻烦。
解决方案
要获取当前URL的查询参数，你可以这样做：
// 假设当前URL是：https://example.com/page?id=123&name=test&tags=js&tags=webconst urlParams = new URLSearchParams(window.location.search);// 获取单个参数值const id = urlParams.get('id'); // '123'const name = urlParams.get('name'); // 'test'console.log(`ID: ${id}, Name: ${name}`);// 获取所有同名参数的值（返回数组）const tags = urlParams.getAll('tags'); // ['js', 'web']console.log(`Tags: ${tags.join(', ')}`);// 检查是否存在某个参数const hasId = urlParams.has('id'); // trueconst hasCategory = urlParams.has('category'); // falseconsole.log(`Has ID: ${hasId}, Has Category: ${hasCategory}`);// 遍历所有参数console.log('所有参数：');for (const [key, value] of urlParams.entries()) { console.log(`${key}: ${value}`);}// 你也可以从一个完整的URL字符串中解析参数const specificUrl = 'https://another.com/path?param1=value1¶m2=value2';const specificUrlParams = new URLSearchParams(new URL(specificUrl).search);const param1 = specificUrlParams.get('param1'); // 'value1'console.log(`Specific URL Param1: ${param1}`);
说实话，以前我们没有
URLSearchParams
的时候，解析URL参数那叫一个麻烦。得自己去取
window.location.search
，然后用
split('&')
分割，再用
split('=')
分割键值对，还得手动处理URI编码和解码，想想都头大。现在有了这玩意儿，简直是福音，它把所有这些繁琐的细节都封装好了，用起来非常顺手。
URLSearchParams 是什么？它为什么是首选？
URLSearchParams
是一个 Web API 接口，它提供了一系列方法来方便地操作 URL 的查询字符串（也就是问号后面的部分）。它把查询字符串解析成一个键值对的集合，你可以像操作 Map 一样来获取、设置、删除参数。
它之所以成为首选，原因非常多：
自动化解析与编码/解码： 这是最大的优点。你不需要关心参数值是否包含特殊字符（比如空格、中文等），
URLSearchParams
会自动帮你处理好
encodeURIComponent
和
decodeURIComponent
，确保你拿到的是正确解码后的值，并且在添加或修改参数时也能正确编码。易用性与可读性： 它的 API 设计非常直观，
get()
、
getAll()
、
has()
等方法命名清晰，代码读起来一目了然。相比于手动编写正则表达式或者字符串分割逻辑，这简直是天壤之别。标准与兼容性： 这是一个现代的 Web 标准 API，得到了绝大多数主流浏览器的良好支持。这意味着你的代码在不同浏览器环境下都能稳定运行，不用担心兼容性问题（当然，如果需要支持非常老的浏览器，可能需要 polyfill，但现在已经很少见了）。处理重复参数： 很多时候 URL 中会有多个同名的查询参数（比如
?tag=js&tag=css
），
URLSearchParams
的
getAll()
方法能够很优雅地返回一个包含所有值的数组，这在手动解析时是比较麻烦的。可迭代： 它可以直接用于
for...of
循环，方便你遍历所有的键值对，这对于调试或者批量处理参数非常有用。
在我看来，它就是那种“一旦用了就回不去”的工具，极大提升了开发效率和代码健壮性。
如何处理URL中包含相同名称的查询参数？
当URL中出现像
?keyword=apple&keyword=iphone
这样，同一个参数名
keyword
出现了多次的情况，
URLSearchParams
提供了两种不同的方法来处理：
get(name)
： 这个方法只会返回第一个匹配到的参数值。
const params = new URLSearchParams('?keyword=apple&keyword=iphone&color=red');const keyword = params.get('keyword');console.log(keyword); // 输出: "apple"
如果你只关心第一个值，或者你知道参数不会重复，那么
get()
就足够了。
getAll(name)
： 这个方法会返回一个包含所有匹配参数值的数组。
const params = new URLSearchParams('?keyword=apple&keyword=iphone&color=red');const keywords = params.getAll('keyword');console.log(keywords); // 输出: ["apple", "iphone"]
这是处理多值参数的正确姿势。比如一个商品可能有多个标签（tags），或者一个搜索可能有多个筛选条件，用
getAll()
就能很方便地拿到所有相关的值。
我个人在写代码时，如果我不确定参数是否会重复，或者我知道它可能重复且需要所有值时，我一定会优先使用
getAll()
。这样可以避免遗漏数据，也让代码逻辑更严谨。
获取查询参数时，如何处理编码问题？
编码问题在URL处理中是个老大难。比如URL中包含中文、空格、特殊符号（
&
、
=
等），它们都需要进行URI编码才能正确传输。以前手动解析时，你得记得用
decodeURIComponent()
来解码获取到的值，不然你拿到的可能就是
%E4%BD%A0%E5%A5%BD
而不是
你好
，或者
%20
而不是空格。
URLSearchParams
的一个巨大优势就是它自动处理了编码和解码。当你通过
get()
或
getAll()
获取参数值时，它会内部自动调用
decodeURIComponent
来解码，确保你拿到的是可读的原始字符串。
// 假设URL是：https://example.com/search?q=%E4%BD%A0%E5%A5%BD%20%E4%B8%96%E7%95%8C&category=IT%2FWebconst params = new URLSearchParams(window.location.search);const query = params.get('q');console.log(query); // 输出: "你好 世界" (已经自动解码)const category = params.get('category');console.log(category); // 输出: "IT/Web" (斜杠也正常显示)
你看，我们完全不需要手动去调用
decodeURIComponent
。这不仅简化了代码，更重要的是大大减少了因忘记解码而导致的bug。这对于开发者来说，真的是省心不少。如果你要自己构建查询字符串，比如用
append()
或
set()
方法，
URLSearchParams
也会自动帮你进行
encodeURIComponent
编码，确保生成的URL是合法的。这种双向的自动化处理，让它在处理URL参数时显得异常强大和可靠。
除了查询参数，URL的其他部分如何获取？
虽然我们主要讨论了查询参数，但一个完整的URL还有很多其他部分，比如协议、域名、路径、哈希（锚点）等。在JavaScript中，
window.location
对象提供了访问当前页面URL各个部分的属性。如果你需要解析任意一个URL字符串，而不是当前页面的URL，可以使用
URL
构造函数。
使用
window.location
获取当前URL的各个部分：
// 假设当前URL是：https://www.example.com:8080/path/to/page.html?id=123#section1console.log(window.location.href); // 完整的URL: "https://www.example.com:8080/path/to/page.html?id=123#section1"console.log(window.location.protocol); // 协议: "https:"console.log(window.location.host); // 主机名和端口: "www.example.com:8080"console.log(window.location.hostname); // 主机名: "www.example.com"console.log(window.location.port); // 端口: "8080"console.log(window.location.pathname); // 路径: "/path/to/page.html"console.log(window.location.search); // 查询字符串: "?id=123" (这就是我们前面URLSearchParams的来源)console.log(window.location.hash); // 哈希/锚点: "#section1"
这些属性都非常有用，比如你想根据路径判断当前页面类型，或者根据哈希值进行页面内导航。
使用
URL
构造函数解析任意URL字符串：如果你有一个不是当前页面的URL字符串，想解析它的各个部分，
URL
构造函数就派上用场了。它会返回一个
URL
对象，这个对象的属性和
window.location
类似。
const someUrlString = 'http://api.example.com/users/123?action=view&token=abc#profile';const urlObject = new URL(someUrlString);console.log(urlObject.protocol); // "http:"console.log(urlObject.hostname); // "api.example.com"console.log(urlObject.pathname); // "/users/123"console.log(urlObject.search); // "?action=view&token=abc"console.log(urlObject.hash); // "#profile"// 甚至可以直接访问它的 searchParams 属性，它就是一个 URLSearchParams 实例const action = urlObject.searchParams.get('action'); // "view"console.log(action);
这个
URL
构造函数非常强大，它能帮你解析任何合法的URL字符串，并提供结构化的访问方式，这在处理API请求或外部链接时尤其方便。我个人在处理非当前页面的URL时，基本都会用这个
URL
构造函数，因为它既能解析又能方便地操作查询参数。
以上就是js如何获取url的查询参数的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1514620.html
微信扫一扫 
支付宝扫一扫 
