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