在现代 Web 前端开发中，动态获取和解析当前页面的 URL 是一项基础但至关重要的技能。无论是实现路由跳转、权限校验、埋点上报、第三方登录回调处理，还是进行 SEO 优化，开发者都需要精准地从 window.location 或 URL API 中提取所需信息。本文将深入探讨 JavaScript 获取当前 URL 的多种方式，结合浏览器标准、最佳实践以及实际开发中的高级用法，帮助前端工程师全面掌握这一核心能力。

URL 的基本结构与组成部分

在深入代码实现前，必须理解 URL（Uniform Resource Locator）的标准结构。一个完整的 URL 通常包含以下部分：

https://username:password@sub.example.com:8080/path/to/page?query=1&param=2#section1
|_____| |_____________| |________________| |____| |_________| |____________| |______|
   |           |               |             |        |            |           |
scheme      userinfo         host          port    path         query       hash

• scheme: 协议（如 http, https）
• userinfo: 用户名和密码（已不推荐使用）
• host: 主机名 + 端口（如 sub.example.com:8080）
• hostname: 主机名（如 sub.example.com）
• port: 端口号（如 8080）
• pathname: 路径部分（如 /path/to/page）
• search: 查询字符串（以 ? 开头，如 ?query=1&param=2）
• hash: 锚点（以 # 开头，如 #section1）

理解这些组成部分是精准操作 URL 的前提。

示例一：通过 window.location 获取 URL 各组成部分

window.location 是最直接、最广泛支持的获取当前 URL 信息的对象。它提供了多个只读属性来访问 URL 的不同部分。

/**
 * 示例一：使用 window.location 对象获取 URL 的各个组成部分
 * 这是最基础也是最常用的获取方式，兼容性极佳，适用于所有现代和旧版浏览器
 */
function getLocationComponents() {
    const location = window.location;

    console.log('完整 URL:', location.href); // 完整的 URL 字符串
    console.log('协议:', location.protocol); // 'http:' 或 'https:'
    console.log('主机:', location.host); // 主机名 + 端口（如果非默认端口）
    console.log('主机名:', location.hostname); // 仅主机名
    console.log('端口:', location.port); // 端口号，如果使用默认端口则为空字符串
    console.log('路径:', location.pathname); // 路径部分，以 '/' 开头
    console.log('查询字符串:', location.search); // 查询参数部分，以 '?' 开头
    console.log('哈希:', location.hash); // 锚点部分，以 '#' 开头
}

// 调用函数输出当前页面的 URL 信息
getLocationComponents();

开发经验提示：location.port 在使用默认端口（HTTP 为 80，HTTPS 为 443）时返回空字符串，这一点在做端口判断时需要特别注意，避免逻辑错误。

示例二：解析查询字符串（Query Parameters）

location.search 返回的是原始的查询字符串（如 ?name=John&age=30），通常需要进一步解析为键值对对象以便使用。现代浏览器支持 URLSearchParams API，这是解析查询字符串的推荐方式。

/**
 * 示例二：使用 URLSearchParams 解析查询参数
 * URLSearchParams 提供了标准化的接口来处理查询字符串，支持迭代、添加、删除等操作
 */
function parseQueryParams() {
    // 创建 URLSearchParams 实例
    const params = new URLSearchParams(window.location.search);

    // 遍历所有参数
    console.log('所有查询参数:');
    for (const [key, value] of params) {
        console.log(`${key}: ${value}`);
    }

    // 获取单个参数值（返回第一个匹配值）
    const name = params.get('name');
    console.log('name 参数:', name);

    // 获取所有同名参数的值（返回数组）
    const tags = params.getAll('tag');
    console.log('tags 参数:', tags);

    // 检查参数是否存在
    if (params.has('debug')) {
        console.log('启用了调试模式');
    }

    // 将所有参数转换为普通对象
    const queryParams = Object.fromEntries(params);
    console.log('查询参数对象:', queryParams);

    return queryParams;
}

// 调用函数解析当前 URL 的查询参数
const queryObject = parseQueryParams();

