前端解析query字符串的两种方法

获取地址栏参数是前端常常要使用的操作，现在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;}