NPM 包 string-to-readable-url 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

在前端开发中，经常会涉及到将一些不易读懂的 URL 地址转换成易读的 URL 地址，以提高用户体验。而 string-to-readable-url 就是一款能够将不易读懂的 URL 地址转换成易读的 URL 地址的 NPM 包，而且使用简单方便。

安装和导入

使用 npm 进行安装：

npm install string-to-readable-url

或者使用 yarn 进行安装：

yarn add string-to-readable-url

然后，在需要使用的地方导入：

import stringToReadableUrl from 'string-to-readable-url';

使用方法

string-to-readable-url 只提供一个方法：stringToReadableUrl()，接收一个字符串作为参数。

下面是一个基本的示例：

import stringToReadableUrl from 'string-to-readable-url';

const url = 'https://example.com/some-really-long-url-that-is-hard-to-read';

const readableUrl = stringToReadableUrl(url);

console.log(readableUrl);

输出：

https://example.com/some-really-long-url-that-is-hard-to-read => example.com/some-really-long-url

从上面的代码中可以看出，stringToReadableUrl()方法将一个 URL 地址转换成易读的 URL 地址，并返回该易读 URL 地址。

string-to-readable-url 提供了两个可选参数：

maxLength: 可以指定最大长度，设置后如果超出会在末尾加上省略号。默认值为 undefined，即不限制长度。
separator: 可以指定分隔符，用于分隔 URL 中的不同部分。默认为 '-'。

下面是一个示例，在使用 stringToReadableUrl() 方法时指定了可选参数：

import stringToReadableUrl from 'string-to-readable-url';

const url = 'https://www.example.com/questions/123456/what-is-a-good-regex-to-match-a-url';

const readableUrl = stringToReadableUrl(url, { maxLength: 25, separator: '_' });

console.log(readableUrl);

输出：

https://www.example.com/questions/123456/what-is-a-good-regex-to-match-a-url => www_example_com_ques…

从上面的示例可以看出，由于指定了 maxLength 参数为 25，所以结果 URL 地址最大长度为 25，并在末尾加上了省略号，同时因为指定了 separator 参数为下划线 '_'，所以在分隔 URL 地址的不同部分时使用了下划线。

结论

通过本文的介绍，我们了解了 string-to-readable-url 这款 NPM 包的使用方法，它可以非常方便地将不易读懂的 URL 地址转换成易读的 URL 地址，提高用户体验。同时，通过参数的设置还可以满足各种不同的需求。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53e01