开发经验提示：URLSearchParams 是可变的，可以用来动态构建查询字符串。在构建复杂的查询逻辑时，优先使用 URLSearchParams 而不是字符串拼接，避免编码问题。

示例三：使用 URL 构造函数进行完整解析与操作

URL 构造函数是现代 Web API 的核心部分，它不仅可以解析 URL，还能用于构建和修改 URL。它比 window.location 更强大，支持跨域 URL 解析。

/**
 * 示例三：使用 URL 构造函数进行 URL 解析和操作
 * URL 构造函数支持解析任意 URL 字符串，而不仅限于当前页面的 URL
 */
function demonstrateURLConstructor() {
    // 解析当前页面的 URL
    const currentUrl = new URL(window.location.href);
    console.log('当前 URL 对象:', currentUrl);

    // 访问 URL 的各个属性（与 location 对象类似，但更规范）
    console.log('完整 URL:', currentUrl.toString()); // 或 currentUrl.href
    console.log('协议:', currentUrl.protocol);
    console.log('主机:', currentUrl.host);
    console.log('主机名:', currentUrl.hostname);
    console.log('端口:', currentUrl.port);
    console.log('路径:', currentUrl.pathname);
    console.log('查询参数:', currentUrl.search);
    console.log('哈希:', currentUrl.hash);

    // 使用 URLSearchParams 解析查询参数（与示例二相同）
    const searchParams = currentUrl.searchParams;
    console.log('查询参数（通过 URL.searchParams）:', Object.fromEntries(searchParams));

    // 动态修改 URL 的各个部分
    currentUrl.pathname = '/new/path';
    currentUrl.searchParams.set('updated', 'true');
    currentUrl.hash = '#new-section';

    console.log('修改后的 URL:', currentUrl.toString());

    // 构造一个全新的 URL
    const newUrl = new URL('https://api.example.com/v1/users');
    newUrl.searchParams.append('limit', '10');
    newUrl.searchParams.append('offset', '0');
    console.log('新构造的 API URL:', newUrl.toString());

    return currentUrl;
}

// 调用函数演示 URL 构造函数的用法
const modifiedUrl = demonstrateURLConstructor();

开发经验提示：URL 构造函数在解析相对 URL 时需要提供基础 URL。例如 new URL('/path', 'https://example.com') 会正确解析为 https://example.com/path。这在处理 API 路径时非常有用。

示例四：封装一个健壮的 URL 工具函数

在实际项目中，频繁解析 URL 时，封装一个通用工具函数可以提高代码复用性和可维护性。以下是一个生产级别的 URL 工具函数，结合了错误处理和类型安全。

/**
 * 示例四：封装一个健壮的 URL 解析工具函数
 * 该函数提供类型安全的接口，并处理潜在的解析错误
 */
class UrlParser {
    /**
     * 解析给定的 URL 字符串或使用当前页面 URL
     * @param {string} [url] - 要解析的 URL 字符串，如果未提供则使用当前页面 URL
     * @returns {Object|null} 解析后的 URL 信息对象，解析失败时返回 null
     */
    static parse(url = window.location.href) {
        try {
            const parsedUrl = new URL(url);
            return {
                // 基本信息
                href: parsedUrl.href,
                origin: parsedUrl.origin, // scheme + host（不包含端口时的标准格式）
                protocol: parsedUrl.protocol.replace(':', ''), // 移除末尾的 ':'
                host: parsedUrl.host,
                hostname: parsedUrl.hostname,
                port: parsedUrl.port || this.getDefaultPort(parsedUrl.protocol),
                // 路径与资源
                pathname: parsedUrl.pathname,
                search: parsedUrl.search,
                hash: parsedUrl.hash,
                // 查询参数处理
                queryParams: Object.fromEntries(parsedUrl.searchParams),
                // 辅助方法
                hasParam: (key) => parsedUrl.searchParams.has(key),
                getParam: (key) => parsedUrl.searchParams.get(key),
                getAllParams: (key) => parsedUrl.searchParams.getAll(key),
                // 完整的 URL 对象引用
                urlObject: parsedUrl
            };
        } catch (error) {
            console.error('URL 解析失败:', error.message, 'URL:', url);
            return null;
        }
    }

