在前端开发中，我们经常需要在 URL 中传递一些参数，以便页面根据这些参数的值来做出相应的操作或显示不同的内容。本文将介绍如何使用 JavaScript 向 URL 添加参数，并提供详细的示例代码和实用的指导意义。
URL 查询字符串
在浏览器中，URL 可以包含查询字符串（query string），即问号后面的那一部分。查询字符串由多个键值对组成，每个键值对之间用“&”符号分隔，键名和键值之间用“=”号分隔。例如：
https://example.com/path/to/page?name=John&age=30
上述 URL 中，查询字符串为“name=John&age=30”，包含两个键值对：“name”对应的值为“John”，“age”对应的值为“30”。
向 URL 添加参数
使用 JavaScript 向 URL 添加参数，可以通过以下步骤实现：
- 获取当前页面的 URL。
- 判断 URL 是否已经包含查询字符串。
- 如果 URL 已经包含查询字符串，则在其末尾添加“&”符号和新的键值对；如果没有查询字符串，则在 URL 末尾添加“?”符号和新的键值对。
- 使用修改后的 URL 替换当前页面的 URL。
下面是一段示例代码，演示了如何向 URL 中添加参数：
-- -------------------- ---- -------
-------- ------------------ ------ -
----- --- - --- --------------------------
----- ------------ - --- ----------------------------
-- ----------------------- -
--------------------- -------
- ---- -
------------------------ -------
-
---------- - ------------------------
----------------------------- ----- -------- -- --- ----------
-上述代码中，addQueryParam函数接收两个参数：键名和键值。首先，它创建了一个新的 URL 对象，用于获取当前页面的 URL。然后，它从 URL 中提取查询字符串并将其封装到 URLSearchParams 对象中。接下来，它检查查询字符串中是否已经包含了指定的键，如果是，则更新该键的值；否则，向查询字符串中添加一个新的键值对。最后，使用修改后的 URL 替换当前页面的 URL。
实用指导意义
使用 JavaScript 向 URL 添加参数，可以在很多场景下派上用场，例如：
- 分页查询：在分页查询时，可以将页码作为查询参数传递给后端服务器，以便获取指定页码的数据。
- 搜索功能：在搜索功能中，可以将搜索关键词作为查询参数传递给后端服务器，以便获取与搜索关键词相关的结果。
- 统计分析：在统计分析中，可以将用户行为等信息作为查询参数传递给后端服务器，以便进行数据分析和挖掘。
总之，使用 JavaScript 向 URL 添加参数是一种非常实用的技巧，可以为我们的前端开发工作带来很多便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9709
