前言
在 web 前端开发中，我们经常需要对 url 进行操作，例如获取 url 的参数、动态生成 url 等。但是，对于 url 的处理不是一件非常方便的事情。于是，有人就利用 npm 发布了一个名为 @jsbit/url 的 url 处理工具包，让我们能够轻松地处理 url。
安装
在使用 @jsbit/url 之前，需要先安装它。通过 npm 命令行工具安装其最新版本。
npm install @jsbit/url
使用方法
@jsbit/url 提供了一系列的方法来操作 url。在接下来的内容中，我们将深入了解这些方法的使用方法。
解析 url
使用 parseUrl 方法来解析 url，返回一个对象，该对象包含 url 的各个部分，例如协议、主机名、端口、路径等。
const { parseUrl } = require("@jsbit/url");
const url = "https://www.example.com:8080/path/to/somewhere?key=value#hash";
const parsedUrl = parseUrl(url);
console.log(parsedUrl);输出结果如下：
-- -------------------- ---- ------- - --------- -------- ----- ----------------------- --------- ------------------ ----- ------- ----- --------------------- ------- ------------- ----- ------- -
构造 url
使用 constructUrl 方法来构造 url。该方法接受一个对象作为参数，该对象必须包含 url 的各个部分，例如协议、主机名、端口、路径等。
-- -------------------- ---- ------- ----- - ------------ - - ---------------------- ----- ------ - - --------- -------- --------- ------------------ ----- ------- ----- --------------------- ------- ------------- ----- ------- -- ----- --- - --------------------- -----------------
输出结果如下：
https://www.example.com:8080/path/to/somewhere?key=value#hash
解析查询字符串
使用 parseQueryString 方法来解析查询字符串。该方法接受一个查询字符串作为参数，返回一个对象，该对象包含查询字符串的所有键值对。
const { parseQueryString } = require("@jsbit/url");
const queryString = "?key1=value1&key2=value2";
const parsedQueryString = parseQueryString(queryString);
console.log(parsedQueryString);输出结果如下：
{
key1: "value1",
key2: "value2"
}构造查询字符串
使用 constructQueryString 方法来构造查询字符串。该方法接受一个对象作为参数，该对象包含所有的查询参数。
const { constructQueryString } = require("@jsbit/url");
const queryParams = {
key1: "value1",
key2: "value2"
};
const queryString = constructQueryString(queryParams);
console.log(queryString);输出结果如下：
?key1=value1&key2=value2
获取 url 参数
使用 getUrlParam 方法来获取 url 的某个参数值。该方法接受两个参数，第一个参数是 url，第二个参数是要获取的参数名。
const { getUrlParam } = require("@jsbit/url");
const url = "https://www.example.com?key1=value1&key2=value2";
const key1 = getUrlParam(url, "key1");
console.log(key1);输出结果如下：
value1
设置 url 参数
使用 setUrlParam 方法来设置 url 的某个参数值。该方法接受三个参数，第一个参数是 url，第二个参数是要设置的参数名，第三个参数是要设置的参数值。
const { setUrlParam } = require("@jsbit/url");
let url = "https://www.example.com?key1=value1&key2=value2";
url = setUrlParam(url, "key1", "new_value");
console.log(url);输出结果如下：
https://www.example.com?key1=new_value&key2=value2
总结
到此为止，我们已经学习了 @jsbit/url 的基本用法。通过该包提供的方法，我们可以轻松地操作 url，使开发变得更加便捷和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e3d9381d61a3540a5a