    /**
     * 根据协议获取默认端口号
     * @param {string} protocol - 协议字符串（带冒号）
     * @returns {string} 默认端口号
     */
    static getDefaultPort(protocol) {
        switch (protocol) {
            case 'http:':
                return '80';
            case 'https:':
                return '443';
            case 'ftp:':
                return '21';
            case 'ws:':
                return '80';
            case 'wss:':
                return '443';
            default:
                return '';
        }
    }

    /**
     * 从查询参数中安全地提取数值类型
     * @param {string} key - 参数键名
     * @param {number} [defaultValue=0] - 默认值
     * @returns {number}
     */
    static getNumericParam(key, defaultValue = 0) {
        const param = this.parse().getParam(key);
        return param ? Number(param) || defaultValue : defaultValue;
    }

    /**
     * 从查询参数中提取布尔值
     * @param {string} key - 参数键名
     * @param {boolean} [defaultValue=false] - 默认值
     * @returns {boolean}
     */
    static getBooleanParam(key, defaultValue = false) {
        const param = this.parse().getParam(key);
        if (param === null) return defaultValue;
        return ['true', '1', 'yes', 'on'].includes(param.toLowerCase());
    }
}

// 使用示例
const currentInfo = UrlParser.parse();
if (currentInfo) {
    console.log('当前页面信息:', currentInfo);
    console.log('是否有 debug 参数:', currentInfo.hasParam('debug'));
    console.log('page 参数值:', currentInfo.getParam('page'));
    console.log('提取数值参数:', UrlParser.getNumericParam('page', 1));
    console.log('提取布尔参数:', UrlParser.getBooleanParam('debug'));
}

开发经验提示：在大型应用中，建议将此类工具函数纳入公共工具库（如 utils/url.js），并配合 TypeScript 提供类型定义，提升开发体验和代码质量。

示例五：处理单页应用（SPA）中的动态 URL 变化

在单页应用（SPA）中，URL 可能通过 history.pushState() 或 history.replaceState() 动态改变，而不会触发页面刷新。此时，window.location 会实时更新，但需要监听 popstate 事件来捕获导航变化。

/**
 * 示例五：监听 SPA 中的 URL 变化
 * 在使用 History API 的单页应用中，需要监听 popstate 事件来响应 URL 变化
 */
function setupUrlChangeListener() {
    // 监听浏览器前进/后退按钮导致的 URL 变化
    window.addEventListener('popstate', function(event) {
        console.log('URL 发生变化（popstate）:', window.location.href);
        console.log('状态对象:', event.state);
        
        // 在此处执行路由逻辑，如更新视图、加载数据等
        handleRouteChange();
    });

    // 监听自定义的 URL 变化（例如通过 pushState/replaceState 触发）
    // 由于 pushState/replaceState 不会触发 popstate，需要手动 dispatch
    const originalPushState = history.pushState;
    history.pushState = function(state, title, url) {
        const result = originalPushState.apply(this, arguments);
        // 手动触发自定义事件
        window.dispatchEvent(new CustomEvent('urlchange', {
            detail: { state, title, url, type: 'push' }
        }));
        return result;
    };

    const originalReplaceState = history.replaceState;
    history.replaceState = function(state, title, url) {
        const result = originalReplaceState.apply(this, arguments);
        window.dispatchEvent(new CustomEvent('urlchange', {
            detail: { state, title, url, type: 'replace' }
        }));
        return result;
    };

    // 监听自定义的 URL 变化事件
    window.addEventListener('urlchange', function(event) {
        console.log('URL 通过 History API 修改:', event.detail.url);
        handleRouteChange();
    });

    // 初始化时处理当前路由
    function handleRouteChange() {
        const urlInfo = UrlParser.parse();
        if (!urlInfo) return;

        console.log('路由变更处理:', urlInfo.pathname, urlInfo.queryParams);

        // 根据 pathname 和 queryParams 执行相应的页面逻辑
        // 例如：渲染不同组件、更新页面标题、发送埋点等
        updateViewBasedOnRoute(urlInfo);
    }

    // 模拟路由处理逻辑
    function updateViewBasedOnRoute(info) {
        // 这里可以集成 React Router、Vue Router 或自定义路由逻辑
        switch (info.pathname) {
            case '/home':
                console.log('显示首页');
                break;
            case '/profile':
                console.log('显示用户资料页，用户ID:', info.getParam('id'));
                break;
            default:
                console.log('显示 404 页面');
        }
    }

    // 初始加载时处理当前 URL
    handleRouteChange();
}

