在前端开发中，经常需要对字符串进行处理，以便在 URL、文件命名等场景下更加方便地使用。@hitch/slugg 就是一个将任意字符串转换为 URL 友好的 slug 的 npm 包。本文将介绍该包的使用方法。
安装
首先要在项目目录下安装该包。可以使用 npm 命令进行安装：
npm install @hitch/slugg
或者，如果你使用的是 yarn，可以使用以下命令：
yarn add @hitch/slugg
安装完成后，即可在代码中使用该包。
使用方法
该包提供了一个 slug() 方法，可以将任意字符串转换为 slug。
import { slug } from '@hitch/slugg';
console.log(slug('Hello World'));
// 输出："hello-world"上述代码中，首先使用 import 引入 slug 方法，然后调用该方法并将一个字符串作为参数传入，即可获得该字符串对应的 slug。在本例中，传入的字符串为 'Hello World'，该方法返回了字符串 'hello-world'，符合 URL 的命名方式。
除了普通的字符串，该方法还可以处理汉字、特殊字符等。
console.log(slug('我是中国人'));
// 输出："wo-shi-zhong-guo-ren"
console.log(slug('#$Hello World!%$'));
// 输出："hello-world"高级用法
除了基本用法，该包还提供了一些高级用法。
自定义分隔符
可以在 slug() 方法中传入一个可选参数 separator，用于自定义分隔符。
import { slug } from '@hitch/slugg';
console.log(slug('Hello World', '_'));
// 输出："hello_world"上述代码中，通过在 slug() 方法中传入了参数 '_'，将原本的短横线替换为了下划线。
转换后缀
在某些场景下，需要自定义生成的 slug 的后缀。例如，在博客文章列表中，为了 SEO ，需要添加文章的发布时间作为后缀。可以使用 slug.with 方法来实现该功能。
import { slug } from '@hitch/slugg';
const title = 'Hello World';
const date = '2021-05-12';
console.log(slug.with(title, { suffix: date }));
// 输出："hello-world-2021-05-12"上述代码中，首先使用 slug.with(title, { suffix: date }) 方法生成 slug，并在其中传入 suffix 参数，该参数的值为文章的发布时间，这样生成的 slug 就包含了发布时间。
自定义字典
默认情况下，slug() 方法使用了一个默认的字典来映射字符，但是在一些特殊场景下，需要自定义字典。可以使用 slug.extend 方法来实现该功能。
import { slug } from '@hitch/slugg';
slug.extend({
'ù': 'u',
'è': 'e',
'ç': 'c',
});
console.log(slug('Je suis français'));
// 输出："je-suis-francais"上述代码中，使用 slug.extend() 方法扩展了映射字典，将字符串中的特殊字符映射为 ASCII 字符，然后再生成 slug。这样的生成方式可以适应更多的场景。
总结
本文介绍了 npm 包 @hitch/slugg 的使用方法，包括基本用法和高级用法，这些用法可以帮助你更加方便地处理字符串并生成 URL 友好的 slug。值得一提的是，在处理字符串时，要注意不同语言的编码问题，否则可能会导致生成的 slug 不符合预期。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bbd967216659e244109