在Javascript中将参数添加到URL

在开发Web应用程序时，我们通常需要将一些参数添加到URL中以完成特定的功能，例如搜索、过滤或分页。在Javascript中我们可以轻松地将参数添加到URL中。

方法一：使用URLSearchParams API

URLSearchParams API是现代浏览器在Javascript中处理URL参数的内置API。可以使用它来构建查询字符串。

let urlParams = new URLSearchParams(window.location.search);

// 添加参数到URL中
urlParams.set('param1', 'value1');
urlParams.set('param2', 'value2');

// 获取参数值
let param1 = urlParams.get('param1');
let param2 = urlParams.get('param2');

// 构建最终URL
let url = window.location.pathname + '?' + urlParams.toString();

// 重定向到新URL
window.location.href = url;

在上面的例子中，我们首先使用URLSearchParams对象获取URL中的所有参数。然后我们使用set()方法添加需要的参数。最后，我们调用toString()方法将URLSearchParams对象转换为查询字符串，并将其附加到原始URL路径中。最后，使用Window.location.href将浏览器重定向到新URL。

方法二：手动构建查询字符串

如果你需要支持更多的浏览器，你可以手动构建查询字符串。下面是一个例子：

let url = 'http://example.com/search?';
let params = {
  param1: 'value1',
  param2: 'value2'
};

for (let key in params) {
  if (params.hasOwnProperty(key)) {
    url += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&';
  }
}

// 移除最后一个'&'
url = url.substring(0, url.length - 1);

// 重定向到新URL
window.location.href = url;

在上面的例子中，我们首先给定一个基本的URL。然后我们使用一个包含所需参数的对象。我们循环这个对象，并使用encodeURIComponent()函数对每个参数进行编码。最后，我们使用字符串连接操作符'+'和'&'将所有参数连接在一起，构造一个查询字符串。最后，我们删除最后一个'&'，并使用Window.location.href将浏览器重定向到新URL。

无论你选择哪种方法，都应该在添加哪些参数以及何时添加它们方面进行慎重的决策。通常，你只需要向URL中添加最少的参数，以便保持URL简洁和易读，从而提高可用性和可维护性。