// 启动 URL 变化监听器
setupUrlChangeListener();

开发经验提示：在现代前端框架（如 React、Vue）中，通常使用成熟的路由库（如 React Router、Vue Router）来处理 SPA 路由，它们内部已经封装了 popstate 监听和 History API 的调用。但在某些需要深度定制或轻量级方案的场景下，直接操作 History API 仍然非常有价值。

实际开发中的高级技巧与最佳实践

在真实项目中，获取 URL 往往伴随着复杂的业务逻辑。以下是一些经过验证的高级技巧：

1. URL 编码与解码：在拼接 URL 时，务必使用 encodeURIComponent() 对参数值进行编码，避免特殊字符导致解析错误。URLSearchParams 会自动处理编码。

2. 跨域安全考虑：虽然 window.location 只能访问同源信息，但 URL 构造函数可以解析任何 URL。在处理用户输入的 URL 时，需进行严格的验证和清理，防止 XSS 攻击。

3. 性能优化：频繁解析相同的 URL 会造成性能浪费。在工具函数中可以加入简单的缓存机制，避免重复解析。

4. TypeScript 集成：为 URL 解析结果定义精确的 TypeScript 接口，可以大幅提升代码的可维护性和开发效率。

5. 服务端渲染（SSR）兼容性：在 SSR 环境中（如 Next.js、Nuxt.js），window 对象在服务端不存在。获取 URL 时需要使用框架提供的特定 API（如 Next.js 的 useRouter 或 getServerSideProps 中的 req 对象）。

6. Web Workers 中的 URL 解析：URL 构造函数在 Web Workers 中同样可用，这使得可以在后台线程中安全地解析 URL，避免阻塞主线程。

7. 国际化（i18n）路由处理：在多语言网站中，URL 可能包含语言前缀（如 /en/page、/zh/page）。解析时需要识别并剥离语言部分，再进行路由匹配。

8. URL 签名与验证：在生成分享链接或临时访问链接时，常需要对 URL 进行签名（如添加时间戳和哈希），并在后端验证其有效性。前端需要正确构造和解析这些签名参数。

9. PWA 与 URL 路由：在渐进式 Web 应用中，Service Worker 可以拦截网络请求，根据 URL 模式决定是从缓存还是网络获取资源。精确的 URL 匹配是实现离线功能的关键。

10. 调试技巧：利用浏览器开发者工具的 Console 面板，可以直接输入 window.location 或 new URL(window.location.href) 来快速查看和探索 URL 结构，这是调试路由问题的高效方法。

---

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

---

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

---

专栏系列（点击解锁）	学习路线(点击解锁）	知识定位
《微信小程序相关博客》	持续更新中~	结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
《AIGC相关博客》	持续更新中~	AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
《HTML网站开发相关》	《前端基础入门三大核心之html相关博客》	前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识
	《前端基础入门三大核心之JS相关博客》	前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心
	《前端基础入门三大核心之CSS相关博客》	介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页
	《canvas绘图相关博客》	Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化
《Vue实战相关博客》	持续更新中~	详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅
《python相关博客》	持续更新中~	Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具
《sql数据库相关博客》	持续更新中~	SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能
《算法系列相关博客》	持续更新中~	算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维
《IT信息技术相关博客》	持续更新中~	作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识
	《信息化人员基础技能知识相关博客》	无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方
	《信息化技能面试宝典相关博客》	涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面
《前端开发习惯与小技巧相关博客》	持续更新中~	罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
《photoshop相关博客》	持续更新中~	基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
日常开发&办公&生产【实用工具】分享相关博客》	持续更新中~	分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！