3分钟搞定：一网打尽，Url 查询参数全搜罗！

2023-10-27 15:36:12

在前端开发工作中，利用 Url 进行参数传递是一项十分常见的方法。在页面跳转时，通过 Url 携带某些信息，如状态、id、区分页面来源的字段值等。因此，学习了解如何获取 Url 查询参数值就显得尤为重要。本文将提供获取 Url 查询参数值的代码示例，帮助开发者快速掌握 Url 查询参数相关知识，轻松获取 Url 查询参数值。

1.什么是 Url 查询参数？

Url 查询参数，也称为 Url 参数或查询字符串，是指在 Url 中问号（?）之后的部分。它通常用于向服务器传递数据，例如，在搜索引擎中，Url 查询参数可以用来指定搜索查询。

2.如何获取 Url 查询参数值？

在 JavaScript 中，可以通过以下几种方法获取 Url 查询参数值：

使用 window.location.search 属性。
使用 URLSearchParams 接口。
使用正则表达式。

3.获取 Url 查询参数值代码示例

3.1 使用 `window.location.search` 属性

// 获取 Url 查询参数
const queryString = window.location.search;

// 解析查询参数
const params = new URLSearchParams(queryString);

// 获取查询参数值
const value = params.get('name');

3.2 使用 `URLSearchParams` 接口

// 获取 Url 查询参数
const url = new URL('https://example.com?name=John Doe');

// 获取查询参数
const params = url.searchParams;

// 获取查询参数值
const value = params.get('name');

3.3 使用正则表达式

// 获取 Url 查询参数
const queryString = window.location.search;

// 匹配查询参数
const matches = queryString.match(/name=([^&]+)/);

// 获取查询参数值
const value = matches[1];