js怎么解析url参数

location.search

// 假设当前URL是 https://example.com/page?name=张三&age=30&tags=js&tags=web开发
const urlParams = new URLSearchParams(window.location.search);

// 获取单个参数值
const name = urlParams.get('name'); // 输出: "张三"
const age = urlParams.get('age');   // 输出: "30"

// 获取所有同名参数值（返回数组）
const tags = urlParams.getAll('tags'); // 输出: ["js", "web开发"]

// 检查是否存在某个参数
const hasAge = urlParams.has('age');     // 输出: true
const hasGender = urlParams.has('gender'); // 输出: false

// 遍历所有参数
for (const [key, value] of urlParams.entries()) {
  console.log(`${key}: ${value}`);
}
// 输出:
// name: 张三
// age: 30
// tags: js
// tags: web开发

// 修改或添加参数
urlParams.set('city', '北京'); // 如果存在则更新，不存在则添加
urlParams.append('tags', '前端'); // 添加一个同名参数

// 删除参数
urlParams.delete('age');

// 将修改后的参数重新转换为查询字符串
const newSearchString = urlParams.toString();
// 示例输出: "name=%E5%BC%A0%E4%B8%89&tags=js&tags=web%E5%BC%80%E5%8F%91&city=%E5%8C%97%E4%BA%AC&tags=%E5%89%8D%E7%AB%AF"
// 注意：toString() 会自动进行URL编码

// 假设当前URL是 https://example.com/page?name=张三&age=30&tags=js&tags=web开发
function parseUrlParamsManually() {
    const params = {};
    const search = window.location.search; // 获取查询字符串，例如 "?name=%E5%BC%A0%E4%B8%89&age=30"

    if (search.length > 1) { // 确保有查询参数
        const queryString = search.substring(1); // 移除开头的 '?'
        const pairs = queryString.split('&'); // 分割成键值对数组

        pairs.forEach(pair => {
            const parts = pair.split('=');
            if (parts.length === 2) {
                const key = decodeURIComponent(parts[0]);
                const value = decodeURIComponent(parts[1]);

                if (params[key]) {
                    // 处理重复参数名，例如 ?tags=js&tags=web
                    if (Array.isArray(params[key])) {
                        params[key].push(value);
                    } else {
                        params[key] = [params[key], value];
                    }
                } else {
                    params[key] = value;
                }
            }
        });
    }
    return params;
}

const manualParams = parseUrlParamsManually();
console.log(manualParams);
// 示例输出: { name: "张三", age: "30", tags: ["js", "web开发"] }

?a=1&a=2

?b=

?c=你好

&

=

%xx

张三

%E5%BC%A0%E4%B8%89

get()

toString()

?item=apple&item=banana

split('=')

?name=&age=30

name

#/path?id=123

URLSearchParams(window.location.search)

协议://主机名:端口/路径?查询参数#哈希值

window.location

https://example.com/#/dashboard?id=123&name=test

// 假设URL是 https://example.com/#/dashboard?id=123&name=test
const fullHash = window.location.hash; // 结果: "#/dashboard?id=123&name=test"

let hashQueryParams = '';
const queryStartIndex = fullHash.indexOf('?');

if (queryStartIndex !== -1) {
    hashQueryParams = fullHash.substring(queryStartIndex); // 结果: "?id=123&name=test"
}

if (hashQueryParams) {
    const paramsInHash = new URLSearchParams(hashQueryParams);
    const id = paramsInHash.get('id');     // 结果: "123"
    const name = paramsInHash.get('name'); // 结果: "test"
    console.log(`ID from hash: ${id}, Name from hash: ${name}`);
} else {
    console.log('哈希中没有查询参数。');
}

// 如果URL是标准的带查询参数的，比如 https://example.com/?param1=value1
const standardParams = new URLSearchParams(window.location.search);
const param1 = standardParams.get('param1'); // 结果: "value1" (如果URL是这样的话)
console.log(`Standard param1: ${param1}`);