js如何获取url的查询参数-js教程-PHP中文网

最推荐的方式是使用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，确保参数值正确解析和生成，极大提升开发效率与代码健壮性。

js如何获取url的查询参数

在JavaScript里，想获取URL的查询参数，最直接也最推荐的方式就是使用

URLSearchParams

登录后复制

这个内置对象。它让处理URL参数变得异常简单和直观，省去了很多手动解析字符串的麻烦。

解决方案

要获取当前URL的查询参数，你可以这样做：

// 假设当前URL是：https://example.com/page?id=123&amp;name=test&amp;tags=js&amp;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&amp;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('&amp;')

登录后复制

分割，再用

split('=')

登录后复制

分割键值对，还得手动处理URI编码和解码，想想都头大。现在有了这玩意儿，简直是福音，它把所有这些繁琐的细节都封装好了，用起来非常顺手。

URLSearchParams 是什么？它为什么是首选？

URLSearchParams

登录后复制

是一个 Web API 接口，它提供了一系列方法来方便地操作 URL 的查询字符串（也就是问号后面的部分）。它把查询字符串解析成一个键值对的集合，你可以像操作 Map 一样来获取、设置、删除参数。

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

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

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

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

当URL中出现像

?keyword=apple&amp;keyword=iphone

登录后复制

这样，同一个参数名

keyword

登录后复制

出现了多次的情况，

URLSearchParams

登录后复制

提供了两种不同的方法来处理：

```
get(name)
```
登录后复制
：这个方法只会返回第一个匹配到的参数值。
```
const params = new URLSearchParams('?keyword=apple&amp;keyword=iphone&color=red');
const keyword = params.get('keyword');
console.log(keyword); // 输出: "apple"
```
登录后复制
如果你只关心第一个值，或者你知道参数不会重复，那么
```
get()
```
登录后复制
就足够了。
```
getAll(name)
```
登录后复制
：这个方法会返回一个包含所有匹配参数值的数组。

蓝心千询
蓝心千询是vivo推出的一个多功能AI智能助手

34

查看详情
```
const params = new URLSearchParams('?keyword=apple&amp;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

登录后复制

构造函数。

使用

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"

登录后复制

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

使用
```
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的查询参数的详细内容，更多请关注php中文网其它相关文章！