在web开发中,我们经常会对 url参数 进行操作,
- 获取 url中传递的参数
- 使用 url传参 向后端发送请求 这里简单写了两个常见的处理
获取 url中传递的参数
<script>
/**
* 获取 url中传递的参数
* @param {string} url: 请求地址
* @returns {object} 请求参数集合
*/
function getUrlParams(url) {
// 参数校验
if (!url) return null
const urlParamsStr = url.slice(url.lastIndexOf("?") + 1)
let paramsObject = {}
urlParamsStr.split("&").forEach(item => {
paramsObject[item.split('=')[0]] = item.split('=')[1]
})
return paramsObject
}
console.log('getUrlParam', getUrlParams("https://juejin.cn?name=zhangsan&age=18&id=123")); // {name: 'zhangsan', age: '18', id: '123'}
</script>
拼接请求参数
<script>
/**
* 拼接请求参数
* @params {string} url: 请求地址
* @params {object} params: 请求参数集合
* @returns {string} 拼接后带参数的请求地址
*/
function joinParams(url, params) {
// 参数校验
if (!url) return null
if (url && typeof params !== "object") return url
let newUrl = url + '?'
Object.keys(params).forEach((key, index) => {
newUrl += ((index > 0 ? '&' : '') + `${key}=${params[key]}`)
})
return newUrl
}
console.log('joinParams', joinParams("https://juejin.cn", { name: 'zhangsan', age: '1', id: 123 })); // https://juejin.cn?name=zhangsan&age=1&id=123
</script>
写在最后
这个只是个人简单的写写,并没有去对函数中的某些内容进行 过多的校验,只是写了个最基础实现方式,各位根据当前需求个性化调整