目录
url 与 params 参数的常见操作归纳汇总（含精心准备的注释）
不校验网址合法性，默认你传过来的都是正常的网址
- 针对方法名做了优化，个人觉得更加直观些
- 后续又追加一些注释，在调用函数时语法提示更方便直观（参数类型、调用示例、方法功能解释、参数解释、返回值解释）
- 可能后续采用面向对象封装会更好些，最起码可以省去重复传 url 这么一步操作，不过考虑到大多情况下只用其中一种方法，就暂不封装了，权当个工具库用，留待后续，或者哪位读者有兴趣总结下，留个链接也是极好的~
VSCode 语法提示
代码
src\util\urlUtil.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,
})