url 与 params 参数的常见操作归纳汇总（含精心准备的注释）

目录

• url 与 params 参数的常见操作归纳汇总（含精心准备的注释）
  • VSCode 语法提示
  • 代码
  • 使用
  • 补充
    • 拼接搜索条件 {a: 'xx', b: 'yyy', c: 'zzz'} 成 ?a=xx&b=yyy&c=zzz

url 与 params 参数的常见操作归纳汇总（含精心准备的注释）

不校验网址合法性，默认你传过来的都是正常的网址

• 针对方法名做了优化，个人觉得更加直观些
• 后续又追加一些注释，在调用函数时语法提示更方便直观（参数类型、调用示例、方法功能解释、参数解释、返回值解释）
• 可能后续采用面向对象封装会更好些，最起码可以省去重复传 url 这么一步操作，不过考虑到大多情况下只用其中一种方法，就暂不封装了，权当个工具库用，留待后续，或者哪位读者有兴趣总结下，留个链接也是极好的~

VSCode 语法提示

代码

srcutilurlUtil.js

/**
 * 将传入的 param 对象转换成 queryString (传入空对象会返回空字符串)
 * @example
 * paramObjToQueryString({ a: 'xx', b: 'yyy', c: 'zzz' }) => "?a=xx&b=yyy&c=zzz"
 * @param {Object} paramObj 传入的 param 对象
 * @returns {String} 转换后的 queryString
 */
function paramObjToQueryString(paramObj) {
    // 默认约定搜索条件都是字符串
    let queryStr = ''
    Object.entries(paramObj).forEach((item, index) => {
            // 可以在这里对参数做一些过滤 => 如果参数没有值，就不拼上去
            // if (item[1] === '') {
            //     return false
            // }

            // 根据第一位是不是 "?" 来决定如何拼接
            if (queryStr[0] != '?') {
                queryStr = `?${item[0]}=${item[1]}`
            } else {
                queryStr = queryStr + `&${item[0]}=${item[1]}`
            }
        })
        // console.log(queryStr, 'paramObjToQueryString queryStr')
    return queryStr
}

/**
 * 给当前 url 或指定 url 添加 param 参数，并返回新的 url
 * @example
 * addParamObjToUrl("https://www.baidu.com/s?ie=UTF-8&wd=localstorage", { test: 111 }) => "https://www.baidu.com/s?ie=UTF-8&wd=localstorage&test=111"
 * @example
 * addParamObjToUrl("https://www.baidu.com/s", { test: 111, test2: 222 }) => "https://www.baidu.com/s?test=111&test2=222"
 * @param {String} wholeUrl url
 * @param {Object} paramObj 需要添加到 url 中的 prams 对象
 * @returns {String} 处理后的 url
 */
function addParamObjToUrl(wholeUrl, paramObj = {}) {
    let url = wholeUrl ? wholeUrl : window.location.href
    let queryString = paramObjToQueryString(paramObj)
    return url.includes("?") ? `${url}${queryString && ("&" + queryString.substring(1))}` : `${url + queryString}`
}

/**
 * 给当前 url 或指定 url 添加 param 参数，并返回新的 url
 * @example
 * addParamToUrl("https://www.baidu.com/s?ie=UTF-8&wd=localstorage", "test", 111) => "https://www.baidu.com/s?ie=UTF-8&wd=localstorage&test=111"
 * @example
 * addParamToUrl("https://www.baidu.com/s", "test", 111) => "https://www.baidu.com/s?test=111"
 * @param {String} wholeUrl 需要修改的 url 地址
 * @param {String} paramName 需要添加的 param 名
 * @param {any} paramValue 需要添加的 param 值
 * @returns {String} 处理后的 url
 */
function addParamToUrl(wholeUrl, paramName, paramValue) {
    let url = wholeUrl ? wholeUrl : window.location.href
    return url.indexOf("?") > -1 ? `${url}&${paramName}=${paramValue}` : `${url}?${paramName}=${paramValue}`
}


