在前端开发中，处理URL是一项必不可少的任务。在这里，我们要介绍一个叫做urls-tool的npm包，让你轻松地管理、解析和构建URL。
安装
使用npm，在终端中输入以下命令：
npm install urls-tool
API
urls-tool提供了一系列方法来解析、构建和管理URL。以下是详细介绍：
parse()
将URL解析成一个对象，包含以下属性：
protocol:协议（如http, https等）host:主机名和端口号（如www.google.com:80）hostname:主机名（如www.google.com）port:端口号pathname:路径search:查询参数hash:锚点
使用方法：
const urls = require('urls-tool');
const url = 'https://www.google.com/search?q=javascript&rlz=1C1GCEU_enUS832US832&oq=javascript&aqs=chrome..69i57j69i60l3j35i39.2739j0j7&sourceid=chrome&ie=UTF-8';
const parsedUrl = urls.parse(url);
console.log(parsedUrl);输出：
-- -------------------- ---- -------
-
--------- ---------
----- -----------------
--------- -----------------
----- -----
--------- ----------
------- -------------------------------------------------------------------------------------------------------------------------
----- ----
-build()
根据给定的参数构建URL字符串。
使用方法：
-- -------------------- ---- -------
----- ---- - ---------------------
----- ------ - -
--------- ---------
--------- -----------------
--------- ----------
------- ------------------------------------------------------------------------------------------------------------------------
--
----- --- - -------------------
-----------------输出：
'https://www.google.com/search?q=javascript&rlz=1C1GCEU_enUS832US832&oq=javascript&aqs=chrome..69i57j69i60l3j35i39.2739j0j7&sourceid=chrome&ie=UTF-8'
addQueryParams()
添加查询参数到指定URL字符串或URL对象上，如果存在同名查询参数，则覆盖原有查询参数。
使用方法：
const urls = require('urls-tool');
const url = 'https://www.google.com/search?q=javascript&rlz=1C1GCEU_enUS832US832&oq=javascript&aqs=chrome..69i57j69i60l3j35i39.2739j0j7&sourceid=chrome&ie=UTF-8';
const newUrl = urls.addQueryParams(url, {
foo: 'bar'
});
console.log(newUrl);输出：
'https://www.google.com/search?q=javascript&rlz=1C1GCEU_enUS832US832&oq=javascript&aqs=chrome..69i57j69i60l3j35i39.2739j0j7&sourceid=chrome&ie=UTF-8&foo=bar'
getQueryParam()
获取指定名称的查询参数值。
使用方法：
const urls = require('urls-tool');
const url = 'https://www.google.com/search?q=javascript&rlz=1C1GCEU_enUS832US832&oq=javascript&aqs=chrome..69i57j69i60l3j35i39.2739j0j7&sourceid=chrome&ie=UTF-8';
const value = urls.getQueryParam(url, 'q');
console.log(value);输出：
'javascript'
removeQueryParam()
从指定URL字符串或URL对象上移除指定名称的查询参数。
使用方法：
const urls = require('urls-tool');
const url = 'https://www.google.com/search?q=javascript&rlz=1C1GCEU_enUS832US832&oq=javascript&aqs=chrome..69i57j69i60l3j35i39.2739j0j7&sourceid=chrome&ie=UTF-8';
const newUrl = urls.removeQueryParam(url, 'rlz');
console.log(newUrl);输出：
'https://www.google.com/search?q=javascript&aqs=chrome..69i57j69i60l3j35i39.2739j0j7&sourceid=chrome&ie=UTF-8'
示例
以下是一个完整的示例，演示如何结合以上API来解析、修改和构建URL。
-- -------------------- ---- -------
----- ---- - ---------------------
-- -----
----- --- - ------------------------------------------------------------------------------------------------------------------------------------------------------
----- --------- - ----------------
-----------------------
-- ------
----- ------ - ------------------------------ -
---- -----
---
--------------------
-- ------
----- -------- - ----------------------------- -------
----------------------
-- -----
----- ------ - -
--------- ---------
--------- -----------------
--------- ----------
------- ------------------------------------------------------------------------------------------------------------------------
--
----- ------------- - -------------------
---------------------------
-- ------
----- ----- - --------------------------------- -----
-------------------输出：
-- -------------------- ---- -------
-
--------- ---------
----- -----------------
--------- -----------------
----- -----
--------- ----------
------- -------------------------------------------------------------------------------------------------------------------------
----- ----
-
-------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------
------------总结
Urls-tool是一个非常实用的npm包，尤其对于那些需要频繁处理URL的前端开发人员来说。本文详细介绍了urls-tool的API，并且提供了一个完整的示例，希望可以帮助大家更好地理解和使用此工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735b890c4f7277583f2a