js怎么获取本地网址

在JavaScript中获取本地网址的方法有很多种，包括使用window.location对象、document.URL属性等。 其中最常用的方法是通过window.location对象，因为它不仅可以获取当前网址，还能分解出网址的各个部分，如协议、主机名、端口号、路径等。

详细描述：

使用window.location对象可以轻松获取并操作浏览器的当前URL。 例如，通过window.location.href可以获取整个URL，通过window.location.hostname可以获取主机名等。window.location对象是一个非常强大的工具，适用于各种需要操作或获取URL信息的场景。

一、获取本地网址的基本方法

1、使用`window.location`

window.location是一个包含当前URL的对象。它提供了多个属性，可以分别获取URL的不同部分。

window.location.href：返回完整的URL。
window.location.protocol：返回协议部分（如http:或https:）。
window.location.hostname：返回域名或IP地址。
window.location.port：返回端口号。
window.location.pathname：返回路径部分。
window.location.search：返回查询字符串部分。
window.location.hash：返回锚部分（即#后面的内容）。

console.log(window.location.href);       // 输出完整的URL
console.log(window.location.protocol);   // 输出协议部分
console.log(window.location.hostname);   // 输出主机名
console.log(window.location.port);       // 输出端口号
console.log(window.location.pathname);   // 输出路径部分
console.log(window.location.search);     // 输出查询字符串
console.log(window.location.hash);       // 输出锚部分

2、使用`document.URL`

document.URL属性也可以用来获取当前URL，但它不如window.location灵活，因为它不能分解URL的各个部分。

console.log(document.URL); // 输出完整的URL

二、分解URL的各个部分

1、获取协议、主机名和端口

通过window.location.protocol、window.location.hostname和window.location.port可以分别获取URL的协议、主机名和端口号。

let protocol = window.location.protocol;
let hostname = window.location.hostname;
let port = window.location.port;
console.log(`协议：${protocol}`);
console.log(`主机名：${hostname}`);
console.log(`端口号：${port}`);

2、获取路径、查询字符串和锚部分

通过window.location.pathname、window.location.search和window.location.hash可以分别获取URL的路径、查询字符串和锚部分。

let pathname = window.location.pathname;
let search = window.location.search;
let hash = window.location.hash;
console.log(`路径：${pathname}`);
console.log(`查询字符串：${search}`);
console.log(`锚：${hash}`);

三、动态修改URL

除了获取当前URL，window.location还可以用来动态修改URL，从而实现页面跳转或刷新。

1、修改整个URL

通过设置window.location.href，可以修改整个URL，从而实现页面跳转。

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

2、修改路径部分

通过设置window.location.pathname，可以修改URL的路径部分。

window.location.pathname = '/new-path';

3、修改查询字符串

通过设置window.location.search，可以修改URL的查询字符串。

window.location.search = '?new=query';

4、修改锚部分

通过设置window.location.hash，可以修改URL的锚部分。

window.location.hash = '#new-hash';

四、使用URL对象解析和操作URL

在现代浏览器中，还可以使用URL对象来解析和操作URL。这种方法更灵活和强大。

1、创建URL对象

通过new URL()可以创建一个URL对象。

let url = new URL(window.location.href);

2、获取URL的各个部分

通过URL对象的属性，可以获取URL的各个部分。

console.log(url.href);        // 输出完整的URL
console.log(url.protocol);    // 输出协议部分
console.log(url.hostname);    // 输出主机名
console.log(url.port);        // 输出端口号
console.log(url.pathname);    // 输出路径部分
console.log(url.search);      // 输出查询字符串
console.log(url.hash);        // 输出锚部分

3、修改URL的各个部分

通过设置URL对象的属性，可以修改URL的各个部分。

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

五、应用场景和案例分析

1、在单页应用程序（SPA）中的应用

在单页应用程序（SPA）中，常常需要根据不同的URL路径加载不同的内容。通过window.location和URL对象，可以轻松实现这一点。

// 根据路径加载不同的内容
let path = window.location.pathname;
switch (path) {
    case '/home':
        loadHomePage();
        break;
    case '/about':
        loadAboutPage();
        break;
    case '/contact':
        loadContactPage();
        break;
    default:
        loadNotFoundPage();
        break;
}
function loadHomePage() {
    // 加载主页内容
}
function loadAboutPage() {
    // 加载关于页内容
}
function loadContactPage() {
    // 加载联系页内容
}
function loadNotFoundPage() {
    // 加载404页面
}

2、在数据分析和跟踪中的应用

在数据分析和跟踪中，常常需要获取URL的查询字符串，并根据其中的参数进行分析和统计。通过URLSearchParams对象，可以轻松解析和操作查询字符串。

let urlParams = new URLSearchParams(window.location.search);
let campaign = urlParams.get('campaign');
let source = urlParams.get('source');
console.log(`广告活动：${campaign}`);
console.log(`来源：${source}`);

3、在项目管理系统中的应用

在项目管理系统中，常常需要根据URL中的不同参数加载不同的项目或任务。通过window.location和URL对象，可以轻松实现这一点。

例如，使用研发项目管理系统PingCode和通用项目协作软件Worktile，可以根据URL参数加载不同的项目。

let urlParams = new URLSearchParams(window.location.search);
let projectId = urlParams.get('projectId');
if (projectId) {
    loadProject(projectId);
} else {
    showProjectList();
}
function loadProject(id) {
    // 加载指定的项目
    console.log(`加载项目：${id}`);
}
function showProjectList() {
    // 显示项目列表
    console.log('显示项目列表');
}

六、总结

通过本文的介绍，我们了解了在JavaScript中获取和操作本地网址的多种方法。无论是通过window.location、document.URL还是现代的URL对象，都可以轻松实现这一需求。更重要的是，掌握这些方法可以帮助我们在实际项目中更加灵活地处理URL，从而提升开发效率。

核心方法包括：window.location、document.URL、URL对象。每种方法都有其独特的优势和适用场景，希望通过本文的介绍，能够帮助你更好地理解和应用这些方法。