/**
 * 获取指定 url 或者当前 url 不携带参数的地址（不传参数就默认是当前 url）
 * @example
 * getUrlWithoutParams("https://www.baidu.com/s?ie=UTF-8&wd=localstorage") => "https://www.baidu.com/s"
 * @param {String} wholeUrl 完整的 url 字符串
 * @returns {String} 处理后的 url
 */
function getUrlWithoutParams(wholeUrl) {
    let url = wholeUrl ? wholeUrl : window.location.href
    if (url.indexOf('?') > 0) {
        let baseUrl = url.substring(0, url.indexOf('?'))
        return baseUrl
    }
    return url
}

/**
 * 获取当前 url 或者指定 url 中的 params 对象（不传参数就默认是当前 url）
 * @example
 * getParamObj("https://www.baidu.com/s?ie=UTF-8&wd=localstorage") => {ie: "UTF-8", wd: "localstorage"}
 * @param {String} wholeUrl 完整的 url
 * @returns {Object} 提取出的 params 对象
 */
function getParamObj(wholeUrl) {
    let params = null;
    let url = wholeUrl ? wholeUrl : window.location.href;
    let queryParams = url.split("?");
    queryParams = Array.isArray(queryParams) && queryParams[1] ? queryParams[1] : "";

    params = {};
    let vars = queryParams.split("&");
    for (let i = 0; i < vars.length; i++) {
        let pair = vars[i].split("=");
        params[pair[0]] = pair[1];
    }

    return params;
}

/**
 * 获取指定 url 或者当前 url 中的某个查询参数，没值返回 false（该参数的值可能也正好是 false，需自行注意）
 * @example
 * getParamValueByName("https://www.baidu.com/s?ie=UTF-8&wd=localstorage", "wd") => "localstorage"
 * @param {String} wholeUrl 完整的 url 字符串
 * @param {String} paramName 需要获取到的 param 名字
 * @returns {any} 提取出的 param 值，没值返回 false（该参数的值可能也正好是 false，需自行注意）
 */
function getParamValueByName(wholeUrl, paramName) {
    let url = wholeUrl ? wholeUrl : window.location.href
    let queryStr = url.substring(url.indexOf('?') + 1);
    let params = queryStr.split("&");
    for (let i = 0; i < params.length; i++) {
        let pair = params[i].split("=");
        if (pair[0] == paramName) { return pair[1]; }
    }
    return (false);
}

/**
 * 删除当前 url 或指定 url 的指定 params 参数，并返回新的 url
 * @example
 * deleteUrlParamByName("https://www.baidu.com/s?ie=UTF-8&wd=localstorage", "ie") => "https://www.baidu.com/s?wd=localstorage"
 * @param {String} wholeUrl 需要修改的 url 地址
 * @param {String} paramName 需要删除的 param 名
 * @returns {String} 处理后的 url
 */
function deleteUrlParamByName(wholeUrl, paramName) {
    let url = wholeUrl ? wholeUrl : window.location.href
    let paramStr = url.substring(url.indexOf('?') + 1)
    let baseUrl = url.substr(0, url.indexOf("?"))
    let paramsUrl = ""

    let arr = new Array()
    if (paramStr != "") {
        let params = paramStr.split("&")
        for (let i = 0; i < params.length; i++) {
            let pair = params[i].split("=")
            if (pair[0] != paramName) {
                arr.push(params[i])
            }
        }
    }
    if (arr.length > 0) {
        paramsUrl = "?" + arr.join("&")
    }
    url = baseUrl + paramsUrl
    return url
}

export {
    paramObjToQueryString,
    addParamObjToUrl,
    addParamToUrl,
    getUrlWithoutParams,
    getParamObj,
    getParamValueByName,
    deleteUrlParamByName,
}

使用

import {
    paramObjToQueryString,
    addParamObjToUrl,
    addParamToUrl,
    getUrlWithoutParams,
    getParamObj,
    getParamValueByName,
    deleteUrlParamByName,
} from '../util/urlUtil.js'

console.log(paramObjToQueryString({ a: 'xx', b: 'yyy', c: 'zzz' }))
// "?a=xx&b=yyy&c=zzz"

