前端URL拼接路徑參數(shù)具體實現(xiàn)代碼
更新時間：2023年12月28日 08:52:56 作者：程序員的脫發(fā)之路
這篇文章主要給大家介紹了關(guān)于前端URL拼接路徑參數(shù)具體實現(xiàn)的相關(guān)資料,url地址拼接是經(jīng)常會遇到的問題,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
一、應(yīng)用場景
我們有時候會遇到瀏覽器URL拼接參數(shù)的場景，例如頁面跳轉(zhuǎn)時，帶上一個特定的標識：https://www.baidu.com?from=csdn
二、具體實現(xiàn)
1.字符串拼接
我們首先能想到用字符串拼接的方式實現(xiàn)
const baseUrl = 'https://www.baidu.com' const url = baseUrl + '?from=csdn'
但是如果要跳轉(zhuǎn)的url并不是固定的時候，比如：
const baseUrl = 'https://www.baidu.com/s?wd=time' const url = baseUrl + '&from=csdn'
所以我們在拼接參數(shù)的時候要先行判斷，原url是否已經(jīng)包含參數(shù)，如果不包含要以?開頭，反之要以&開頭
2.URL對象實現(xiàn)
我們可以用瀏覽器給我們提供的URL API（不兼容IE）
const url = new URL("https://www.baidu.com/s?wd=time");
console.log(url)
我們就得到了一個解析好的URL對象
如果我們想增加參數(shù)，直接在searchParams對象中增加就行
const url = new URL("https://www.baidu.com/s?wd=time");
url.searchParams.append('from', 'csdn');
console.log(url)
這樣我們的參數(shù)就添加好了，我們只需要調(diào)用 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())
總結(jié)
到此這篇關(guān)于前端URL拼接路徑參數(shù)具體實現(xiàn)的文章就介紹到這了,更多相關(guān)前端URL拼接路徑參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
谷歌瀏覽器 insertCell與appendChild的區(qū)別
table中增加單元格時 在谷歌瀏覽器中使用insertCell方法增加列時，顯示結(jié)果的先后順序與程序執(zhí)行的先后順序相反2009-02-02
上一篇的目的只是讓大家簡單的理解自定事件是如何模擬出來的，大家不難發(fā)現(xiàn)會有很多缺陷,本篇主要已解決上一篇的問題為主，感興趣的朋友可以參考，或許本文對你有所幫助2013-02-02
拖動滑塊驗證功能在支付寶，微信各大平臺都能見到這樣的功能，那么基于js組件是如何實現(xiàn)此功能的呢？今天小編就給大家分享下js 拖動滑塊 驗證功能的實現(xiàn)代碼,需要的朋友參考下吧2016-11-11
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)卡片層疊滑動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
《javascript設(shè)計模式》學習筆記四：Javascript面向?qū)ο蟪绦蛟O(shè)計鏈式調(diào)用實例分析
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計鏈式調(diào)用,結(jié)合實例形式分析了《javascript設(shè)計模式》中鏈式調(diào)用的原理與簡單使用技巧,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了原生JS實現(xiàn)的雪花飄落動畫效果,涉及javascript數(shù)值運算及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-05-05
JavaScript實現(xiàn)字符串轉(zhuǎn)數(shù)值的多種方法
在 JavaScript 中,將字符串轉(zhuǎn)換為數(shù)值（包括小數(shù)）有多種方法,主要包括parseFloat(),Number()和toFixed(),?下面小編就和大家詳細講講具體使用方法,希望對大家有所幫助2026-05-05
layer.open關(guān)閉父窗口 以及調(diào)用父頁面的方法
今天小編就為大家分享一篇layer.open關(guān)閉父窗口 以及調(diào)用父頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
在本篇文章里小編給大家分享了關(guān)于JavaScript禁用右鍵單擊優(yōu)缺點分析，有需要的朋友們學習下。2019-01-01
JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的遍歷算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的遍歷算法,簡單介紹了javascript實現(xiàn)數(shù)據(jù)結(jié)構(gòu)中二叉樹的中序遍歷、先序遍歷及后序遍歷方法與相關(guān)使用技巧,需要的朋友可以參考下2017-04-04