在 web 开发中，我们经常需要从 url 中获取参数来传递给后端或前端逻辑，为了方便处理这些 url 中的参数，有一个 Npm 包叫做 url-var。本文将介绍 url-var 的使用方法和示例代码。
什么是 url-var
url-var 是一个 Node.js 模块，它可以从 url 中解析出参数并返回一个对象。该模块使用 ES6 语法，适用于 Node.js 环境和现代浏览器。其主要功能是：
- 解析 url 中的参数
- 支持多个参数传递
- 自动处理特殊字符转义
- 方便的方法链式调用
安装和使用
使用 npm 安装 url-var：
npm install url-var
在 Node.js 中使用：
const urlVar = require('url-var');
let result = urlVar.parse('https://www.example.com/?key1=value1&key2=value2');
console.log(result);在浏览器中使用：
<script src="https://unpkg.com/url-var@latest"></script>
<script>
let result = urlVar.parse('https://www.example.com/?key1=value1&key2=value2');
console.log(result);
</script>方法
url-var 暴露出一个全局变量 urlVar，它有多个方法可以使用。
parse
parse 方法可以从 url 中解析出参数并返回一个对象。
const urlVar = require('url-var');
let result = urlVar.parse('https://www.example.com/?key1=value1&key2=value2');
console.log(result);
// { key1: 'value1', key2: 'value2'}stringify
stringify 方法可以将一个对象转换成 url 参数字符串。
const urlVar = require('url-var');
let result = urlVar.stringify({ key1: 'value1', key2: 'value2' });
console.log(result);
// key1=value1&key2=value2encode, decode
encode 方法可以将一个字符串进行 url 编码，decode 方法可以将一个字符串进行 url 解码。
-- -------------------- ---- ------- ----- ------ - ------------------- --- ------- - -------------------- ---- --------------------- -- ----------- --- ------- - --------------------------- --------------------- -- ------ --
注意: encodeURIComponent() 和 decodeURIComponent() 方法仅仅编码或解码查询字符串的key和value中的一部分, url-var 是针对整个url串(当然，你也可以自定义参数)
使用示例
获取 url 中的参数
const urlVar = require('url-var');
let result = urlVar.parse('https://www.example.com/?key1=value1&key2=value2');
console.log(result);
// { key1: 'value1', key2: 'value2'}在 url 中传递多个参数
const urlVar = require('url-var');
let result = urlVar.stringify({ key1: 'value1', key2: 'value2' });
console.log(result);
// key1=value1&key2=value2筛选某些参数
const urlVar = require('url-var');
let result = urlVar.parse('https://www.example.com/?key1=value1&key2=value2');
console.log(result.pick('key1'));
// { key1: 'value1' }更改某些参数
const urlVar = require('url-var');
let result = urlVar.parse('https://www.example.com/?key1=value1&key2=value2');
console.log(result.set('key1', 'newValue'));
// { key1: 'newValue', key2: 'value2' }拼接参数
const urlVar = require('url-var');
let result = urlVar.parse('https://www.example.com/');
console.log(result.add({ key1: 'value1', key2: 'value2' }));
// https://www.example.com/?key1=value1&key2=value2总结
url-var 是一个非常有用的 npm 包，它可以帮助我们轻松方便地处理 url 中的参数，并且使用方便、方法丰富。如果你在前端开发中需要处理 url 参数，url-var 一定会是你的一个好帮手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f1781e8991b448dcac5