#Js篇： window.location 和 new URL区别

window.location 和 new URL区别

都可以用来获取和解析 URL，但它们在功能和用途上有一些区别。下面详细解释它们之间的不同之处。

window.location

window.location 是浏览器提供的一个对象，用于获取当前页面的 URL 信息，并且可以用来导航到新的 URL。它包含了许多有用的属性和方法。

主要属性
href: 完整的 URL 字符串。
protocol: URL 的协议部分（例如 http: 或 https:）。
host: 主机名和端口（例如 example.com:8080）。
hostname: 主机名（例如 example.com）。
port: 端口号（例如 8080）。
pathname: 路径部分（例如 /path/to/resource）。
search: 查询字符串部分（例如 ?query=param）。
hash: 片段标识符部分（例如 #fragment）。
主要方法
assign(url): 加载新的文档。
reload(forcedReload): 重新加载当前文档。
replace(url): 替换当前文档 URL，不保留历史记录。
示例

const currentLocation = window.location;console.log(currentLocation.href);      // 完整的 URL
console.log(currentLocation.protocol);  // 协议部分
console.log(currentLocation.host);      // 主机名和端口
console.log(currentLocation.hostname);  // 主机名
console.log(currentLocation.port);      // 端口号
console.log(currentLocation.pathname);  // 路径部分
console.log(currentLocation.search);    // 查询字符串部分
console.log(currentLocation.hash);      // 片段标识符部分

new URL

new URL 是一个构造函数，用于创建一个新的 URL 对象。它可以解析任意的 URL 字符串，并提供类似于 window.location 的属性。

主要属性
href: 完整的 URL 字符串。
protocol: URL 的协议部分（例如 http: 或 https:）。
host: 主机名和端口（例如 example.com:8080）。
hostname: 主机名（例如 example.com）。
port: 端口号（例如 8080）。
pathname: 路径部分（例如 /path/to/resource）。
search: 查询字符串部分（例如 ?query=param）。
hash: 片段标识符部分（例如 #fragment）。
origin: URL 的源（协议、主机名和端口）。
示例

const currentUrl = window.location.href;
const url = new URL(currentUrl);console.log(url.href);         // 完整的 URL
console.log(url.protocol);     // 协议部分
console.log(url.host);         // 主机名和端口
console.log(url.hostname);     // 主机名
console.log(url.port);         // 端口号
console.log(url.pathname);     // 路径部分
console.log(url.search);       // 查询字符串部分
console.log(url.hash);         // 片段标识符部分
console.log(url.origin);       // URL 的源

区别

用途:
window.location: 主要用于获取当前页面的 URL 信息，并提供导航功能。
new URL: 用于解析任意的 URL 字符串，提供更灵活的 URL 处理能力。
范围:
window.location: 仅限于当前页面的 URL。
new URL: 可以解析任何有效的 URL 字符串。
方法:
window.location: 提供了一些导航方法（如 assign、reload、replace）。
new URL: 没有导航方法，主要用于解析和操作 URL。
属性:
window.location: 提供了 origin 属性，但没有 origin 属性的 new URL 对象可以通过 url.origin 访问。
new URL: 提供了更多的属性和方法，如 searchParams，可以方便地处理查询字符串。
总结
window.location: 适用于获取当前页面的 URL 信息和导航操作。
new URL: 适用于解析和操作任意的 URL 字符串，提供更多灵活性和功能。

示例

const url = new URL('https://example.com:8080/path/to/resource?query=param#fragment');console.log(url.href);         // 输出: https://example.com:8080/path/to/resource?query=param#fragment
console.log(url.protocol);     // 输出: https:
console.log(url.hostname);     // 输出: example.com
console.log(url.port);         // 输出: 8080
console.log(url.pathname);     // 输出: /path/to/resource
console.log(url.search);       // 输出: ?query=param
console.log(url.hash);         // 输出: #fragment
console.log(url.origin);       // 输出: https://example.com:8080

protocol:
类型: String
描述: 返回 URL 的协议部分（包括冒号）。
示例: https:
hostname:
类型: String
描述: 返回 URL 的主机名部分。
示例: example.com
port:
类型: String
描述: 返回 URL 的端口部分（如果指定了端口）。
示例: 8080
pathname:
类型: String
描述: 返回 URL 的路径部分（从斜杠开始）。
示例: /path/to/resource
search:
类型: String
描述: 返回 URL 的查询字符串部分（从问号开始）。
示例: ?query=param
hash:
类型: String
描述: 返回 URL 的片段标识符部分（从井号开始）。
示例: #fragment
origin:
类型: String
描述: 返回 URL 的源（协议、主机名和端口）。