JS?中的URLSearchParams?對象操作(以對象的形式上傳參數(shù)到url)
更新時間：2022年12月13日 15:26:28 作者：謝友海
這篇文章主要介紹了JS中URLSearchParams的基本用法，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
基本用法
此功能某些瀏覽器尚在開發(fā)中，兼容性可能不是很好。
URLSearchParams() 構(gòu)造器：創(chuàng)建并返回一個新的URLSearchParams 對象。 開頭的’?’ 字符會被忽略。
語法：
// init: 參數(shù)可選，為一個 USVString var URLSearchParams = new URLSearchParams(init);
示例：
// 傳入一個字符串字面值
var searchParams = new URLSearchParams('https://example.com?foo=1&bar=2');
console.log(searchParams.toString()); // foo=1&bar=2
// 查找字符串
console.log(searchParams.has('foo')); // true
// 獲取字符串對應(yīng)的數(shù)據(jù)
console.log(searchParams.get('foo')); // 1
// 設(shè)置字符串
searchParams.set('ttl','3'); // 1
console.log(searchParams.toString()); // foo=1&bar=2&ttl=3
// 傳入一個 sequence
var params3 = new URLSearchParams([["foo", 1],["bar", 2]]);
console.log(params3.toString()); // foo=1&bar=2
// 傳入一個 record
var params4 = new URLSearchParams({"foo" : 1 , "bar" : 2});
console.log(params4.toString()); // foo=1&bar=2url的打印結(jié)果：
實踐運用
函數(shù)封裝：
export function toSearch(record: Record<string, string>) {
return new URLSearchParams(record).toString();
}使用
// Button 按鈕是adtd里面的，這里只展示局部代碼
<Button
type="link"
href={`#/project/flowpage?${toSearch({
id: 666,
name: "liu",
})}`}
target="_blank"
>
點擊按鈕
</Button>效果：
// 前面域名指向當(dāng)前網(wǎng)頁的域名，這里暫用...省略 ...#/project/flowpage?id=666&name="liu"
到此這篇關(guān)于JS 中的URLSearchParams 對象操作(以對象的形式上傳參數(shù)到url)的文章就介紹到這了,更多相關(guān)JS URLSearchParams內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
返回上一頁的方法有很多，本代碼通過圖片和按鈕分別實現(xiàn)，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
js下拉選擇框與輸入框聯(lián)動實現(xiàn)添加選中值到輸入框的方法
這篇文章主要介紹了js下拉選擇框與輸入框聯(lián)動實現(xiàn)添加選中值到輸入框的方法,涉及javascript中onchange事件及頁面元素遍歷的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
Bootstrap學(xué)習(xí)筆記之環(huán)境配置(1)
這篇文章主要為大家詳細介紹了Bootstrap學(xué)習(xí)筆記之環(huán)境配置的具體操作方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
屏蔽右鍵在某些特殊的情況下還是比較有用的，下面與大家分享個常用的屏蔽方法2014-05-05
微信小程序?qū)崿F(xiàn)自定義加載圖標(biāo)功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)自定義加載圖標(biāo)功能，非常不錯具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
基于Marquee.js插件實現(xiàn)的跑馬燈效果示例
這篇文章主要介紹了基于Marquee.js插件實現(xiàn)的跑馬燈效果,結(jié)合實例形式給出了Marquee.js插件的定義及具體使用方法,需要的朋友可以參考下2017-01-01
這篇文章主要給大家介紹了關(guān)于uniapp調(diào)用手機相機進行拍照的兩種方式,在uniapp中有多種方式可以調(diào)用相機進行拍照,文中介紹了兩種方法,需要的朋友可以參考下2023-09-09
本文重點給大家介紹javascript中的原型鏈知識，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看下吧2016-06-06
在使用IE6瀏覽器開發(fā)過程中出現(xiàn)各種奇葩問題，非常棘手，費勁腦汁終于問題解決。小編把解決辦法分享到腳本之家平臺，需要的朋友可以參考下2016-05-05
微信小程序?qū)崿F(xiàn)電影App導(dǎo)航和輪播
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)電影App導(dǎo)航和輪播，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11