前言
src-n-parse 是一个非常实用的 npm 包，其功能是将 URL 或者 file 路径解析成一个包含 protocol、 hostname、port、path、query、fragment 等信息的对象。在前端开发中，我们经常需要对 URL 或者 file 路径进行操作，这时候使用 src-n-parse 可以大大方便我们的开发。
安装
要使用 src-n-parse，首先需要在项目中安装该 npm 包，可以通过 npm 命令来进行安装：
npm install src-n-parse
使用教程
解析 URL
解析 URL 是 src-n-parse 最常用的功能之一，以下是一个使用示例：
const { parse } = require('src-n-parse');
const urlObj = parse("https://www.example.com:3000/path/to/resource?param1=value1¶m2=value2#anchor");
console.log(urlObj);运行上述示例代码，会输出如下结果：
{
protocol: "https",
hostname: "www.example.com",
port: "3000",
path: "/path/to/resource",
query: { param1: "value1", param2: "value2" },
fragment: "anchor"
}解析 file 路径
src-n-parse 也可以解析 file 路径，以下是一个使用示例：
const { parse } = require('src-n-parse');
const filePath = '/path/to/resource/example.txt';
const fileObj = parse(`file://${filePath}`);
console.log(fileObj);运行上述示例代码，会输出如下结果：
{
protocol: "file",
hostname: "",
port: "",
path: "/path/to/resource/example.txt",
query: {},
fragment: ""
}构建 URL
除了解析 URL，src-n-parse 还可以构建 URL。以下是一个使用示例：
-- -------------------- ---- ------- ----- - ------ - - ----------------------- ----- ------ - - --------- -------- --------- ------------------ ----- ------- ----- -------------------- ------ - ------- --------- ------- -------- -- --------- -------- -- ----- ------ - --------------- --------------------
运行上述示例代码，会输出如下结果：
https://www.example.com:3000/path/to/resource?param1=value1¶m2=value2#anchor
使用深度
src-n-parse 还可以通过设置 deep 参数来进行更深度的解析。 在 deep=1（默认）的情况下，query 参数将转换为一个对象。 而在 deep=2 的情况下，如果 query 参数中包含 "?&"，将自动将其分裂成多个级别。
以下是一个使用示例：
const { parse } = require('src-n-parse');
const urlObj = parse("https://www.example.com/path/to/resource?colors[lower][0]=red&colors[upper][0]=BLUE&colors[upper][1]=GREEN");
console.log(urlObj);运行上述示例代码，会输出如下结果（deep=1）：
{
protocol: "https",
hostname: "www.example.com",
port: "",
path: "/path/to/resource",
query: { colors: { lower: { 0: "red" }, upper: { 0: "BLUE", 1: "GREEN" } } },
fragment: ""
}以下是 deep=2 的使用示例：
const { parse } = require('src-n-parse');
const urlObj = parse("https://www.example.com/path/to/resource?colors[lower][0]=red&colors[upper][0]=BLUE&colors[upper][1]=GREEN", { deep: 2 });
console.log(urlObj);运行上述示例代码，会输出如下结果：
-- -------------------- ---- -------
-
--------- --------
--------- ------------------
----- ---
----- --------------------
------ -
------- -
------ -
-----
--
------ -
-------
-------
-
-
--
--------- --
-总结
以上就是 src-n-parse 的使用教程。该 npm 包简单易用，功能实用，可以大大提升我们前端开发的效率。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a78ccae46eb111f2e2