JavaScript中将HTML参数字符串转换为JSON对象
在前端开发场景中，我们经常会遇到需要处理HTML参数字符串的情况，比如从URL的查询字符串中获取参数，或者处理后端返回的HTML格式参数数据。这类参数字符串通常格式类似key1=value1&key2=value2，我们需要将其转换为结构清晰的JSON对象，方便后续的业务逻辑调用。本文将介绍几种常见的转换方法，并附带完整的代码示例。
基础转换方法：手动解析字符串
最基础的转换思路是先按&符号分割出每个键值对，再对每个键值对按=分割出键和值，最后拼接成JSON对象。这种方法逻辑清晰，不需要依赖额外库，适合简单的参数字符串场景。
下面是实现代码：
// 定义待转换的HTML参数字符串
const paramStr = "name=张三&age=25&city=北京";
// 初始化结果对象
const result = {};
// 先判断字符串是否为空，避免处理空值报错
if (paramStr && paramStr.trim() !== "") {
// 按&符号分割出所有键值对
const keyValuePairs = paramStr.split("&");
// 遍历每个键值对
keyValuePairs.forEach(pair => {
// 按=分割键和值，最多分割为两部分，避免值中包含=的情况出错
const [key, value] = pair.split("=", 2);
// 键和值都存在时才添加到结果对象
if (key !== undefined && value !== undefined) {
// 对值进行URL解码，处理特殊字符
result[decodeURIComponent(key)] = decodeURIComponent(value);
}
});
}
console.log(result);
// 输出：{ name: '张三', age: '25', city: '北京' }这段代码首先处理了空字符串的边界情况，然后按规则分割字符串，同时使用decodeURIComponent对键和值进行解码，避免参数中包含中文、空格等特殊字符时出现乱码问题。需要注意的是，如果参数字符串中某个键值对没有=，或者值为空，代码会跳过该键值对，避免生成无效的对象属性。
处理复杂场景：支持重复键和数组格式
在实际业务中，有时会遇到参数字符串中存在重复键的情况，比如hobby=篮球&hobby=足球&hobby=跑步，这时候我们希望把相同键的值合并为数组。我们可以对基础方法进行扩展，适配这种场景。
实现代码如下：
function paramStrToJson(paramStr) {
const result = {};
if (!paramStr || paramStr.trim() === "") {
return result;
}
const keyValuePairs = paramStr.split("&");
keyValuePairs.forEach(pair => {
const [key, value] = pair.split("=", 2);
if (key === undefined || value === undefined) {
return;
}
const decodedKey = decodeURIComponent(key);
const decodedValue = decodeURIComponent(value);
// 判断当前键是否已经存在于结果对象中
if (result.hasOwnProperty(decodedKey)) {
// 如果已存在，且当前值不是数组，先转为数组再添加新值
if (!Array.isArray(result[decodedKey])) {
result[decodedKey] = [result[decodedKey]];
}
result[decodedKey].push(decodedValue);
} else {
// 不存在则直接添加
result[decodedKey] = decodedValue;
}
});
return result;
}
// 测试包含重复键的参数字符串
const complexParamStr = "hobby=篮球&hobby=足球&hobby=跑步&name=李四";
const complexResult = paramStrToJson(complexParamStr);
console.log(complexResult);
// 输出：{ hobby: ['篮球', '足球', '跑步'], name: '李四' }这个扩展方法通过判断键是否已存在，自动处理重复键的情况：如果键第一次出现就直接赋值，再次出现就转换为数组追加新值。同时方法封装为函数，方便在多个地方复用，也统一处理了边界情况。
使用URLSearchParams API转换
现代浏览器原生提供了URLSearchParams API，专门用于解析和处理URL查询字符串，我们可以借助这个API快速实现参数字符串到JSON对象的转换，代码更简洁，兼容性也能满足大部分现代项目的需求。
实现示例如下：
function paramStrToJsonByURLSearchParams(paramStr) {
const result = {};
// 处理空字符串情况
if (!paramStr || paramStr.trim() === "") {
return result;
}
// 创建URLSearchParams实例
const searchParams = new URLSearchParams(paramStr);
// 遍历所有参数
for (const [key, value] of searchParams.entries()) {
// 处理重复键的情况，和之前的逻辑一致
if (result.hasOwnProperty(key)) {
if (!Array.isArray(result[key])) {
result[key] = [result[key]];
}
result[key].push(value);
} else {
result[key] = value;
}
}
return result;
}
// 测试普通参数字符串
const normalParamStr = "page=1&size=10&sort=time";
const normalResult = paramStrToJsonByURLSearchParams(normalParamStr);
console.log(normalResult);
// 输出：{ page: '1', size: '10', sort: 'time' }URLSearchParams的entries方法会遍历所有键值对，自动处理了=分割和特殊字符解码的问题，我们只需要额外处理重复键的逻辑即可。如果要兼容更老的浏览器，建议使用前面的手动解析方法，或者引入对应的polyfill。
注意事项
在实际使用中，需要注意以下几点：
- 如果参数字符串中包含
#、?等URL特殊字符，需要先对字符串做预处理，避免分割逻辑出错。 - 值的类型默认都是字符串，如果需要转换为数字、布尔值等类型，需要在转换后额外做类型判断和处理。
- 如果参数字符串是从用户输入或者第三方接口获取的，需要做好合法性校验，避免恶意构造的字符串导致代码异常。