/**
 * 使用 URLSearchParams 從當(dāng)前頁(yè)面 URL 中提取查詢參數(shù)
 * 注意：URLSearchParams 會(huì)自動(dòng)處理 URL 解碼
 */
function getQueryParam(key) {
    // 獲取當(dāng)前 URL 的查詢字符串部分（包含 ?）
    const queryString = window.location.search;
    
    // 創(chuàng)建 URLSearchParams 實(shí)例
    const params = new URLSearchParams(queryString);
    
    // 獲取指定鍵的值（返回字符串或 null）
    return params.get(key);
}

// 使用示例
const searchQuery = getQueryParam('q');      // 'javascript'
const category = getQueryParam('category');  // 'webdev'
const pageStr = getQueryParam('page');       // '2'

// 注意：所有值均為字符串類型，需根據(jù)業(yè)務(wù)需求進(jìn)行類型轉(zhuǎn)換
const page = parseInt(pageStr, 10); // 轉(zhuǎn)換為數(shù)字

/**
 * 獲取指定參數(shù)的所有值（數(shù)組形式）
 * 適用于多選篩選、標(biāo)簽系統(tǒng)等場(chǎng)景
 */
function getAllQueryParamValues(key) {
    const params = new URLSearchParams(window.location.search);
    return params.getAll(key);
}

// 處理 URL: https://example.com/articles?tag=js&tag=react&tag=frontend
const tags = getAllQueryParamValues('tag');
console.log(tags); // ['js', 'react', 'frontend']

/**
 * 將多值參數(shù)轉(zhuǎn)換為 Set 去重（若業(yè)務(wù)需要）
 */
const uniqueTags = [...new Set(tags)];

/**
 * 安全地獲取查詢參數(shù)，支持默認(rèn)值
 * @param {string} key - 參數(shù)鍵名
 * @param {any} defaultValue - 默認(rèn)值
 * @returns {string|null} 參數(shù)值或默認(rèn)值
 */
function getQueryParamWithDefault(key, defaultValue = null) {
    const params = new URLSearchParams(window.location.search);
    const value = params.get(key);
    
    // 如果參數(shù)不存在或?yàn)榭兆址祷啬J(rèn)值
    return value === null || value === '' ? defaultValue : value;
}

// 使用示例
const sortBy = getQueryParamWithDefault('sort', 'relevance');
const limit = parseInt(getQueryParamWithDefault('limit', '10'), 10);

/**
 * 使用正則表達(dá)式解析查詢字符串
 * 支持 IE9+ 環(huán)境
 * 注意：需手動(dòng)處理 URL 解碼
 */
function parseQueryString(queryString) {
    // 移除開頭的 ? 號(hào)
    const cleanQuery = queryString.startsWith('?') 
        ? queryString.substring(1) 
        : queryString;
    
    // 存儲(chǔ)解析結(jié)果的對(duì)象
    const params = {};
    
    // 正則匹配 key=value 對(duì)，支持未編碼的 & 和 =
    const regex = /([^&=]+)=?([^&]*)/g;
    let match;
    
    while ((match = regex.exec(cleanQuery)) !== null) {
        // 解碼 key 和 value（處理 %20, %C3%A9 等）
        const key = decodeURIComponent(match[1].replace(/\+/g, ' '));
        const value = decodeURIComponent(match[2].replace(/\+/g, ' '));
        
        // 處理多值情況：如果鍵已存在，轉(zhuǎn)換為數(shù)組
        if (params.hasOwnProperty(key)) {
            // 如果已存在且不是數(shù)組，先轉(zhuǎn)換為數(shù)組
            if (!Array.isArray(params[key])) {
                params[key] = [params[key]];
            }
            params[key].push(value);
        } else {
            params[key] = value;
        }
    }
    
    return params;
}

// 使用示例
const rawQuery = '?name=John+Doe&city=New+York&hobby=reading&hobby=coding';
const parsedParams = parseQueryString(rawQuery);

console.log(parsedParams.name);   // 'John Doe'
console.log(parsedParams.city);   // 'New York'
console.log(parsedParams.hobby);  // ['reading', 'coding']

/**
 * 使用 split 方法分割查詢字符串
 * 邏輯清晰，易于理解
 */
