在 JavaScript 中,可以通过以下方法判断一个 URL 是相对路径还是绝对路径:
1. 直接检查字符串特征
绝对路径通常以 http://
、https://
或 //
(协议相对)开头,而相对路径不以这些前缀开头。可以通过正则表达式或简单的字符串检查实现:
function isAbsoluteUrl(url) {
return /^(https?:)?\/\//i.test(url) || url.startsWith('http://') || url.startsWith('https://');
}
// 测试用例
console.log(isAbsoluteUrl("https://example.com")); // true(绝对)
console.log(isAbsoluteUrl("//cdn.example.com")); // true(协议相对)
console.log(isAbsoluteUrl("/images/logo.png")); // false(相对)
console.log(isAbsoluteUrl("logo.png")); // false(相对)
2. 使用浏览器内置的 URL
API
通过 new URL()
构造函数解析 URL,结合当前页面的基础地址 (baseURL
) 可以自动补全相对路径。如果解析后的 URL 与原输入不同,则说明输入是相对路径:
function isAbsoluteUrl(url, base = window.location.href) {
try {
new URL(url); // 如果能直接解析,说明是绝对路径
return true;
} catch (e) {
try {
new URL(url, base); // 尝试基于当前页面补全
return false; // 能补全则是相对路径
} catch (e) {
return false; // 无效的 URL(如空字符串)
}
}
}
// 测试用例
console.log(isAbsoluteUrl("https://example.com")); // true
console.log(isAbsoluteUrl("/api/data")); // false
3. Web API:URL.canParse()
(较新特性)
现代浏览器支持 URL.canParse()
方法,可直接检测是否为有效绝对 URL:
function isAbsoluteUrl(url) {
return URL.canParse(url); // true → 绝对路径;false →可能是相对或无效
}
总结
- 推荐方法:优先使用
URL
API(方法2),它是语言层原生支持的标准方案。 - 注意事项:
- 如果输入是空字符串或非法格式,需要额外处理。
file://
、data:
等特殊协议也属于绝对路径。
如果需要进一步处理路径(如拼接),可以使用 new URL(relativePath, base)
。
内容由零声教学AI助手提供,问题来源于学员提问