在前端开发中，有时我们需要添加或更新 URL 中的查询字符串参数。本文将介绍如何使用 JavaScript 来进行这些操作。
查询字符串
查询字符串是位于 URL 问号（?）后面的一部分，它包含了一些键值对，用于向服务器传递额外的数据。例如：
https://www.example.com/search?q=foo&sort=price
上面的 URL 中包含了两个查询字符串参数：q 和 sort。它们的值分别为 foo 和 price。
查询字符串参数通常用来控制页面的行为和显示内容。例如，在一个商品列表页面中，可以使用查询字符串参数 sort 来控制商品的排序方式。
添加查询字符串参数
要添加一个查询字符串参数，我们首先需要判断 URL 中是否已经存在该参数。如果不存在，则可以直接在问号后面添加新的参数；如果存在，则需要在原有参数的基础上进行修改。
以下是一个函数，它能够实现向 URL 中添加或更新指定的查询字符串参数：
-- -------------------- ---- -------
-------- ------------------ ---- ------ -
----- ------ - --- ---------
----- ------------ - --- -------------------------------
-- ----------------
-- ----------------------- -
--------------------- -------
- ---- -
-- --------
------------------------ -------
-
-- ----------------- --- -
------------- - ------------------------
------ ------------------
-该函数接受三个参数：原始 URL、要添加或更新的参数的键名和键值。它首先将 URL 解析为一个 URL 对象，然后获取其中的查询字符串部分，并将其转换为一个 URLSearchParams 对象。接着，它检查该对象中是否已经存在了指定的参数。如果存在，则使用 set() 方法来更新它的值；否则，使用 append() 方法来添加新的参数。最后，它将修改后的查询字符串重新拼接到原始 URL 中，并返回最终的 URL。
以下是一个使用示例：
const originalUrl = 'https://www.example.com/search?q=foo'; const newUrl = addQueryParam(originalUrl, 'sort', 'price'); console.log(newUrl); // 输出：https://www.example.com/search?q=foo&sort=price
更新查询字符串参数
要更新一个查询字符串参数，我们只需要找到它并修改它的值即可。可以使用上面介绍的 addQueryParam() 函数来实现这个功能。
以下是一个更简洁的 updateQueryParam() 函数，它调用了 addQueryParam() 函数来完成更新操作：
function updateQueryParam(url, key, value) {
return addQueryParam(url, key, value);
}这个函数接受的参数与 addQueryParam() 函数相同。它直接调用了 addQueryParam() 函数，并将结果返回。
以下是一个使用示例：
const originalUrl = 'https://www.example.com/search?q=foo&sort=price'; const newUrl = updateQueryParam(originalUrl, 'sort', 'date'); console.log(newUrl); // 输出：https://www.example.com/search?q=foo&sort=date
结论
在本文中，我们介绍了如何使用 JavaScript 来添加或更新 URL 中的查询字符串参数。这些操作对于控制页面行为和显示内容非常有用。我们提供了两个函数：addQueryParam() 和 updateQueryParam()，它们可以方便地实现这些操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8590
