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

/**
 * 示例一：使用 window.location 對(duì)象獲取 URL 的各個(gè)組成部分
 * 這是最基礎(chǔ)也是最常用的獲取方式，兼容性極佳，適用于所有現(xiàn)代和舊版瀏覽器
 */
function getLocationComponents() {
    const location = window.location;

    console.log('完整 URL:', location.href); // 完整的 URL 字符串
    console.log('協(xié)議:', location.protocol); // 'http:' 或 'https:'
    console.log('主機(jī):', location.host); // 主機(jī)名 + 端口（如果非默認(rèn)端口）
    console.log('主機(jī)名:', location.hostname); // 僅主機(jī)名
    console.log('端口:', location.port); // 端口號(hào)，如果使用默認(rèn)端口則為空字符串
    console.log('路徑:', location.pathname); // 路徑部分，以 '/' 開(kāi)頭
    console.log('查詢字符串:', location.search); // 查詢參數(shù)部分，以 '?' 開(kāi)頭
    console.log('哈希:', location.hash); // 錨點(diǎn)部分，以 '#' 開(kāi)頭
}

// 調(diào)用函數(shù)輸出當(dāng)前頁(yè)面的 URL 信息
getLocationComponents();

/**
 * 示例二：使用 URLSearchParams 解析查詢參數(shù)
 * URLSearchParams 提供了標(biāo)準(zhǔn)化的接口來(lái)處理查詢字符串，支持迭代、添加、刪除等操作
 */
function parseQueryParams() {
    // 創(chuàng)建 URLSearchParams 實(shí)例
    const params = new URLSearchParams(window.location.search);

    // 遍歷所有參數(shù)
    console.log('所有查詢參數(shù):');
    for (const [key, value] of params) {
        console.log(`${key}: ${value}`);
    }

    // 獲取單個(gè)參數(shù)值（返回第一個(gè)匹配值）
    const name = params.get('name');
    console.log('name 參數(shù):', name);

    // 獲取所有同名參數(shù)的值（返回?cái)?shù)組）
    const tags = params.getAll('tag');
    console.log('tags 參數(shù):', tags);

    // 檢查參數(shù)是否存在
    if (params.has('debug')) {
        console.log('啟用了調(diào)試模式');
    }

    // 將所有參數(shù)轉(zhuǎn)換為普通對(duì)象
    const queryParams = Object.fromEntries(params);
    console.log('查詢參數(shù)對(duì)象:', queryParams);

    return queryParams;
}

// 調(diào)用函數(shù)解析當(dāng)前 URL 的查詢參數(shù)
const queryObject = parseQueryParams();

/**
 * 示例三：使用 URL 構(gòu)造函數(shù)進(jìn)行 URL 解析和操作
 * URL 構(gòu)造函數(shù)支持解析任意 URL 字符串，而不僅限于當(dāng)前頁(yè)面的 URL
 */
function demonstrateURLConstructor() {
    // 解析當(dāng)前頁(yè)面的 URL
    const currentUrl = new URL(window.location.href);
    console.log('當(dāng)前 URL 對(duì)象:', currentUrl);

    // 訪問(wèn) URL 的各個(gè)屬性（與 location 對(duì)象類似，但更規(guī)范）
    console.log('完整 URL:', currentUrl.toString()); // 或 currentUrl.href
    console.log('協(xié)議:', currentUrl.protocol);
    console.log('主機(jī):', currentUrl.host);
    console.log('主機(jī)名:', currentUrl.hostname);
    console.log('端口:', currentUrl.port);
    console.log('路徑:', currentUrl.pathname);
    console.log('查詢參數(shù):', currentUrl.search);
    console.log('哈希:', currentUrl.hash);

    // 使用 URLSearchParams 解析查詢參數(shù)（與示例二相同）
    const searchParams = currentUrl.searchParams;
    console.log('查詢參數(shù)（通過(guò) URL.searchParams）:', Object.fromEntries(searchParams));

    // 動(dòng)態(tài)修改 URL 的各個(gè)部分
    currentUrl.pathname = '/new/path';
    currentUrl.searchParams.set('updated', 'true');
    currentUrl.hash = '#new-section';

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

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

    return currentUrl;
}

// 調(diào)用函數(shù)演示 URL 構(gòu)造函數(shù)的用法
const modifiedUrl = demonstrateURLConstructor();

/**
 * 示例四：封裝一個(gè)健壯的 URL 解析工具函數(shù)
 * 該函數(shù)提供類型安全的接口，并處理潛在的解析錯(cuò)誤
 */
