介绍
js-url-complier 是一个 npm 包，是一个用于解析 URL 的库。该库做到了 URL 的分解与构建，同时提供了别名与占位符的支持。您可以利用该库让您的 URL 设计更具扩展性。该库支持浏览器端和服务端的使用。
安装
您可以通过 npm 安装 js-url-complier, 其命令如下：
npm install js-url-complier
使用
下面介绍 js-url-complier 的常见 API 和使用方式。
初始化 URL 编译器
import UrlComplier from 'js-url-complier';
const urlCompiler = new UrlComplier('https://{host}/api/v1/{path}');在上述代码中，我们初始化了一个 URL 编译器。用花括号包含起来的 URL 部分，可以视为占位符。后面我们会描述如何使用它。
编译 URL
const compiledUrl = urlCompiler.compile({
host: 'example.com',
path: 'user/123'
});
console.log(compiledUrl); // https://example.com/api/v1/user/123上述代码中我们用 urlCompiler.compile 编译了 URL。编译过程中用到了 URL 编译器初始化时定义的占位符。
解析 URL
-- -------------------- ---- ------- ----- --------- - ------------------------------------------------------------ ----------------------- -- - --------- -------- ----- -------------- ----- ------------------ - --
上述代码中我们用 urlCompiler.parseUrl 解析了 URL。解析后，返回一个对象，对象中包含了 protocol、host、path 等属性。
高级使用
URL 别名
js-url-complier 除了支持占位符，还支持 URL 别名。URL 别名用于将 URL 的特定部分映射到具有语义的名称之一。 如 {?name} 可以用于查询字符串中的名称字段。
const urlCompiler = new UrlComplier('https://example.com/{/firstParam}/{?name}');
const compileUrl = urlCompiler.compile({
firstParam: 'pathValue',
name: 'queryValue'
});
console.log(compileUrl); // https://example.com/pathValue?name=queryValue'URL 占位符
URL 占位符当做为 URL 本身的一部分，支持声明式的值替换等。
const urlCompiler = new UrlComplier('https://example.com/{/firstParam}/:secondParam');
const compiledUrl = urlCompiler.compile({
firstParam: 'pathValue',
secondParam: '123'
});
console.log(compiledUrl); // https://example.com/pathValue/123此处使用冒号指定占位符的名称； 一旦指定了，该名称就可以映射到值。
REGEXP 支持
URL 系统内还提供了支持动态类型 (数据类型) 和 REGEXP 的 API。
-- -------------------- ---- -------
----- ----------- - --- ----------------------------------------------------------------------- -
------ -
------- -----------------
-
---
----- ----------- - ---------------------
----------- ------------
------------ ---
---
------------------------- -- ----------------------------------
----- ------------ - ----------------------------------------------------------
-------------------------- -- - ----------- ------------ ------------ --- -我们需要按如下方式配置数据类型与 REGEXP 在实际要求之前：
const UrlCompiler = new UrlComplier(urlPattern, options) // Options 定义了 types
结束语
js-url-complier 是一个非常有用的 URL 解析库。在前端工程师面临这种 URL 解析问题时，该库可以帮助您进行 URL 解析和处理。它支持浏览器端和服务端，具有良好的可移植性，兼容性和易用性。
您可以在 GitHub 找到其源码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e4d9381d61a3540a92