JavaScript 中向 URL 添加参数的方法

在JavaScript开发中，经常会遇到需要向URL添加参数的情况，比如在构建动态网页、发送AJAX请求或者进行页面跳转时。下面将介绍几种常见的向URL添加参数的方法。

方法一：使用URLSearchParams对象

URLSearchParams对象提供了一种简单的方式来处理URL的查询参数。以下是一个示例：

const url = new URL('https://example.com');
const params = new URLSearchParams({
  key1: 'value1',
  key2: 'value2'
});
url.search = params;
console.log(url.href);

在这个示例中，首先创建了一个URL对象，然后使用URLSearchParams对象创建了一组参数，并将其赋值给URL对象的search属性。最后，通过访问URL对象的href属性获取添加参数后的完整URL。

方法二：手动拼接参数

如果不想使用URLSearchParams对象，也可以手动拼接参数到URL中。示例如下：

const baseUrl = 'https://example.com';
const params = {
  key1: 'value1',
  key2: 'value2'
};
let queryString = '';
for (const key in params) {
  if (queryString) {
    queryString += '&';
  }
  queryString += `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`;
}
const finalUrl = `${baseUrl}?${queryString}`;
console.log(finalUrl);

在这个示例中，首先定义了基础URL和参数对象，然后通过循环遍历参数对象，将参数拼接成查询字符串，并使用encodeURIComponent函数对参数进行编码，最后将查询字符串添加到基础URL后面。

方法三：使用第三方库

除了上述方法外，还可以使用一些第三方库来处理URL参数的添加，比如qs库。qs库提供了更多的功能和灵活性，例如处理嵌套对象等复杂情况。

JavaScript中向URL添加参数有多种方法，开发人员可以根据具体的需求和项目情况选择合适的方法。在实际应用中，还需要注意对参数进行正确的编码和处理，以确保URL的合法性和安全性。