如何使用原生URL构造和操作无base的相对路径URI？

原生URL构造函数本身就支持「相对路径+合法base地址」的组合初始化实例，核心实现逻辑非常简单：

• 选一个固定的、永远不会和真实业务冲突的占位base，把你要处理的相对URI挂在这个base上
• 所有查询参数、路径、哈希的操作逻辑，和操作完整URL的方式完全一致
• 操作完成后把开头的占位base前缀截掉，就能得到纯相对的URI字符串

对应你提的所有需求，完整可运行的代码示例如下：

// 固定占位base，使用保留的无效顶级域名，不会和真实站点冲突
const PLACEHOLDER_BASE = 'https://placeholder.invalid';

// 1. 创建初始路径为 /path/to/resource 的URI对象
const uri = new URL('/path/to/resource', PLACEHOLDER_BASE);

// 2. 设置查询参数，直接复用URL自带的searchParams API
uri.searchParams.set('query', 'param');

// 3. 设置哈希值
uri.hash = '#hash';

// 4. 截取掉开头的占位base，得到纯相对的URI字符串
// 输出结果即为 /path/to/resource?query=param#hash
const finalRelativeUri = uri.href.slice(PLACEHOLDER_BASE.length);

操作注意事项 #

• 这套实现的API和你之前处理完整URL的逻辑零差异，searchParams支持的set/get/delete/append等便捷方法可以直接使用，不需要手动拼接查询字符串。
• 占位base一定要用固定值，推荐使用保留的.invalid顶级域，这类域名不会被分配给真实站点，不会出现字符串替换时误删业务内容的问题。
• 日常操作中仅修改pathname、search、hash、searchParams这类和相对路径相关的属性即可，不要改动属于base的protocol、host、port字段，就能保证输出的相对路径完全符合预期。

内容的提问来源于stack exchange，提问作者Mike