js 怎样解析URL参数

URLSearchParams

URLSearchParams

// 获取当前页面的URL参数
const params = new URLSearchParams(window.location.search);

// 或者，解析一个自定义的URL查询字符串
// const customUrlQuery = '?name=张三&age=30&hobbies=reading&hobbies=coding';
// const params = new URLSearchParams(customUrlQuery);

// 1. 获取单个参数值
const name = params.get('name'); // 如果URL是 ?name=张三，则name会是 '张三'
console.log('姓名:', name); // 输出：姓名: 张三

// 2. 获取所有同名参数的值（当参数可能重复时，例如 ?tag=js&tag=web）
const hobbies = params.getAll('hobbies');
console.log('爱好:', hobbies); // 输出：爱好: ["reading", "coding"]

// 3. 检查参数是否存在
if (params.has('age')) {
    console.log('年龄参数存在。');
}

// 4. 遍历所有参数
console.log('所有参数:');
params.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});
// 输出：
// name: 张三
// age: 30
// hobbies: reading
// hobbies: coding

// 5. 修改或添加参数
params.set('city', '北京'); // 如果city不存在则添加，存在则更新
params.append('hobbies', 'traveling'); // 添加一个同名参数，不覆盖现有
params.delete('age'); // 删除参数

console.log('修改后的查询字符串:', params.toString());
// 示例输出: name=张三&hobbies=reading&hobbies=coding&city=北京&hobbies=traveling

URLSearchParams

URLSearchParams

window.location.search

function getQueryParamsLegacy(url) {
    const queryIndex = url.indexOf('?');
    if (queryIndex === -1) {
        return {}; // 没有查询参数
    }

    const queryString = url.substring(queryIndex + 1);
    const params = {};

    queryString.split('&').forEach(pair => {
        const eqIndex = pair.indexOf('=');
        let key, value;
        if (eqIndex === -1) {
            key = decodeURIComponent(pair);
            value = ''; // 没有等号，值为空
        } else {
            key = decodeURIComponent(pair.substring(0, eqIndex));
            value = decodeURIComponent(pair.substring(eqIndex + 1));
        }

        // 简单处理重复键，只保留最后一个值。
        // 如果需要所有值，需要将值存储为数组。
        params[key] = value;
    });

    return params;
}

// 示例用法
const currentUrl = window.location.href; // 或者 'http://example.com/?name=张三&age=30&hobbies=reading'
const legacyParams = getQueryParamsLegacy(currentUrl);
console.log('旧版解析结果:', legacyParams);

// 如果需要处理重复键，比如 ?tag=js&tag=web
// 这个简单的实现会覆盖，只会得到 { tag: 'web' }
// 真正的老式实现会更复杂，需要判断如果键已存在，就将其值变为数组。
// 这也是为什么 URLSearchParams 这么受欢迎，它替我们处理了这些细节。

?key=

?key

URLSearchParams

%20

%E4%B8%AD

&

=

URLSearchParams

params.get('key')

params.set('key', '新值')

params.append('key', '另一个值')

// 假设URL是 ?query=你好 世界
const params = new URLSearchParams(window.location.search);
const query = params.get('query');
console.log('自动解码后的查询:', query); // 输出：你好 世界

// 假设我们想添加一个包含特殊字符的参数
params.set('message', 'Hello World!');
console.log('自动编码后的查询字符串:', params.toString()); // message=Hello%20World!

decodeURIComponent()

encodeURIComponent()

// 手动解码示例
const encodedValue = '你好%20世界';
const decodedValue = decodeURIComponent(encodedValue);
console.log('手动解码:', decodedValue); // 输出：你好 世界

// 手动编码示例
const originalValue = '我的名字是 张三';
const encodedForUrl = encodeURIComponent(originalValue);
console.log('手动编码:', encodedForUrl); // 输出：我的名字是%20张三

// 注意：encodeURI() 和 encodeURIComponent() 的区别
// encodeURI() 用于编码整个URI（不编码 ?, &, =, / 等，因为它们有特殊含义）
// encodeURIComponent() 用于编码URI的某个组件，比如查询参数的值或路径的一部分（会编码 ?, &, = 等）
// 我们在处理URL参数时，几乎总是使用 encodeURIComponent()。

URLSearchParams