远浅的日志空间
理解他人,内省自己

前端获取query参数的两种方法

作者: 远浅发表于: 2019-11-01 07:25分类: 技术

获取地址栏参数是前端常常要使用的操作,现在web开发基本不需要自己使用js去获取解析,框架都给你封装好了这种常用操作,裸写页面的机会也微乎其微。

先复习一下各大web框架获取地址参数的API吧。

  • Vue-Router:$route.query.xxx
  • React-Router: this.props.location.query.xxx
  • Express: request.query.xxx
  • Koa-Router: ctx.query.xxx
  • Egg.js: ctx.query.xxx

可以看出各家的API大致相似,都是从一个query对象上面取对应的值。

那么这个query到底是怎么来的呢。

很简单。

解析querystring字符串来的。

那怎样解析querystring呢?

在nodejs中提供了 querystring 的内置包来解析。

const qs = require("querystring");qs.parse("?xxx=yyy");

同样是js,nodejs怎么就那么方便!浏览器中是否有API用于处理解析呢?

答案是有的。

URLSearchParams

使用方法如下

解析querystring字符串

const query = new URLSearchParams("xxx=yyy");

获取指定参数的数值

const v = query.get("xxx");

正则表达式

replace接收一个函数作为参数
const Qparse = str =>{const q ={};str.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);return q;}

赠人玫瑰, 手有余香。🌹
打赏
发表评论
评论列表
评论努力加载中