JS获取URL查询参数的几种方法

在JavaScript中，获取URL查询参数的方法有很多，但最推荐的是使用内置的`URLSearchParams`对象。通过`new URLSearchParams(window.location.search)`可以轻松获取当前URL的查询参数，并利用`get()`、`getAll()`、`has()`等方法进行参数值的提取、同名参数处理和参数存在性检查。此外，`entries()`方法方便遍历所有参数。对于任意URL字符串，可使用`new URL(urlString)`解析，通过其`searchParams`属性操作查询参数。`URLSearchParams`自动处理编码解码，无需手动调用`decodeURIComponent`或`encodeURIComponent`，极大提升开发效率与代码健壮性，是现代Web开发的理想选择。

最推荐的方式是使用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=web
const 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'); // true
const hasCategory = urlParams.has('category'); // false
console.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&param2=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 一样来获取、设置、删除参数。

它之所以成为首选，原因非常多：

1. 自动化解析与编码/解码： 这是最大的优点。你不需要关心参数值是否包含特殊字符（比如空格、中文等），URLSearchParams 会自动帮你处理好 encodeURIComponent 和 decodeURIComponent，确保你拿到的是正确解码后的值，并且在添加或修改参数时也能正确编码。
2. 易用性与可读性： 它的 API 设计非常直观，get()、getAll()、has() 等方法命名清晰，代码读起来一目了然。相比于手动编写正则表达式或者字符串分割逻辑，这简直是天壤之别。
3. 标准与兼容性： 这是一个现代的 Web 标准 API，得到了绝大多数主流浏览器的良好支持。这意味着你的代码在不同浏览器环境下都能稳定运行，不用担心兼容性问题（当然，如果需要支持非常老的浏览器，可能需要 polyfill，但现在已经很少见了）。
4. 处理重复参数： 很多时候 URL 中会有多个同名的查询参数（比如 ?tag=js&tag=css），URLSearchParams 的 getAll() 方法能够很优雅地返回一个包含所有值的数组，这在手动解析时是比较麻烦的。
5. 可迭代： 它可以直接用于 for...of 循环，方便你遍历所有的键值对，这对于调试或者批量处理参数非常有用。

在我看来，它就是那种“一旦用了就回不去”的工具，极大提升了开发效率和代码健壮性。

如何处理URL中包含相同名称的查询参数？

当URL中出现像 ?keyword=apple&keyword=iphone 这样，同一个参数名 keyword 出现了多次的情况，URLSearchParams 提供了两种不同的方法来处理：

1. get(name)： 这个方法只会返回第一个匹配到的参数值。

   const params = new URLSearchParams('?keyword=apple&keyword=iphone&color=red');
   const keyword = params.get('keyword');
   console.log(keyword); // 输出: "apple"

   如果你只关心第一个值，或者你知道参数不会重复，那么 get() 就足够了。

2. 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%2FWeb
const 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 构造函数。

1. 使用 window.location 获取当前URL的各个部分：

   // 假设当前URL是：https://www.example.com:8080/path/to/page.html?id=123#section1
   console.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"

   这些属性都非常有用，比如你想根据路径判断当前页面类型，或者根据哈希值进行页面内导航。

2. 使用 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 构造函数，因为它既能解析又能方便地操作查询参数。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。