如何基于JavaScript URL实例追加子目录以构建目标URL？

目标是构建URL：https://api.foo.com/crm/v3/objects/companies/12345

你已经可以通过外部字符串拼接实现，但直接基于URL实例传递相对路径时，会替换掉最后一段子目录（比如传入12345会把companies替换成12345，而非追加）。以下是可行的解决方法：

方法1：使用./相对路径构造新URL #

通过在追加的路径前加上./，告诉URL构造器在当前目录下添加子路径，而非替换最后一段：

const objectType = 'companies';
let urlRequest = new URL(`/crm/v3/objects/${objectType}`, 'https://api.foo.com');
// 当前URL：https://api.foo.com/crm/v3/objects/companies

const objectId = '12345';
urlRequest = new URL(`./${objectId}`, urlRequest);
// 结果URL：https://api.foo.com/crm/v3/objects/companies/12345

方法2：直接修改URL的pathname属性 #

手动拼接路径并赋值给pathname，同时处理可能的多余斜杠：

const objectType = 'companies';
let urlRequest = new URL(`/crm/v3/objects/${objectType}`, 'https://api.foo.com');

const objectId = '12345';
// 先移除原路径末尾的斜杠，再拼接新路径
urlRequest.pathname = `${urlRequest.pathname.replace(/\/$/, '')}/${objectId}`;
// 结果URL：https://api.foo.com/crm/v3/objects/companies/12345

方法3：封装辅助函数处理路径追加 #

如果需要多次使用，可以封装一个函数统一处理路径拼接的细节：

function appendPathToURL(url, pathSegment) {
  // 移除原路径末尾斜杠和新路径开头斜杠，避免重复斜杠
  const cleanedBasePath = url.pathname.replace(/\/$/, '');
  const cleanedSegment = pathSegment.replace(/^\//, '');
  const newPath = `${cleanedBasePath}/${cleanedSegment}`;
  return new URL(newPath, url.origin);
}

// 使用示例
const objectType = 'companies';
let urlRequest = new URL(`/crm/v3/objects/${objectType}`, 'https://api.foo.com');
const objectId = '12345';
urlRequest = appendPathToURL(urlRequest, objectId);

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