class UrlParser {
    /**
     * 解析給定的 URL 字符串或使用當(dāng)前頁(yè)面 URL
     * @param {string} [url] - 要解析的 URL 字符串，如果未提供則使用當(dāng)前頁(yè)面 URL
     * @returns {Object|null} 解析后的 URL 信息對(duì)象，解析失敗時(shí)返回 null
     */
    static parse(url = window.location.href) {
        try {
            const parsedUrl = new URL(url);
            return {
                // 基本信息
                href: parsedUrl.href,
                origin: parsedUrl.origin, // scheme + host（不包含端口時(shí)的標(biāo)準(zhǔn)格式）
                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,
                // 查詢參數(shù)處理
                queryParams: Object.fromEntries(parsedUrl.searchParams),
                // 輔助方法
                hasParam: (key) => parsedUrl.searchParams.has(key),
                getParam: (key) => parsedUrl.searchParams.get(key),
                getAllParams: (key) => parsedUrl.searchParams.getAll(key),
                // 完整的 URL 對(duì)象引用
                urlObject: parsedUrl
            };
        } catch (error) {
            console.error('URL 解析失敗:', error.message, 'URL:', url);
            return null;
        }
    }

    /**
     * 根據(jù)協(xié)議獲取默認(rèn)端口號(hào)
     * @param {string} protocol - 協(xié)議字符串（帶冒號(hào)）
     * @returns {string} 默認(rèn)端口號(hào)
     */
    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 '';
        }
    }

    /**
     * 從查詢參數(shù)中安全地提取數(shù)值類型
     * @param {string} key - 參數(shù)鍵名
     * @param {number} [defaultValue=0] - 默認(rèn)值
     * @returns {number}
     */
    static getNumericParam(key, defaultValue = 0) {
        const param = this.parse().getParam(key);
        return param ? Number(param) || defaultValue : defaultValue;
    }

    /**
     * 從查詢參數(shù)中提取布爾值
     * @param {string} key - 參數(shù)鍵名
     * @param {boolean} [defaultValue=false] - 默認(rèn)值
     * @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('當(dāng)前頁(yè)面信息:', currentInfo);
    console.log('是否有 debug 參數(shù):', currentInfo.hasParam('debug'));
    console.log('page 參數(shù)值:', currentInfo.getParam('page'));
    console.log('提取數(shù)值參數(shù):', UrlParser.getNumericParam('page', 1));
    console.log('提取布爾參數(shù):', UrlParser.getBooleanParam('debug'));
}

/**
 * 示例五：監(jiān)聽(tīng) SPA 中的 URL 變化
 * 在使用 History API 的單頁(yè)應(yīng)用中，需要監(jiān)聽(tīng) popstate 事件來(lái)響應(yīng) URL 變化
 */
function setupUrlChangeListener() {
    // 監(jiān)聽(tīng)瀏覽器前進(jìn)/后退按鈕導(dǎo)致的 URL 變化
    window.addEventListener('popstate', function(event) {
        console.log('URL 發(fā)生變化（popstate）:', window.location.href);
        console.log('狀態(tài)對(duì)象:', event.state);
        
        // 在此處執(zhí)行路由邏輯，如更新視圖、加載數(shù)據(jù)等
        handleRouteChange();
    });

    // 監(jiān)聽(tīng)自定義的 URL 變化（例如通過(guò) pushState/replaceState 觸發(fā)）
    // 由于 pushState/replaceState 不會(huì)觸發(fā) popstate，需要手動(dòng) dispatch
    const originalPushState = history.pushState;
    history.pushState = function(state, title, url) {
        const result = originalPushState.apply(this, arguments);
        // 手動(dòng)觸發(fā)自定義事件
        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;
    };

    // 監(jiān)聽(tīng)自定義的 URL 變化事件
    window.addEventListener('urlchange', function(event) {
        console.log('URL 通過(guò) History API 修改:', event.detail.url);
        handleRouteChange();
    });

    // 初始化時(shí)處理當(dāng)前路由
    function handleRouteChange() {
        const urlInfo = UrlParser.parse();
        if (!urlInfo) return;

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

        // 根據(jù) pathname 和 queryParams 執(zhí)行相應(yīng)的頁(yè)面邏輯
        // 例如：渲染不同組件、更新頁(yè)面標(biāo)題、發(fā)送埋點(diǎn)等
        updateViewBasedOnRoute(urlInfo);
    }

    // 模擬路由處理邏輯
    function updateViewBasedOnRoute(info) {
        // 這里可以集成 React Router、Vue Router 或自定義路由邏輯
        switch (info.pathname) {
            case '/home':
                console.log('顯示首頁(yè)');
                break;
            case '/profile':
                console.log('顯示用戶資料頁(yè)，用戶ID:', info.getParam('id'));
                break;
            default:
                console.log('顯示 404 頁(yè)面');
        }
    }

    // 初始加載時(shí)處理當(dāng)前 URL
    handleRouteChange();
}

// 啟動(dòng) URL 變化監(jiān)聽(tīng)器
setupUrlChangeListener();