npm 包 @tongdun/utils-url 使用教程

在前端开发中，URL 的操作和处理是非常关键的一部分。@tongdun/utils-url 是一个专为 URL 处理而设计的 npm 包，它提供了一系列的工具函数，方便开发者对 URL 进行操作和处理。本文将介绍如何使用 @tongdun/utils-url，详细讲解各个工具函数的使用方法，并且通过实例来帮助读者更好地理解。

安装和引入

@tongdun/utils-url 是一个 npm 包，可以通过 npm 命令进行安装：

npm install @tongdun/utils-url

在代码中引入 @tongdun/utils-url：

import * as urlUtils from "@tongdun/utils-url";

工具函数详解

urlUtils.getQueryParam(url: string, queryParam: string): string | undefined

获取 URL 中指定参数的值。

参数：

• url：完整的 URL。
• queryParam：参数名。

返回值：参数值，如果参数不存在则返回 undefined。

示例：

const url = "http://www.example.com/?name=John&age=20";
const name = urlUtils.getQueryParam(url, "name"); // "John"
const gender = urlUtils.getQueryParam(url, "gender"); // undefined

urlUtils.setQueryParam(url: string, queryParam: string, value: string): string

设置 URL 的参数值。

参数：

• url：完整的 URL。
• queryParam：参数名。
• value：参数值。

返回值：带有更新后参数的 URL。

示例：

const url = "http://www.example.com/?name=John&age=20";
const newUrl = urlUtils.setQueryParam(url, "age", "30"); // "http://www.example.com/?name=John&age=30"
const newUrl2 = urlUtils.setQueryParam(url, "gender", "male"); // "http://www.example.com/?name=John&age=20&gender=male"

urlUtils.removeFromQueryParam(url: string, queryParam: string): string

从 URL 中删除指定的参数。

参数：

• url：完整的 URL。
• queryParam：参数名。

返回值：带有删除指定参数后的 URL。

示例：

const url = "http://www.example.com/?name=John&age=20&gender=male";
const newUrl = urlUtils.removeFromQueryParam(url, "age"); // "http://www.example.com/?name=John&gender=male"

urlUtils.isSameDomain(url1: string, url2: string): boolean

判断两个 URL 是否属于同一个域名。

参数：

• url1：完整的 URL。
• url2：完整的 URL。

返回值：如果两个 URL 属于同一个域名，则返回 true，否则返回 false。

示例：

const url1 = "http://www.example.com/path/to/file";
const url2 = "http://cdn.example.com/assets/css/style.css";
const url3 = "http://www.example.com/api/user";
const isSameDomain1 = urlUtils.isSameDomain(url1, url2); // false
const isSameDomain2 = urlUtils.isSameDomain(url1, url3); // true

urlUtils.isHttps(url: string): boolean

判断 URL 是否为 HTTPS。

参数：

• url：完整的 URL。

返回值：如果 URL 是 HTTPS，则返回 true，否则返回 false。

示例：

const url1 = "http://www.example.com/path/to/file";
const url2 = "https://www.example.com/path/to/file";
const isHttps1 = urlUtils.isHttps(url1); // false
const isHttps2 = urlUtils.isHttps(url2); // true

urlUtils.getBaseUrl(url: string): string

获取 URL 的基础路径。

参数：

• url：完整的 URL。

返回值：URL 的基础路径。

示例：

const url1 = "http://www.example.com/path/to/file";
const url2 = "https://www.example.com/api/user?id=123";
const baseUrl1 = urlUtils.getBaseUrl(url1); // "http://www.example.com"
const baseUrl2 = urlUtils.getBaseUrl(url2); // "https://www.example.com"

总结

通过本文的介绍，我们了解了 @tongdun/utils-url 这个 npm 包的使用方法，包括引入、工具函数的详细介绍以及例子演示。这些工具函数可以方便地对 URL 进行操作，提高开发效率。我们希望读者能够在实践中掌握它们，并且能够逐渐深入了解更多关于 URL 处理的知识，进一步提升自己在前端开发中的能力。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f7d9381d61a3540f2b