function parseQueryStringSplit(queryString) {
    const params = {};
    const cleanQuery = queryString.startsWith('?') 
        ? queryString.substring(1) 
        : queryString;
    
    if (cleanQuery === '') return params;
    
    // 按 & 分割為鍵值對(duì)數(shù)組
    const pairs = cleanQuery.split('&');
    
    pairs.forEach(pair => {
        // 按第一個(gè) = 分割鍵和值（允許值中包含 =）
        const [rawKey, ...rawValueParts] = pair.split('=');
        const rawValue = rawValueParts.join('=');
        
        if (rawKey) { // 確保鍵存在
            const key = decodeURIComponent(rawKey.replace(/\+/g, ' '));
            const value = rawValue !== undefined 
                ? decodeURIComponent(rawValue.replace(/\+/g, ' ')) 
                : ''; // 處理無值參數(shù)（如 ?debug）
            
            // 多值處理邏輯同上
            if (params.hasOwnProperty(key)) {
                if (!Array.isArray(params[key])) {
                    params[key] = [params[key]];
                }
                params[key].push(value);
            } else {
                params[key] = value;
            }
        }
    });
    
    return params;
}

// 使用示例
const paramsObj = parseQueryStringSplit(window.location.search);
const userId = paramsObj['user_id'];

/**
 * 安全地解析數(shù)字參數(shù)，包含邊界檢查
 */
function getNumericParam(key, defaultValue = 0, min = -Infinity, max = Infinity) {
    const params = new URLSearchParams(window.location.search);
    const strValue = params.get(key);
    
    if (!strValue) return defaultValue;
    
    const numValue = Number(strValue);
    
    // 檢查是否為有效數(shù)字且在范圍內(nèi)
    if (isNaN(numValue) || numValue < min || numValue > max) {
        console.warn(`Invalid numeric value for ${key}: ${strValue}`);
        return defaultValue;
    }
    
    return numValue;
}

// 使用示例：分頁(yè)參數(shù)
const currentPage = getNumericParam('page', 1, 1, 1000);
const pageSize = getNumericParam('limit', 20, 1, 100);

/**
 * 解析布爾查詢參數(shù)
 * 支持 'true', '1', 'on', 'yes' 及其否定形式
 */
function getBooleanParam(key, defaultValue = false) {
    const params = new URLSearchParams(window.location.search);
    const value = params.get(key);
    
    if (value === null) return defaultValue;
    
    const lowerValue = value.toLowerCase();
    return ['true', '1', 'on', 'yes'].includes(lowerValue);
}

const isDebugMode = getBooleanParam('debug');
const isPreview = getBooleanParam('preview', true);

/**
 * 安全地構(gòu)建包含查詢參數(shù)的 URL
 */
function buildUrlWithParams(baseUrl, params) {
    const url = new URL(baseUrl);
    const searchParams = new URLSearchParams();
    
    Object.keys(params).forEach(key => {
        const value = params[key];
        // 數(shù)組參數(shù)需要多次添加
        if (Array.isArray(value)) {
            value.forEach(val => searchParams.append(key, val));
        } else {
            searchParams.set(key, value);
        }
    });
    
    url.search = searchParams.toString();
    return url.toString();
}

// 使用示例
const apiUrl = buildUrlWithParams('/api/search', {
    q: '前端開發(fā) & JavaScript',
    tags: ['react', 'vue'],
    page: 2
});
// 結(jié)果: /api/search?q=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%20%26%20JavaScript&tags=react&tags=vue&page=2

/**
 * 緩存當(dāng)前頁(yè)面的查詢參數(shù)對(duì)象
 * 避免在循環(huán)或高頻函數(shù)中重復(fù)解析
 */
let cachedSearchParams = null;

function getCachedSearchParams() {
    if (!cachedSearchParams) {
        cachedSearchParams = new URLSearchParams(window.location.search);
    }
    return cachedSearchParams;
}

// 在組件中使用
function MyComponent() {
    useEffect(() => {
        const params = getCachedSearchParams();
        const action = params.get('action');
        // 執(zhí)行邏輯...
    }, []);
}

// React Router v6 示例
import { useSearchParams } from 'react-router-dom';

function SearchPage() {
    const [searchParams] = useSearchParams();
    const query = searchParams.get('q');
    const filters = searchParams.getAll('filter');
    
    // 直接使用，無需手動(dòng)解析
    return <div>Searching for: {query}</div>;
}

/**
 * 健壯的查詢參數(shù)獲取函數(shù)，包含錯(cuò)誤處理
 */
function safeGetQueryParam(key, fallback = null) {
    try {
        // 防御性編程：檢查 window.location 是否可用
        if (typeof window === 'undefined' || !window.location) {
            return fallback;
        }
        
        const params = new URLSearchParams(window.location.search);
        return params.get(key) || fallback;
    } catch (error) {
        console.error('Error parsing query parameters:', error);
        return fallback;
    }
}