地址栏传参及获取参数——封装方法!(直接拿来用)

说说这个地址栏如何传多个参数,以及如何获取多个参数。然后把这块的逻辑封装成个函数,可以直接调并能取到自己想要的参数和值。(路由跳转同理)
先说说如何传参吧。

传的参分为常量和变量两种如下:

传的参数是常量时:
传一个参数时直接问号后面添加变量和值 。
如: https://editor.csdn.net/md/?id=110
传多个参数时,参数和参数之间要用 &隔开。
如:
https://editor.csdn.net/md/?id=110&flag=112&uuid=119

传的参数是变量时:
如果传的参数的值是个变量 id=变量1 flag=变量2 这种写法如下:

"xxxxxx/index.html?id="+变量1+"&flag="+变量2

也可以这个写法(es6):

"xxxxxx/index.html?id="+`${变量1}`+"&flag="+`${变量2}`

如何获取参数如下:

假如地址如:
https://editor.csdn.net/md/?id=110&flag=112&uuid=119
let url = window.location.href 获取问号后面的值
let url = ?id=110&flag=112&uuid=119
先写个通俗易懂的,为了节约时间变量名很随意,哈哈不要介意哈,为了更容易被看懂,所以先写了这一版很简单的,下面会整合一版哦。。。。

let url = "200.10.50.4?id=110&flag=112&uuid=119"
function urladd(name){
    let str = url.indexOf("?");
    let num  = url.slice(str+1);
    let a = num.split("&");
    var list = {};
    for(var key in a){
        list[key] = a[key];
        let b = list[key].indexOf("=");
        let c = list[key].substring(0,b);
        if(c==name){
            let d = list[key].substring(b+1)
            return d;
        }
    }
}
let result = urladd("id")
console.log("result",result)

调函数时,只需把你要取的参数名传进去,就会返回参数名对应的值
运行结果:
在这里插入图片描述

其实用slice和subsring哪一个都可以的。我故意把两个都用进去了。就当学习了哈哈
上面的代码可以整合一下:

let url = "200.10.50.4?id=110&flag=112&uuid=119"
export function urladd(name){
    let num = (url.slice(url.indexOf("?"))).split("&");
    var list = {};
    for(var key in num){
        list[key] = num[key];
        let str = list[key].substring(0,list[key].indexOf("="))
        if(str==name){
            return list[key].substring(list[key].indexOf("=")+1);
        }
    }
}
let result = urladd("flag")
console.log("result",result)

运行结果
在这里插入图片描述
直接 调方法把你想要获取的参数名传进去,就可以直接拿到自己想要的值了。

下面还有一种封装的方法(使用正则方法匹配)也是可以实现的,代码看起来可能不太容易理解,功能是一样的。

export const urladd=(name)=>{
        let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
        if(r!=null)return unescape(r[2]); return "";
    }
let result = urladd(要取的参数名)

用法都一样,调方法传参数。
如果上面用到的方法如 slice substring split indexOf 记得有点模糊,影响你看我这篇博客了,请不要走开,也不用百度,我在下面顺便简单的讲下。哈哈不要介意哈
slice用法
用来提取字符串的,有两个参数。
slice(a,b) a是起始位置,b是终止位置。总之读的时候包括起始位置的,不包括终止位置。

var str = "abcdefg"
str.slice(0,4)//return abcd 包括0不包括4
str.slice(2,4)//return  cd
str.slice(3,-2)//return de 有终止位置负数时从后往前读位
str.slice(-3,-1)//return ef 当两个参数都是负时,都是从后往前数位置

indexOf用法

返回要查的字符出现在字符串中的第一次的位置。

let str = "abc abc"
str.indexOf("a")//return 0
let str = "hello word"
str.indexOf("o")//return 4

哎呀呀~~写不动了,有点晚了。先讲这点吧。下次专门写个博客讲这些常用的方法。
如果发现哪里有问题,欢迎指出,或者有更好的意见的欢迎提出
共同进步。

希望帮助到的友友们,给个支持给个赞。原创不易~三克油~~

------努力努力再努力!

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值