如何在 JavaScript 中构建 URL

本文正在参加「金石计划」

通常，在项目中，偶尔会遇到跳转 URL 的情况，我们则需要在 JavaScript 中用字符串拼接创建一个 URL。

这个任务非常简单，不需要多么高深的的知识，就是简单的字符串拼接，而且因为 URL 可能非常微妙和复杂，为了集中注意力正确处理它。使用模板字符串相比 + 拼接是更好地选择。

一般的 URL 拼接都不复杂，稍微复杂一点可能就是：查询参数了。那就下面以查询参数举例：

当查询参数比较多的时候，采用模版字符串这种方法就容易难以阅读而导致错误。让我们看一个例子：

const name = "นักรบแกะสลักของพระเจ้า"; // Condor Hero 泰语版本
const sex = "girl";
const age = 18;

const url = `https://juejin.cn?name=${name}&sex=${sex}&age=${age}`;
// "https://juejin.cn?name=นักรบแกะสลักของพระเจ้า&sex=girl&age=18"

写到这里，你可能突然想起来还没有对特殊字符进行编码。是时候使用 encodeURIComponent()解决这个问题：

const name = "นักรบแกะสลักของพระเจ้า"; // Condor Hero 泰语版本
const sex = "girl";
const age = 18;

const url = `https://juejin.cn?name=${encodeURIComponent(name)}&sex=${encodeURIComponent(sex)}&age=${encodeURIComponent(age)}`;

// "https://juejin.cn?name=%E0%B8%99%E0%B8%B1%E0%B8%81%E0%B8%A3%E0%B8%9A%E0%B9%81%E0%B8%81%E0%B8%B0%E0%B8%AA%E0%B8%A5%E0%B8%B1%E0%B8%81%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B8%9E%E0%B8%A3%E0%B8%B0%E0%B9%80%E0%B8%88%E0%B9%89%E0%B8%B2&sex=girl&age=18"

查询参数过多，无论模版字符串换行还是不换行都会导致阅读不佳。

幸运的是浏览器提供一种更好的方法——URL，可以使用 URL 对象在 JavaScript 中构造 URL。

让我们看看如何使用它来解决上面的问题：

const name = "นักรบแกะสลักของพระเจ้า"; // Condor Hero 泰语版本
const sex = "girl";
const age = 18;

// Good
const url = new URL('https://juejin.cn');

url.searchParams.append("name", name)
url.searchParams.append("sex", sex)
url.searchParams.append("age", age)

url.toString();
// "https://juejin.cn/?name=%E0%B8%99%E0%B8%B1%E0%B8%81%E0%B8%A3%E0%B8%9A%E0%B9%81%E0%B8%81%E0%B8%B0%E0%B8%AA%E0%B8%A5%E0%B8%B1%E0%B8%81%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B8%9E%E0%B8%A3%E0%B8%B0%E0%B9%80%E0%B8%88%E0%B9%89%E0%B8%B2&sex=girl&age=18"

不可否认，使用 URL 对象不如模板字符串逻辑直接，但毫无疑问现在的代码更具可读性和可维护性，并且更不容易出错。而且查询参数现在已正确编码，并自动添加定界符。

虽然查询参数是处理 URL 时最常见的问题，但该URL对象在许多其他情况下也很有用。例如，您可以更改 URL 的协议、主机名、端口、路径、哈希等。