js如何获取url参数值

1,074 阅读1分钟

1. 需求背景

    微信小程序跳转到webview页、需要获取到该跳转url中是否携带有参数status以及其值, 故梳理此文章。

2. 获取方式

若尽可能精简地描述、假设跳转url为: const tmp = https://xxxxxx/xxxxx.php?B=2&C=3&status=true

2.1 正则表达式
getUrlParams (url = '', name) {
  let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
  // 判定URL是否符合正则表达式
  let r = url.match(reg)
  if (r !== null) {
    return r[2]
  }
  return null
},
console.log('url参数截取', getUrlParams(tmp, 'status'))

需要注意的是: 要留意该url是否有encodeURIComponent()、若有则需要先decodeURIComponent()一下.
缺陷: 若需要获取的参数名放在第一个参数那就没法识别了、不信你往下看。

let tmp1 = 'https://xxxxxx/xxxxx.php?B=2&C=3&status=true'
// 打印: url参数截取-非第一个参数 true
console.log('url参数截取-非第一个参数', getUrlParams(tmp1, 'status')) 
let tmp2 = 'https://xxxxxx/xxxxx.php?status=true&B=2&C=3'
// 打印: url参数截取-第一个参数 null
console.log('url参数截取-第一个参数', getUrlParams(tmp2, 'status')) 

关于这个问题、会在另外一篇讲正则表达式的时候说明其优化方案。

2.2 split拆分法(容易理解)
const url = 'https://xxxxxx/xxxxx.php?B=2&C=3&status=true'
function getUrlParams (url = '') {
  let obj = new Object()
  if(url && url.indexOf('?') !== -1){ // 判断是否带有?参数
    let params = url.split('?') || []
    if(params.length === 2) {
      params = params[1].split('&')
      // 获取所有的参数并组装成对象
      for(let i = 0; i< params.length; i++){
        let tmp = params[i].split('=')
        obj[tmp[0]] = tmp[1]
      }
    }
  }
  return obj
}
const obj = getUrlParams(url)
// typeof obj.status: string(字符串类型)
console.log('status值', obj.status, typeof obj.status)

应用场景:

  • 获取URL中是否含有指定参数、获取该参数值;
  • 获取URL中所有的参数名、并组装成参数对象;

3. 写在最后

在实际开发中、页面跳转中获取页面携带的URL参数是非常常见的、比如H5、微信小程序、ReactNative等技术栈、实现思路类似、根据遇到的具体问题进行解决即可。

若有错误之处, 恳请留言, 定会及时更正!
若觉着对您有帮助的话恳请点个赞或着收藏吧!