如何对嵌套查询字符串Javascript进行编码和解析/解码

在JavaScript中，处理嵌套查询字符串的编码和解码可以通过多种方式实现。以下是一些基础概念和相关方法：

基础概念

查询字符串：URL中?后面的部分，用于传递参数。
编码：将特殊字符转换为安全的字符序列，以便在URL中传输。
解码：将编码后的字符序列还原为原始字符。

类型

URL编码（百分号编码）：将非ASCII字符和特殊字符转换为百分号（%）后跟两位十六进制数的形式。
Base64编码：一种常见的二进制到文本的编码方案，适用于编码任意二进制数据。

应用场景

表单提交：在HTTP请求中传递参数。
API请求：在客户端和服务器之间传递复杂数据结构。
URL路由：在单页应用（SPA）中管理状态。

编码和解码方法

1. URL编码和解码

JavaScript提供了内置的encodeURIComponent和decodeURIComponent函数来处理URL编码和解码。

// 编码
let encoded = encodeURIComponent('https://example.com?name=John Doe&age=30');
console.log(encoded); // 输出: https%3A%2F%2Fexample.com%3Fname%3DJohn%20Doe%26age%3D30

// 解码
let decoded = decodeURIComponent(encoded);
console.log(decoded); // 输出: https://example.com?name=John Doe&age=30

2. 处理嵌套查询字符串

对于嵌套查询字符串，可以使用第三方库如qs或手动解析。

使用`qs`库

const qs = require('qs');

// 编码
let nestedData = { name: 'John Doe', details: { age: 30, city: 'New York' } };
let encoded = qs.stringify(nestedData, { encode: true, arrayFormat: 'indices' });
console.log(encoded); // 输出: name=John%20Doe&details[age]=30&details[city]=New%20York

// 解码
let decoded = qs.parse(encoded);
console.log(decoded); // 输出: { name: 'John Doe', details: { age: 30, city: 'New York' } }

手动解析

function encodeNestedQueryString(obj) {
    return Object.keys(obj).map(key => {
        if (typeof obj[key] === 'object') {
            return Object.keys(obj[key]).map(subKey => `${encodeURIComponent(key)}[${encodeURIComponent(subKey)}]=${encodeURIComponent(obj[key][subKey])}`).join('&');
        } else {
            return `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`;
        }
    }).join('&');
}

function decodeNestedQueryString(str) {
    let params = new URLSearchParams(str);
    let result = {};
    for (let [key, value] of params.entries()) {
        let keys = key.match(/([^\[\]]+)|(\[\])/g).map(k => k.replace(/\[\]$/, ''));
        let current = result;
        keys.forEach((k, i) => {
            if (i === keys.length - 1) {
                current[k] = decodeURIComponent(value);
            } else {
                current[k] = current[k] || {};
                current = current[k];
            }
        });
    }
    return result;
}

// 编码
let nestedData = { name: 'John Doe', details: { age: 30, city: 'New York' } };
let encoded = encodeNestedQueryString(nestedData);
console.log(encoded); // 输出: name=John%20Doe&details[age]=30&details[city]=New%20York

// 解码
let decoded = decodeNestedQueryString(encoded);
console.log(decoded); // 输出: { name: 'John Doe', details: { age: 30, city: 'New York' } }