console.log(addParamObjToUrl("https://www.baidu.com/s?ie=UTF-8&wd=localstorage", { test: 111 }))
// "https://www.baidu.com/s?ie=UTF-8&wd=localstorage&test=111"
console.log(addParamObjToUrl("https://www.baidu.com/s", { test: 111, test2: 222 }))
// "https://www.baidu.com/s?test=111&test2=222"

console.log(addParamToUrl("https://www.baidu.com/s?ie=UTF-8&wd=localstorage", "test", 111))
// "https://www.baidu.com/s?ie=UTF-8&wd=localstorage&test=111"
console.log(addParamToUrl("https://www.baidu.com/s", "test", 111))
// "https://www.baidu.com/s?test=111"

console.log(getUrlWithoutParams("https://www.baidu.com/s?ie=UTF-8&wd=localstorage"))
// "https://www.baidu.com/s"

console.log(getParamObj("https://www.baidu.com/s?ie=UTF-8&wd=localstorage"))
// {ie: "UTF-8", wd: "localstorage"}

console.log(getParamValueByName("https://www.baidu.com/s?ie=UTF-8&wd=localstorage", "wd"))
// "localstorage"

console.log(deleteUrlParamByName("https://www.baidu.com/s?ie=UTF-8&wd=localstorage", "ie"))
// "https://www.baidu.com/s?wd=localstorage"

补充

拼接搜索条件 {a: 'xx', b: 'yyy', c: 'zzz'} 成 ?a=xx&b=yyy&c=zzz

// {a: 'xx', b: 'yyy', c: 'zzz'} => ?a=xx&b=yyy&c=zzz (传入空对象会返回空字符串)
paramObjToQueryString(paramObj) {
    // 默认约定搜索条件都是字符串
    let queryStr = ''
    Object.entries(paramObj).forEach((item, index) => {
        // 可以在这里对参数做一些过滤 => 如果参数没有值，就不拼上去
        // if (item[1] === '') {
        //     return false
        // }

        // 根据第一位是不是 "?" 来决定如何拼接
        if (queryStr[0] != '?') {
            queryStr = `?${item[0]}=${item[1]}`
        } else {
            queryStr = queryStr + `&${item[0]}=${item[1]}`
        }
    })
    // console.log(queryStr, 'paramObjToQueryString queryStr')
    return queryStr
}

高级用法

// 只保留有值的搜索条件，拼接成 ?a=xx&b=yyy&c=zzz (传入空对象会返回空字符串)
paramObjToQueryString(paramObj) {
    // 默认约定搜索条件都是字符串
    let queryStr = ''
    Object.entries(paramObj).forEach((item, index) => {
        // 可以在这里对参数做一些过滤 => 如果参数没有值，就不拼上去
        // if (item[1] === '') {
        //     return false
        // }

        // 根据第一位是不是 "?" 来决定如何拼接
        if (queryStr[0] != '?') {
            queryStr = `?${item[0]}=${item[1]}`
        } else {
            queryStr = queryStr + `&${item[0]}=${item[1]}`
        }
    })
    // console.log(queryStr, 'paramObjToQueryString queryStr')
    return queryStr
}


// 按搜索条件搜索地块
searchDikuai(paramObj) {
    // { region, searchValue, minValue, maxValue, industry }
    console.log(paramObj, 'paramObj')
    let that = this
    wx.request({
        url: urlList.searchDikuai + this.paramObjToQueryString(paramObj),
        method: "GET",
        // header: {
        //   'content-type': 'application/x-www-form-urlencoded'
        // },
        success(res) {
            console.log(res, 'searchDikuai res')
            if (res.data.msg == '请求成功') {
                let data = res.data.data
                // console.log(data, 'searchDikuai data')
                that.setData({
                    listData: data
                })
            }
        },
        fail(err) {
            console.log(err, 'err')
        }
    })
},


   
    // 调用搜索方法
    this.searchDikuai({
        regional: regional,
        searchValue: searchValue,
        minValue: minValue,
        maxValue: maxValue,
        industry: industry,
    })