如何获取查询字符串参数

时代Z

已于 2023-04-23 13:43:17 修改

阅读量223

点赞数

分类专栏：前端文章标签： javascript 前端

于 2023-03-14 14:50:14 首次发布

本文链接：https://blog.csdn.net/Wl131415/article/details/129522808

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用场景：查询字符串的拼凑成员过多

// 参数对象
const paramObj = {
    attrA: "test",
    attrB: 10,
    attrC: ["a","b","c"]
};
// 查询字符串参数
let queryStr = "";

获取查询字符串(JS版)

// 情况一: 无数组
Object.keys(paramObj).forEach(attr => {
    let value = paramObj[attr];
    queryStr = queryStr + (value ? ((queryStr ? "&" : "") + attr + "=" + value) : "");
});

// 情况二: 有数组
Object.keys(paramObj).forEach(attr => {
    let value = paramObj[attr];
    const isArray = Array.isArray(value);
    if (!value || (isArray && !value.length)) return ;
    queryStr = queryStr + (queryStr ? "&" : "") + attr + "=" + (isArray ? value.join("&" + attr + "="): value);
});

获取查询字符串(TS版)

//属性类型
type attrsModel = "attrA" | "attrB" | "attrC" 

// 情况一: 无数组
Object.keys(paramObj).forEach(attr => {
    let value = paramObj[attr as attrsModel];
    queryStr = queryStr + (value ? ((queryStr ? "&" : "") + attr + "=" + value) : "");
});

// 情况二: 有数组
Object.keys(paramObj).forEach(attr => {
    let value = paramObj[attr as attrsModel];
    const isArray = Array.isArray(value);
    if (!value || (isArray && !(value as any[]).length)) return ;
    queryStr = queryStr + (queryStr ? "&" : "") + attr + "=" + (isArray ? (value as any[]).join("&" + attr + "="): value);
});