用好 URL 参数，开发生活更轻松

2023-03-29 17:13:31

URL 参数的奇妙世界：在前端开发中掌控数据传输

URL 参数，看似不起眼，却在前端开发中扮演着至关重要的角色。它们就像数据传递的小船，将信息从浏览器运送到服务器，再将服务器的响应送回浏览器，串联起整个Web应用程序的交互。

什么是 URL 参数？

URL 参数是附加在 URL 末尾的数据片断，用于向服务器传递特定信息。它们通常以问号 (?) 开头，后面跟着一组键值对，用等号 (=) 分隔。例如，以下 URL 包含一个名为 productId 的参数，其值为 123：

https://example.com/product?productId=123

获取 URL 参数的方法

在前端开发中，有几种方法可以获取 URL 参数：

URL.searchParams： HTML5 引入的一个便利特性，可轻松访问和操作 URL 参数。
location.search： 包含查询字符串（即 URL 中包含参数的部分）。
window.location.href： 包含完整的 URL，包括参数。

处理 URL 参数

获取 URL 参数后，你就可以对其进行处理了。以下是几种常见的操作：

解码： 参数可能被编码以保证安全传输，因此在使用前需要解码。
编码： 在某些情况下，需要对参数进行编码。
追加： 向 URL 中添加新的参数。
删除： 从 URL 中移除参数。

URL 参数的应用场景

URL 参数在前端开发中有着广泛的应用：

获取表单数据
实现分页和排序
过滤数据
控制页面行为
构建单页应用

使用代码示例了解 URL 参数的处理

获取 URL 参数：

// 使用 URL.searchParams
const urlParams = new URLSearchParams(window.location.search);
const productId = urlParams.get('productId');

// 使用 location.search
const searchParams = new URLSearchParams(location.search);
const productId = searchParams.get('productId');

处理 URL 参数：

// 解码
const encodedProductId = 'productId%3D123';
const decodedProductId = decodeURIComponent(encodedProductId);

// 追加
urlParams.append('newParam', 'newValue');
window.location.search = urlParams.toString();

// 删除
urlParams.delete('productId');
window.location.search = urlParams.toString();