本文旨在解决在使用 JavaScript `URL` 构造函数时，由于相对路径和 Base URL 格式不正确导致的路径剥离问题。我们将深入探讨 `URL` 构造函数的行为，并提供明确的解决方案，确保生成的 URL 包含预期的 Base URL 路径和查询参数。通过本文的学习，开发者可以避免常见的 URL 构建错误，提高代码的健壮性。
在使用 JavaScript 构建 URL 时，URL 构造函数提供了一种便捷的方式来组合 Base URL 和相对路径，并添加查询参数。然而，不正确的相对路径或 Base URL 格式可能导致意想不到的结果，例如 Base URL 中的路径部分被剥离。 本文将深入探讨这个问题，并提供清晰的解决方案。
问题分析
当使用 new URL(url, base) 构造函数时，url 参数会被解析为相对于 base URL 的路径。如果 url 是一个以斜杠 / 开头的相对路径，它会被视为相对于域名根目录的路径，而不是相对于 base URL 的路径。 此外，如果 base URL 没有以斜杠 / 结尾，url 将替换 base URL 的最后一个路径段。
解决方案
要解决 Base URL 路径被剥离的问题，需要确保以下两点：
立即学习“Java免费学习笔记（深入）”；
- 相对路径不以斜杠开头： 如果 url 应该相对于 base URL 的路径，则不要以斜杠 / 开头。
- Base URL 以斜杠结尾： 确保 base URL 以斜杠 / 结尾，以避免 url 替换 base URL 的最后一个路径段。
示例代码
以下代码演示了如何正确使用 URL 构造函数：
const getUrl = () => {
const ids = ["1", "2", "3"];
const url = new URL("items", "https://example.com/v1/"); // 修正：相对路径不以斜杠开头，Base URL 以斜杠结尾
url.searchParams.set("id", ids?.toString() ?? "");
return url.toString();
};
console.log(getUrl()); // 输出: https://example.com/v1/items?id=1,2,3在这个修正后的示例中，url 参数 "items" 不以斜杠开头，并且 base URL "https://example.com/v1/" 以斜杠结尾。 这确保了 url 被正确地附加到 base URL 的路径，生成了预期的 URL。
总结
在使用 JavaScript URL 构造函数时，理解相对路径和 Base URL 的格式至关重要。 通过遵循上述解决方案，可以避免 Base URL 路径被剥离的问题，并确保生成的 URL 符合预期。 始终注意相对路径是否以斜杠开头，以及 Base URL 是否以斜杠结尾，以确保 URL 构建的正确性。
额外提示
- 在复杂的 URL 构建场景中，可以使用 URLSearchParams 对象来更方便地管理查询参数。
- 在处理用户输入的 URL 时，务必进行验证和清理，以防止安全漏洞，例如 URL 注入。
- 对于需要处理特殊字符的 URL，可以使用 encodeURIComponent() 函数进行编码，以确保 URL 的有效性。
