在前端开发中，我们经常需要处理 URL 地址，如正确判断 URL 是否合法、规范化 URL 等。不过由于 URL 的复杂性，这些操作非常容易出错。而 npm 中有一个名为 conservative-normalize-url 的包，可以帮助我们更方便地处理 URL。
conservative-normalize-url 是什么
conservative-normalize-url 是一个简单而严格的 URL 规范化工具，可以对 URL 进行以下操作：
- 移除末尾的斜杠。
- 移除无效的查询字符串。
- 保留 URL 协议、主机名、端口、路径和查询字符串，其他部分将被规范化。
下面是一个使用 conservative-normalize-url 的例子：
const { normalizeUrl } = require('conservative-normalize-url');
const inputUrl = 'https://www.example.com/path/?key=value&anotherKey=anotherValue#fragment';
const outputUrl = normalizeUrl(inputUrl);
console.log(outputUrl); // https://www.example.com/path?key=value&anotherKey=anotherValue可以看到，原来末尾的斜杠被移除了，无效的查询字符串也被删除了，并且 URL 变成了统一的格式。
安装
使用 conservative-normalize-url 前，需要先安装它。你可以通过 npm 或 yarn 安装，看下面的代码示例：
# 使用 npm 安装 npm install conservative-normalize-url # 使用 yarn 安装 yarn add conservative-normalize-url
安装后，将其引入到项目中即可使用。
const { normalizeUrl } = require('conservative-normalize-url');normalizeUrl 方法的使用
conservative-normalize-url 中最常用的方法就是 normalizeUrl，它可以接收一个 URL 字符串作为参数，并返回规范化后的 URL。
具体用法如下：
normalizeUrl(url: string, options?: Options): string
其中 url 表示待规范化的 URL，而 options 则是一个可选的配置对象，包含默认的规范化选项。默认配置如下：
{
removeTrailingSlash: true,
removeDuplicateSlashes: true,
sortQueryParameters: true,
removeEmptyQueryParameters: true,
removeHash: true,
removeWWW: true,
}接下来将逐一介绍这些配置项。
removeTrailingSlash
removeTrailingSlash 表示自动移除 URL 末尾的斜杠。默认是 true，表示移除末尾的斜杠，如果设置为 false，则不移除。
const { normalizeUrl } = require('conservative-normalize-url');
const inputUrl = 'https://www.example.com/path/';
const outputUrl = normalizeUrl(inputUrl, { removeTrailingSlash: false });
console.log(outputUrl); // https://www.example.com/path/removeDuplicateSlashes
removeDuplicateSlashes 表示移除 URL 中重复的斜杠。默认是 true，表示移除重复的斜杠，如果设置为 false，则不移除。
const { normalizeUrl } = require('conservative-normalize-url');
const inputUrl = 'https://www.example.com//path';
const outputUrl = normalizeUrl(inputUrl, { removeDuplicateSlashes: false });
console.log(outputUrl); // https://www.example.com//pathsortQueryParameters
sortQueryParameters 表示对查询字符串中的参数按字母顺序排序。默认是 true，表示按字母顺序排序，如果设置为 false，则不排序。
const { normalizeUrl } = require('conservative-normalize-url');
const inputUrl = 'https://www.example.com/path?key=value&b=b&c=c&a=a';
const outputUrl = normalizeUrl(inputUrl, { sortQueryParameters: false });
console.log(outputUrl); // https://www.example.com/path?key=value&b=b&c=c&a=aremoveEmptyQueryParameters
removeEmptyQueryParameters 表示移除查询字符串中的空参数。默认是 true，表示移除空参数，如果设置为 false，则不进行处理。
const { normalizeUrl } = require('conservative-normalize-url');
const inputUrl = 'https://www.example.com/path?key=value&test=';
const outputUrl = normalizeUrl(inputUrl, { removeEmptyQueryParameters: false });
console.log(outputUrl); // https://www.example.com/path?key=value&test=removeHash
removeHash 表示移除 URL 中的锚点。默认是 true，表示移除锚点，如果设置为 false，则不进行处理。
const { normalizeUrl } = require('conservative-normalize-url');
const inputUrl = 'https://www.example.com/path#test';
const outputUrl = normalizeUrl(inputUrl, { removeHash: false });
console.log(outputUrl); // https://www.example.com/path#testremoveWWW
removeWWW 表示移除 URL 中的 www。默认是 true，表示移除 www，如果设置为 false，则不进行处理。
const { normalizeUrl } = require('conservative-normalize-url');
const inputUrl = 'https://www.example.com/path?key=value';
const outputUrl = normalizeUrl(inputUrl, { removeWWW: false });
console.log(outputUrl); // https://www.example.com/path?key=value总结
在前端开发中，由于 URL 的复杂性，我们经常需要处理 URL 相关的问题。conservative-normalize-url 是一个简单严格的 URL 规范化工具，支持一系列的规范化操作，可大大减少 URL 处理的错误率。在实际开发中，如果你需要对 URL 进行规范化操作，可以考虑使用 it。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672eb0520b171f02e1ebb