引言
在前端开发中，处理 URL 是一项基本任务。通过 URI（Uniform Resource Identifier，统一资源标识符），我们可以访问 Web 上的各种资源，例如网页、图片、视频等等。
然而，处理 URI 也存在一些困难之处。常见的问题包括解析 URI、构造 URI、编码和解码 URI 等等。为了解决这些问题，我们可以使用一些成熟的工具库，其中 uri-js 就是一个非常优秀的 npm 包。
uri-js 提供了一系列函数，用于处理 URI 的各种操作。本文将详细介绍 uri-js 的使用方法，旨在帮助开发者更加方便地操作 URI。
安装
首先，我们需要将 uri-js 安装到项目中。可以使用 npm 进行安装：
npm install uri-js
解析 URI
使用 uri-js 解析 URI 非常简单。uri-js 提供了 parse 函数，接受一个 URI 字符串作为参数，并返回一个解析后的对象。
示例代码如下：
const uri = require('uri-js');
const result = uri.parse('http://www.example.com/path?query#fragment');
console.log(result);上述代码将输出以下结果：
-- -------------------- ---- ------- - ------- ------- --------- ----- ----- ------------------ ----- ----- ----- -------- ------ -------- --------- ---------- -
可以看到，uri-js 成功地将 URI 字符串解析成了一个对象，该对象包含了 URI 的各个部分。开发者可以根据需要去读取或修改这些部分，例如：
console.log(result.scheme); // "http" console.log(result.host); // "www.example.com"
构造 URI
与解析 URI 相对应的是构造 URI。通过 uri-js，我们可以方便地根据各个部分构造一个 URI。
uri-js 提供了 serialize 函数，接受一个对象作为参数，将其转换为 URI 字符串。示例代码如下：
-- -------------------- ---- ------- ----- --- - ------------------ ----- --- - - ------- ------- ----- ------------------ ----- -------- ------ -------- --------- ---------- -- ----- ------ - ------------------- --------------------
上述代码将输出以下结果：
http://www.example.com/path?query#fragment
可以看到，uri-js 成功地将一个对象转换为了相应的 URI 字符串。
需要注意的是，如果使用 serialize 函数时，传入的对象缺少必要的部分（例如 host），serialize 函数会直接抛出异常。因此，在构造 URI 时，开发者需要确保传入的对象包含了所有必需的属性。
编码和解码
在处理 URI 时，经常需要对字符串进行编码和解码。uri-js 提供了相应的函数，可以方便地进行这些操作。
编码
uri-js 提供了 encodeURIComponent 和 encodeURI 两个函数，用于对字符串进行 URL 编码。与 JavaScript 内置的函数相比，uri-js 的函数支持非 ASCII 字符的编码。
示例代码如下：
const uri = require('uri-js');
const result1 = uri.encodeURIComponent('你好');
console.log(result1); // "%E4%BD%A0%E5%A5%BD"
const result2 = uri.encodeURI('http://www.example.com/你好');
console.log(result2); // "http://www.example.com/%E4%BD%A0%E5%A5%BD"上述代码分别对中文字符串进行了编码。可以看到，uri-js 的函数成功地将非 ASCII 字符进行了编码，生成了符合 URL 规范的字符串。
解码
与编码相对应的是解码。uri-js 提供了 decodeURIComponent 和 decodeURI 两个函数，用于对字符串进行 URL 解码。
示例代码如下：
const uri = require('uri-js');
const result1 = uri.decodeURIComponent('%E4%BD%A0%E5%A5%BD');
console.log(result1); // "你好"
const result2 = uri.decodeURI('http://www.example.com/%E4%BD%A0%E5%A5%BD');
console.log(result2); // "http://www.example.com/你好"上述代码分别对编码后的字符串进行了解码。可以看到，uri-js 的函数成功地将 URL 编码的字符串进行了解码，还原了原有的字符串。
总结
本文介绍了 npm 包 uri-js 的使用方法，包括解析 URI、构造 URI、编码和解码。通过 uri-js 提供的函数，开发者可以更加方便地操作 URI，避免一些常见的问题。
需要注意的是，uri-js 并不是唯一的解决方案。在实际项目中，开发者可以根据需要选择适合自己项目的工具库。但 uri-js 提供了一种非常实用的解决方案，对于前端开发者来说，学习 uri-js 的使用是一项必备技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/58229