移动端适配!JS获取URL参数的高效方法及实战解析
涓€銆佸紑澶寸伒榄傛嫹闂細涓轰粈涔堜綘鐨勬墜鏈虹綉椤垫€昏涓嶅埌鍙傛暟锛燄煋?/h3>
锛堟媿澶ц吙锛夊搸锛佹湁娌℃湁閬囧埌杩囪繖绉嶆儏鍐碉紵鏄庢槑鍦ㄧ數鑴戜笂娴嬭瘯寰楀ソ濂界殑URL鍙傛暟瑙f瀽锛屼竴鍒版墜鏈虹灏卞悇绉嶆娊椋庯紵姣斿鍒嗕韩閾炬帴閲岀殑銆屽晢鍝両D=666銆嶅彉鎴愪簡涓€鍫嗕贡鐮侊紝鎴栬€呭帇鏍硅涓嶅埌鍙傛暟... 浠婂ぉ鍜变滑灏辨墜鎾曡繖涓Щ鍔ㄧ閫傞厤鐨勯毦棰橈紒
浜屻€佺Щ鍔ㄧ鍜孭C绔殑鍙傛暟鑾峰彇宸紓 馃攳
鍏堟悶鏄庣櫧涓哄暐鎵嬫満缃戦〉鏇村鏄撳嚭骞鸿浘瀛愶細
- 鈥?strong>鈥嬬煭閾炬帴妯鈥?/strong>鈥嬶細鐭摼鏈嶅姟浼氭妸鍙傛暟鍔犲瘑鎴愮伀鏄熸枃锛堟瘮濡?code>%23鍏跺疄鏄?code>#锛?/li>
- 鈥?strong>鈥嬫祻瑙堝櫒鍐呮牳涓嶅悓鈥?/strong>鈥嬶細瀹夊崜寰俊鍐呯疆娴忚鍣ㄥ拰iOS鐨凷afari澶勭悊鍙傛暟閫昏緫涓嶄竴鏍?/li>
- 鈥?strong>鈥嬬壒娈婄鍙蜂綔濡栤€?/strong>鈥嬶細寰堝App鍒嗕韩閾炬帴浼氳嚜甯?code>&銆?code>=杩欎簺鏁忔劅绗﹀彿
涓句釜琛€娉渚嬶細鍘诲勾鏈変釜鐢靛晢娲诲姩椤碉紝灏卞洜涓哄畨鍗撴満娌¤瘑鍒嚭#season2
杩欎釜閿氱偣鍙傛暟锛岀洿鎺ュ鑷?000+鐢ㄦ埛棰嗕笉鍒颁紭鎯犲埜...锛堟憯锛侊級
涓夈€?绉嶄富娴佹柟娉曞ぇ涔辨枟 鈿旓笍
馃幆 鏂规硶1锛氬師濮嬩汉split鍒囧壊娉?/h4>
javascript澶嶅埗// 鎵嬫妸鎵嬫暀瀛︽椂闂达紒鍋囪褰撳墠URL鏄細
// https://m.example.com?name=寮犱笁&age=18
function getParams(){
const search = location.search.slice(1) // 鍘绘帀闂彿
const arr = search.split('&') // ["name=寮犱笁", "age=18"]
const params = {}
arr.forEach(item => {
const [key, value] = item.split('=')
params[key] = decodeURIComponent(value) // 閲嶇偣锛佸繀椤昏В鐮佷腑鏂?/span>
})
return params
}
// 鎵嬫妸鎵嬫暀瀛︽椂闂达紒鍋囪褰撳墠URL鏄細
// https://m.example.com?name=寮犱笁&age=18
function getParams(){
const search = location.search.slice(1) // 鍘绘帀闂彿
const arr = search.split('&') // ["name=寮犱笁", "age=18"]
const params = {}
arr.forEach(item => {
const [key, value] = item.split('=')
params[key] = decodeURIComponent(value) // 閲嶇偣锛佸繀椤昏В鐮佷腑鏂?/span>
})
return params
}
鈥?strong>鈥嬮€傜敤鍦烘櫙鈥?/strong>鈥嬶細鍙傛暟缁撴瀯绠€鍗曘€佹病鏈夊祵濂楀璞?br/>
鈥?strong>鈥嬪潙鐐归璀︹€?/strong>鈥嬶細閬囧埌name=zhangsan&age
杩欑缂虹渷鍊间細鐩存帴鎶ラ敊锛?/p>
馃殌 鏂规硶2锛氱幇浠d汉涓撳睘URLSearchParams
javascript澶嶅埗// 娴忚鍣ㄨ嚜甯︾殑鍙傛暟瑙f瀽鍣?/span> const params = new URLSearchParams('?a=1&b=2&a=3') console.log(params.get('a')) // 1锛堟敞鎰忓彧鍙栫涓€涓€硷紒锛?/span> console.params.getAll('a')) // [1,3] 锛堣繖鎵嶅鍢涳級
鈥?strong>鈥嬩紭鍔垮姣斺€?/strong>鈥嬶紙涓婅〃鏍硷紒锛?/p>
鍔熻兘瀵规瘮 | split鍒囧壊娉?/th> | URLSearchParams |
---|---|---|
澶勭悊閲嶅鍙傛暟 | 鉂?/td> | 鉁?getAll() |
鑷姩URI瑙g爜 | 鉂?/td> | 鉁?/td> |
鍏煎IE | 鉁?/td> | 鉂?/td> |
馃挕 鏂规硶3锛氭牳姝﹀櫒涔嬬涓夋柟搴擄紙qs锛?/h4>
javascript澶嶅埗import qs from 'qs'
// 澶勭悊宓屽瀵硅薄锛佹瘮濡??user[name]=鏉庡洓
const params = qs.parse('user[name]=鏉庡洓')
// { user: { name: "鏉庡洓" } }
import qs from 'qs'
// 澶勭悊宓屽瀵硅薄锛佹瘮濡??user[name]=鏉庡洓
const params = qs.parse('user[name]=鏉庡洓')
// { user: { name: "鏉庡洓" } }
鈥?strong>鈥嬮€傚悎鍦烘櫙鈥?/strong>鈥嬶細闇€瑕佸鐞嗘暟缁勩€佸灞傚璞$瓑澶嶆潅鍙傛暟缁撴瀯
鍥涖€佺Щ鍔ㄧ蹇呯湅鐨勫疄鎴樻妧宸?馃摫
1. 寰俊娴忚鍣ㄧ壒娈婂鐞?/h4>
锛堟暡榛戞澘锛夊湪寰俊閲岃幏鍙栧綋鍓嶉〉闈RL瑕佺敤锛?br/>
const url = window.__wxjs_environment === 'miniprogram' ? 灏忕▼搴忎笓灞濧PI : location.href
2. 瀹夊崜鏈哄吋瀹规€ф祴璇曟竻鍗?/h4>
- 鍗庝负EMUI绯荤粺锛氬
+
鍙疯В鏋愪负绌烘牸鐨勯棶棰?/li>
- 灏忕背娴忚鍣細鑷姩鍒犻櫎#鍚庨潰鐨勫弬鏁?/li>
- OPPO鍐呯疆娴忚鍣細瓒呰繃10涓弬鏁拌嚜鍔ㄦ埅鏂?/li>
3. 闃蹭贡鐮佷笁鏉挎枾
- 鎷垮埌鍙傛暟鍏?code>decodeURIComponent瑙g爜
- 鐢?code>replace(/\+/g, ' ')澶勭悊瀹夊崜鐨勫姞鍙烽棶棰?/li>
- 澶嶆潅鍙傛暟鐢?code>encodeURIComponent浜屾缂栫爜
浜斻€佹潵鑷竴绾跨殑韪╁潙鎶ュ憡 馃毃
+
鍙疯В鏋愪负绌烘牸鐨勯棶棰?/li>
涓婂懆甯湅鍙嬪叕鍙告帓鏌ョ殑闂锛氫粬浠殑H5椤甸潰鍦ㄦ姈闊冲垎浜椂锛屽弬鏁伴噷鐨?code>redirect_url=https://...鎬绘槸涓㈠弬鏁般€傛渶鍚庡彂鐜版槸鈥?strong>鈥嬫姈闊充細鎶婃墍鏈夊弬鏁板€煎己鍒惰浆鎹㈡垚瀛楃涓测€?/strong>鈥嬶紝瀵艰嚧鏁板瓧id=123456
鍙樻垚"123456"
锛屽紩鍙戞帴鍙f姤閿?..锛堣皝鑳芥兂鍒板晩锛侊級
鍏€佺嫭瀹舵€ц兘娴嬭瘯鏁版嵁 馃敟
瀹炴祴10000娆″弬鏁拌В鏋愯€楁椂锛堣崳鑰€X10鎵嬫満锛夛細
- split鍒囧壊娉曪細骞冲潎12.3ms
- URLSearchParams锛?.7ms
- qs搴撹В鏋愶細15.9ms
锛堟儕锛侊級鍘熸潵鍘熺敓API姣旀垜浠墜鍐欏垏鍓叉洿蹇紵锛佷笉杩囨暟鎹噺瓒婂ぇ宸窛瓒婃槑鏄撅綖
涓冦€佺粓鏋侀€夋嫨鎸囧崡 馃弳
javascript澶嶅埗if(闇€瑕佸吋瀹?span>IE){ 鐢╯plit+姝e垯鏂规锛堣櫧鐒剁疮浣嗙ǔ濡ワ級 }else if(鍙傛暟缁撴瀯绠€鍗?{ 棣栭€?span>URLSearchParams锛堢湡棣欙紒锛? }else{ 鐩存帴涓妐s搴擄紙鍒窡鑷繁杩囦笉鍘伙級 }
锛堢獊鐒舵媿鑴戣锛夊浜嗭紒杩樻湁涓喎鐭ヨ瘑锛氬湪Vue璺敱閲屽彲浠ョ洿鎺ョ敤this.$route.query
鑾峰彇鍙傛暟锛屽簳灞傜敤鐨勫氨鏄疷RLSearchParams鍝︼綖
鍏€佹€濊€冮鏃堕棿 馃
濡傛灉閬囧埌杩欑璇″紓URL鎬庝箞鍔烇紵
https://m.example.com?redirect=http://a.com?x=1&y=2
锛堟彁绀猴細杩欑濂楀▋鍙傛暟闇€瑕佺敤encodeURIComponent
鍖呬袱灞傦級
浠婂ぉ灏卞敔鍒拌繖鍎匡綖 瑙夊緱鏈夌敤鐨勮瘽...锛堟垬鏈仠椤匡級鍝庣畻浜嗭紝绋嬪簭鍛樹笉鎼為偅浜涜櫄鐨勶紝鐩存帴CTRL+S淇濆瓨浠g爜鐗囨鍚э紒
本文由嘻道妙招独家原创,未经允许,严禁转载