如何在 JavaScript 中向 URL 添加参数？

1. 前言

在 Web 开发中，我们经常需要向 URL 中添加参数，以在不同的页面中传递数据。JavaScript 作为一种客户端脚本语言，可以帮助我们实现这个功能。

本文将介绍在 JavaScript 中向 URL 添加参数的几种方法，并且通过实例演示如何使用这些方法。

2. 向 URL 添加单个参数

2.1 通过字符串拼接

向 URL 中添加单个参数的最简单方法是使用字符串拼接。我们可以将参数名和参数值以“？”的形式添加到 URL 的末尾，然后添加一组键值对。

let url = "http://example.com";

let parameterName = "name";
let parameterValue = "Tom";
url += "?";
url += parameterName + "=" + parameterValue;
console.log(url); // http://example.com?name=Tom

上面的代码中，我们首先定义了一个 URL，然后定义了参数名称和参数值。接着，我们通过字符串拼接将参数添加到 URL 的末尾，最后输出结果。

2.2 通过 URLSearchParams 对象

从 ECMAScript 6 开始，JavaScript 提供了 URLSearchParams 对象，用于处理 URL 中的查询字符串。该对象具有 set() 方法，可以直接向 URL 中添加参数。

let url = new URL("http://example.com");

let params = new URLSearchParams(url.search);
params.set("name", "Tom");
url.search = params.toString();
console.log(url); // http://example.com?name=Tom

上面的代码中，我们首先创建了一个 URL 对象，然后使用 URLSearchParams 对象处理了 URL 中的查询字符串。接着，我们使用 set() 方法添加了参数，并将变更后的查询字符串写回 URL 中。

3. 向 URL 添加多个参数

如果需要向 URL 中添加多个参数，我们可以使用上述方法的循环调用或者使用对象。下面我们将分别演示这两种方法。

3.1 循环调用方法

let url = "http://example.com";

let parameters = {
  "name": "Tom",
  "age": "25",
  "gender": "male"
};
let isFirst = true;
for (let key in parameters) {
  if (isFirst) {
    url += "?";
    isFirst = false;
  } else {
    url += "&";
  }
  url += key + "=" + parameters[key];
}
console.log(url); // http://example.com?name=Tom&age=25&gender=male

上面的代码中，我们首先定义了一个 URL 和一个对象，该对象包含了多个参数。接着，我们使用 for-in 循环遍历该对象，并以“？”开头的方式向 URL 中添加第一个参数，以“&”符号的方式添加其他参数。

3.2 对象方法

class URLBuilder {

  constructor(url) {
    this.url = url;
    this.params = new URLSearchParams();
  }
  addParam(name, value) {
    this.params.append(name, value);
    return this;
  }
  build() {
    return `${this.url}?${this.params.toString()}`;
  }
}
let url = new URLBuilder("http://example.com")
          .addParam("name", "Tom")
          .addParam("age", "25")
          .addParam("gender", "male")
          .build();
console.log(url); // http://example.com?name=Tom&age=25&gender=male

上面的代码中，我们定义了一个 URLBuilder 类，该类包含 addParam() 和 build() 方法，用于向 URL 中添加参数和构建 URL。这样我们就可以实现链式调用，更加方便地添加多个参数。

4. 总结

本文介绍了在 JavaScript 中向 URL 中添加参数的几种方法，包括字符串拼接、URLSearchParams 对象、循环调用和对象方法。这些方法都非常简单直接，可以帮助我们更好地传递数据和构建链接。