前端URL拼接路径参数具体实现代码
更新时间：2023年12月28日 08:52:56 作者：程序员的脱发之路
这篇文章主要给大家介绍了关于前端URL拼接路径参数具体实现的相关资料,url地址拼接是经常会遇到的问题,文中通过代码介绍的非常详细,需要的朋友可以参考下
一、应用场景
我们有时候会遇到浏览器URL拼接参数的场景，例如页面跳转时，带上一个特定的标识：https://www.baidu.com?from=csdn
二、具体实现
1.字符串拼接
我们首先能想到用字符串拼接的方式实现
const baseUrl = 'https://www.baidu.com' const url = baseUrl + '?from=csdn'
但是如果要跳转的url并不是固定的时候，比如：
const baseUrl = 'https://www.baidu.com/s?wd=time' const url = baseUrl + '&from=csdn'
所以我们在拼接参数的时候要先行判断，原url是否已经包含参数，如果不包含要以?开头，反之要以&开头
2.URL对象实现
我们可以用浏览器给我们提供的URL API（不兼容IE）
const url = new URL("https://www.baidu.com/s?wd=time");
console.log(url)
我们就得到了一个解析好的URL对象
如果我们想增加参数，直接在searchParams对象中增加就行
const url = new URL("https://www.baidu.com/s?wd=time");
url.searchParams.append('from', 'csdn');
console.log(url)
这样我们的参数就添加好了，我们只需要调用 url.toString()方法就能得到完整的路径了
三、完整代码
const url = new URL("https://www.baidu.com/s?wd=time");
url.searchParams.append('from', 'csdn');
console.log(url)
console.log(url.toString())
总结
到此这篇关于前端URL拼接路径参数具体实现的文章就介绍到这了,更多相关前端URL拼接路径参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS实现的缓冲运动效果,涉及JavaScript数值运算与时间函数相关使用技巧,需要的朋友可以参考下2018-04-04
发现为本文起一个合适的标题还不是那么容易，呵呵，所以在此先说明下本文的两个目的2009-02-02
这篇文章主要介绍了javascript 构建模块化开发过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
有时候出于某种需要，不希望用户可以选择某个区域，进行下面的操作，这里给出简单的代码。2010-04-04
这篇文章介绍了JavaScript遍历json对象数据的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
这篇文章主要介绍了JavaScript实现视频转GIF,本文一共会按照以下三步去实现一个视频转 GIF 功能,解封装视频,从视频文件中获取视频帧,解码视频帧,获取帧图像信息,拼装帧图像信息,生成 GIF,需要的朋友可以参考下2024-03-03
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
原来是由于IE浏览器以及Firefox对于冒泡型事件的支持层次不同造成的。（如对冒泡事件不是很了解可先查询相关资料）2010-10-10
这篇文章主要是对JavaScript中delete操作符不能删除的对象进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了javascript实现随机显示星星特效的相关资料,以一个完整实例形式较为详细的分析了js实现随机显示星星特效的实现技巧，需要的朋友可以参考下2016-01-01
这篇文章主要介绍了javascript+canvas制作九宫格小程序，效果非常棒，这里推荐给有需要的小伙伴们2014-12-12
最新评论