在前端开发中，我们经常需要对 URL 进行解析、拼接等操作。而 npm 包 uri 可以帮助我们快速、准确地处理 URL。本篇文章将为你介绍 uri 的使用方法及相关注意事项。
安装 uri 包
打开终端，使用以下命令安装 uri 包：
npm install uri --save
uri 的基本用法
初始化 uri 实例
通过 uri() 函数可以创建一个 uri 实例，该函数可以传递一个 URL 字符串，也可以使用 window.location 给它赋值，如下所示：
const Uri = require('urijs');
const uri1 = new Uri('http://example.com/test?q=123#section1');
const uri2 = Uri(window.location.href);uri 实例的基本属性
uri 实例有以下属性：
protocol：协议部分，如http://。username：用户名部分，如user。password：密码部分，如pass。hostname：主机名部分，如example.com。port：端口部分，如8080。path：路径部分，如/test。query：查询参数部分，如q=123。hash：锚点部分，如section1。
我们可以通过直接读取属性来获取这些部分，如下所示：
console.log(uri1.protocol); // 输出 http: console.log(uri1.hostname); // 输出 example.com console.log(uri1.query); // 输出 q=123
修改 uri 实例的部分属性
我们可以使用 set() 函数来修改 uri 实例的属性，如下所示：
uri1.set('fragment', 'section2');
console.log(uri1.href()); // 输出 http://example.com/test?q=123#section2set() 函数的第一个参数为属性名，第二参数为属性值。
uri 实例的转化
我们可以通过 href() 函数将 uri 实例转化为 URL 字符串，如下所示：
console.log(uri1.href()); // 输出 http://example.com/test?q=123#section1
uri 的高级用法
解析查询字符串
我们可以通过 query(true) 函数来解析查询参数，如下所示：
const uri3 = new Uri('http://example.com/test?q=123&sort=desc');
console.log(uri3.query(true)); // 输出 { q: "123", sort: "desc" }构建查询字符串
我们可以使用 addQuery() 函数来构建查询参数，如下所示：
const uri4 = new Uri('http://example.com/test');
uri4.addQuery('q', '123');
uri4.addQuery('sort', 'desc');
console.log(uri4.href()); // 输出 http://example.com/test?q=123&sort=desc解析 URL 片段
我们可以通过 segment() 函数来解析 URL 片段，如下所示：
const uri5 = new Uri('http://example.com/path/to/file');
console.log(uri5.segment()); // 输出 ["path", "to", "file"]我们也可以使用 segments() 函数解析 URL 片段，如下所示：
console.log(uri5.segments()); // 输出 {0: "path", 1: "to", 2: "file"}构建 URL 片段
我们可以使用 setPath() 函数来构建 URL 片段，如下所示：
uri5.setPath('new/path/to/file');
console.log(uri5.href()); // 输出 http://example.com/new/path/to/file构建完整 URL
我们可以通过多个函数的使用来构建完整的 URL，如下所示：
-- -------------------- ---- ------- ----- ---- - --- ------------------------------- ---- --------------------- --------------------------- ------------------- -------------- ------ ----------------- -------- ------------------------- -- -- ----------------------------------------------
总结
uri包提供了一种快速、准确地解析、构建 URL 的方法。- 通过
uri包的高级用法，可以实现更加复杂的 URL 操作。 - 注意使用
set()和addQuery()函数时，参数的顺序和书写格式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb8acb5cbfe1ea0611838