url地址参数处理

312 阅读1分钟

在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>

写在最后

这个只是个人简单的写写,并没有去对函数中的某些内容进行 过多的校验,只是写了个最基础实现方式,各位根据当前需求个性化调整