1. 主页 > 好文章

移动端适配!JS获取URL参数的高效方法及实战解析


涓€銆佸紑澶寸伒榄傛嫹闂細涓轰粈涔堜綘鐨勬墜鏈虹綉椤垫€昏涓嶅埌鍙傛暟锛燄煋?/h3>

锛堟媿澶ц吙锛夊搸锛佹湁娌℃湁閬囧埌杩囪繖绉嶆儏鍐碉紵鏄庢槑鍦ㄧ數鑴戜笂娴嬭瘯寰楀ソ濂界殑URL鍙傛暟瑙f瀽锛屼竴鍒版墜鏈虹灏卞悇绉嶆娊椋庯紵姣斿鍒嗕韩閾炬帴閲岀殑銆屽晢鍝両D=666銆嶅彉鎴愪簡涓€鍫嗕贡鐮侊紝鎴栬€呭帇鏍硅涓嶅埌鍙傛暟... 浠婂ぉ鍜变滑灏辨墜鎾曡繖涓Щ鍔ㄧ閫傞厤鐨勯毦棰橈紒


浜屻€佺Щ鍔ㄧ鍜孭C绔殑鍙傛暟鑾峰彇宸紓 馃攳

鍏堟悶鏄庣櫧涓哄暐鎵嬫満缃戦〉鏇村鏄撳嚭骞鸿浘瀛愶細

  1. 鈥?strong>鈥嬬煭閾炬帴妯鈥?/strong>鈥嬶細鐭摼鏈嶅姟浼氭妸鍙傛暟鍔犲瘑鎴愮伀鏄熸枃锛堟瘮濡?code>%23鍏跺疄鏄?code>#锛?/li>
  2. 鈥?strong>鈥嬫祻瑙堝櫒鍐呮牳涓嶅悓鈥?/strong>鈥嬶細瀹夊崜寰俊鍐呯疆娴忚鍣ㄥ拰iOS鐨凷afari澶勭悊鍙傛暟閫昏緫涓嶄竴鏍?/li>
  3. 鈥?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
}

鈥?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: "鏉庡洓" } }

鈥?strong>鈥嬮€傚悎鍦烘櫙鈥?/strong>鈥嬶細闇€瑕佸鐞嗘暟缁勩€佸灞傚璞$瓑澶嶆潅鍙傛暟缁撴瀯


鍥涖€佺Щ鍔ㄧ蹇呯湅鐨勫疄鎴樻妧宸?馃摫

1. 寰俊娴忚鍣ㄧ壒娈婂鐞?/h4>

锛堟暡榛戞澘锛夊湪寰俊閲岃幏鍙栧綋鍓嶉〉闈RL瑕佺敤锛?br/> const url = window.__wxjs_environment === 'miniprogram' ? 灏忕▼搴忎笓灞濧PI : location.href

2. 瀹夊崜鏈哄吋瀹规€ф祴璇曟竻鍗?/h4>
  • 鍗庝负EMUI绯荤粺锛氬+鍙疯В鏋愪负绌烘牸鐨勯棶棰?/li>
  • 灏忕背娴忚鍣細鑷姩鍒犻櫎#鍚庨潰鐨勫弬鏁?/li>
  • OPPO鍐呯疆娴忚鍣細瓒呰繃10涓弬鏁拌嚜鍔ㄦ埅鏂?/li>

3. 闃蹭贡鐮佷笁鏉挎枾

  1. 鎷垮埌鍙傛暟鍏?code>decodeURIComponent瑙g爜
  2. 鐢?code>replace(/\+/g, ' ')澶勭悊瀹夊崜鐨勫姞鍙烽棶棰?/li>
  3. 澶嶆潅鍙傛暟鐢?code>encodeURIComponent浜屾缂栫爜

浜斻€佹潵鑷竴绾跨殑韪╁潙鎶ュ憡 馃毃

涓婂懆甯湅鍙嬪叕鍙告帓鏌ョ殑闂锛氫粬浠殑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爜鐗囨鍚э紒

本文由嘻道妙招独家原创,未经允许,严禁转载