js怎么看url

JS 查看 URL 的方法有以下几种：使用 window.location、使用 URL 对象、解析查询字符串。这些方法都可以帮助你在不同的场景下获取和处理 URL。 其中，使用 URL 对象是一个非常方便且强大的方法，它提供了一种结构化的方式来访问 URL 的各个部分。接下来，我将详细介绍这几种方法。

一、使用 `window.location`

1. 获取完整的 URL

window.location 对象包含了浏览器当前加载的页面的 URL 信息。你可以通过 window.location.href 获取整个 URL。

console.log(window.location.href); // 输出完整的 URL

window.location 对象不仅可以获取当前页面的 URL，还可以用来重定向页面。

2. 获取 URL 的各个部分

window.location 提供了许多属性来访问 URL 的不同部分，比如协议、主机名、路径和查询字符串。

console.log(window.location.protocol); // http:
console.log(window.location.hostname); // example.com
console.log(window.location.pathname); // /path/to/page
console.log(window.location.search);   // ?query=string
console.log(window.location.hash);     // #hash

这些属性非常有用，可以帮助你获取和操作页面的不同部分。

二、使用 `URL` 对象

1. 创建 `URL` 对象

URL 对象是一个强大的工具，它允许你以一种结构化的方式解析和操作 URL。你可以通过传递一个 URL 字符串来创建一个 URL 对象。

const url = new URL('https://example.com:8000/path/to/page?query=string#hash');

2. 访问 `URL` 对象的属性

URL 对象提供了许多属性来访问 URL 的各个部分，与 window.location 类似，但更为灵活和强大。

console.log(url.protocol); // https:
console.log(url.hostname); // example.com
console.log(url.port);     // 8000
console.log(url.pathname); // /path/to/page
console.log(url.search);   // ?query=string
console.log(url.hash);     // #hash

3. 修改 `URL` 对象的属性

你还可以修改 URL 对象的属性，这对于动态生成 URL 非常有用。

url.pathname = '/new/path';
url.search = '?new=query';
console.log(url.href); // 输出修改后的完整 URL

三、解析查询字符串

1. 手动解析查询字符串

查询字符串通常以 key=value 的形式出现，并用 & 分隔。你可以手动解析它们。

const queryString = window.location.search;
const params = new URLSearchParams(queryString);
for (const [key, value] of params) {
  console.log(`${key}: ${value}`);
}

2. 使用 `URLSearchParams` 对象

URLSearchParams 对象提供了一种简便的方法来解析和操作查询字符串。

const params = new URLSearchParams('?query=string&key=value');
console.log(params.get('query')); // string
console.log(params.get('key'));   // value

四、常见用例

1. 获取 URL 参数

获取 URL 参数是一个非常常见的需求，可以通过 URLSearchParams 对象来实现。

function getQueryParam(param) {
  const params = new URLSearchParams(window.location.search);
  return params.get(param);
}
console.log(getQueryParam('query')); // 输出查询参数的值

2. 动态生成 URL

你可以使用 URL 对象和 URLSearchParams 对象来动态生成 URL。

const baseUrl = 'https://example.com/path';
const params = new URLSearchParams({ key: 'value', query: 'string' });
const url = `${baseUrl}?${params.toString()}`;
console.log(url); // 输出生成的 URL

3. 页面重定向

你可以使用 window.location 对象来重定向页面。

window.location.href = 'https://example.com/newpage';

4. 解析并修改 URL

你可以使用 URL 对象来解析并修改 URL。

const url = new URL(window.location.href);
url.pathname = '/newpath';
url.searchParams.set('key', 'newvalue');
console.log(url.href); // 输出修改后的 URL

五、总结

通过本文，我们详细介绍了在 JavaScript 中查看和操作 URL 的多种方法。使用 window.location 对象可以方便地获取和修改当前页面的 URL，使用 URL 对象则提供了更加灵活和强大的功能。此外，URLSearchParams 对象使得解析和操作查询字符串变得更加简单。希望这些方法能帮助你在日常开发中更好地处理 URL。