本文深入探讨了javascript `url` 构造函数在使用相对路径与基础url组合时可能遇到的常见陷阱，即基础url的路径部分被意外覆盖的问题。通过分析两种主要原因——相对路径以斜杠开头和基础url缺少末尾斜杠，并提供了明确的解决方案和示例代码，确保您能正确地构建出预期的完整url。
在现代Web开发中，构建和管理URL是常见的任务。JavaScript的 URL 构造函数提供了一种强大且标准化的方式来解析、构建和操作URL。然而，当尝试将一个相对路径与一个包含路径的基础URL（Base URL）组合时，开发者可能会遇到一个常见的困惑：基础URL的路径部分被意外地移除或覆盖。本文将详细解析这一现象，并提供正确的处理方法。
理解 URL 构造函数的行为
URL 构造函数接受两个参数：new URL(relativeURL, baseURL)。它的核心作用是根据 baseURL 解析 relativeURL。这里的关键在于 relativeURL 的类型和 baseURL 的结构。
考虑以下场景，我们希望将 /items 这个相对路径附加到 https://example.com/v1 这个基础URL之后，期望得到 https://example.com/v1/items。
const getUrl = () => {
const ids = ["1","2","3"];
// 初始尝试：相对路径以斜杠开头，基础URL无末尾斜杠
const url = new URL("/items", "https://example.com/v1");
url.searchParams.set("id", ids?.toString() ?? "");
return url.toString();
};
console.log(getUrl());
// 实际输出：https://example.com/items?id=1%2C2%2C3
// 期望输出：https://example.com/v1/items?id=1%2C2%2C3从上述代码的输出可以看出，v1 这个路径段被移除了。这是为什么呢？
立即学习“Java免费学习笔记（深入）”；
导致基础路径被覆盖的两种主要情况
这种行为通常是由两个因素共同或单独作用造成的：
1. 相对路径以斜杠 / 开头
当 relativeURL 以 / 开头时，它被解释为相对于 baseURL 的源 (origin) 的绝对路径，而不是相对于 baseURL 的完整路径。一个URL的源包括协议、主机名和端口。这意味着 new URL("/items", "https://example.com/v1") 中的 /items 会被视为 https://example.com 的根目录下的 items，从而忽略了 v1。
例如：
- new URL("/pathA", "http://domain.com/pathB/pathC") 会解析为 http://domain.com/pathA。
- new URL("/pathA", "http://domain.com:8080/pathB") 会解析为 http://domain.com:8080/pathA。
2. 基础URL缺少末尾斜杠 /
如果 baseURL 的路径部分没有以 / 结尾，URL 构造函数会将其最后一个路径段视为一个文件，而不是一个目录。在这种情况下，当附加一个不以 / 开头的相对路径时，这个“文件”会被新的相对路径替换掉。
例如：
- new URL("subpath", "http://domain.com/pathA") 会解析为 http://domain.com/subpath，pathA 被 subpath 替换。
- new URL("subpath", "http://domain.com/pathA/") 会解析为 http://domain.com/pathA/subpath，pathA 被视为目录。
在我们的原始例子 new URL("/items", "https://example.com/v1") 中，虽然 items 前面有 / 导致它被解释为根路径，但如果 items 前面没有 /，且 v1 没有末尾斜杠，也会导致 v1 被 items 替换。
正确构建URL的解决方案
为了确保基础URL的路径部分能够正确地保留并附加新的相对路径，我们需要同时满足以下两个条件：
- 移除相对路径开头的斜杠： 将 "/items" 改为 "items"。这样，items 将被视为相对于 baseURL 的当前路径的相对路径。
- 在基础URL末尾添加斜杠： 将 "https://example.com/v1" 改为 "https://example.com/v1/"。这明确告诉 URL 构造函数，v1 是一个目录，而不是一个文件。
结合这两个修改，我们可以得到正确的URL构建方式：
const getUrl = () => {
const ids = ["1","2","3"];
// 修正后的代码：相对路径无斜杠，基础URL有末尾斜杠
const url = new URL("items", "https://example.com/v1/"); // 注意这里的修改
url.searchParams.set("id", ids?.toString() ?? "");
return url.toString();
};
console.log(getUrl());
// 输出：https://example.com/v1/items?id=1%2C2%2C3通过上述修改，URL 构造函数能够正确地将 items 路径附加到 https://example.com/v1/ 之后，从而生成我们期望的完整URL。
总结与注意事项
理解 URL 构造函数在处理相对路径和基础URL时的细微差别至关重要。
-
相对路径 relativeURL：
- 如果以 / 开头，它被视为相对于 baseURL 源 (origin) 的绝对路径。
- 如果不以 / 开头，它被视为相对于 baseURL 当前路径的相对路径。
-
基础URL baseURL：
- 如果路径部分以 / 结尾（例如 https://example.com/v1/），则最后一个路径段 v1 被视为一个目录。
- 如果路径部分不以 / 结尾（例如 https://example.com/v1），则最后一个路径段 v1 被视为一个文件。
因此，在需要将一个相对路径附加到包含路径的基础URL之后时，请务必确保：
- 相对路径不以 / 开头。
- 基础URL的路径部分以 / 结尾。
遵循这些规则将帮助您避免常见的URL构建错误，确保应用程序中的URL逻辑健壮且符合预期。
