在前端开发中，文本排版是非常重要的一环，而连字（Hyphenation）是实现文本排版的重要技术之一。如何实现连字是一个复杂而有挑战性的问题，npm 包 hypher 就是一个实现连字的优秀工具。
hypher 是什么？
hypher 是一个基于 JavaScript 的连字库，可以将单词分解为包含连接符的小块，从而实现单词的连字效果。它采用的是分解单词的语言专业术语（即“音节化”），因此支持的语言不限于英语，还包括法语、德语、俄语等各种不同语言。
如何使用 hypher？
Hypher 的 API 足够简单，只需要参照以下步骤即可开始使用：
- 安装 hypher
npm install --save hypher
- 引入 hypher
const Hypher = require('hypher');
- 加载分隔符
const pattern = require('hyphenation.en-us');
- 创建 hypher 实例
const hyphenator = new Hypher(pattern);
- 进行连字操作
const word = 'hyphenation'; const hyphenated = hyphenator.hyphenate(word);
这样就能够实现 hyphenation 这个单词的连字效果。
hypher API
以上是 hypher 的基本使用方法，下面介绍 hypher 的 API：
.hyphenate(word): 将指定单词分解为各个音节，并在需要时添加连接符。.hyphenateText(text): 将文本中的所有单词都分解后添加连接符，并返回连字后的文本。.getPoints(word): 返回指定单词所对应的音节数量。.getWord(length, pointCount): 返回指定字母数和音节数的单词。.getPrefix(word, options): 返回单词的前缀。.getSuffix(word, options): 返回单词的后缀。
hypher 的高级用法
除了基本的使用方法外，hypher 还支持一些高级用法：
指定字符作为连接符
可以通过设置 Hypher.languages['en-us'].leftmin 和 Hypher.languages['en-us'].rightmin 来指定连接符的字符，例如：
Hypher.languages['en-us'].leftmin = 3; Hypher.languages['en-us'].rightmin = 2; const pattern = require('hyphenation.en-us'); const hyphenator = new Hypher(pattern); console.log(hyphenator.hyphenate('hyphenation')); // 'hy-phenation'
在上述代码中，我们将左侧最小连字字符数设为 3，右侧最小连字字符数设为 2，因此在连字过程中只有大于等于 3 个字符的块和大于等于 2 个字符的块才将被连接符连接。
同时使用多种语言
如果需要在同一页面中使用多种语言并实现这些语言的连字效果，我们可以使用 hypher 的注册机制。
-- -------------------- ---- ------- ------ ------ ---- --------- ------ --------------- ---- -------------------- ------ ------------- ---- ----------------- ------ ------------- ---- ----------------- ----- ------ - --- -------- -------- - -------- ---------------- ----- -------------- ----- ------------- -- ----------- --------- -------------- -- -------- -- --------- - --- ----- ----- - --------------- ---------------- ------------- --------------- -------------------- -- - ------------------------------------ ---展开代码
在上述代码中，我们同时引入了英语、法语、和德语的分隔符，并使用 hypher 的注册机制将它们一起注册到 hypher 实例中，然后分别对不同的单词进行联字操作。
实例代码
最后，我们来看一下 hypher 的实际应用：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------ --------------- ------- ------------------------------------------------------------------------ ------- ---------------------------------------------------------------------------------------------- ------- ---------------------------------------------------------------------------------------- ------- --------------------------------------------------------------------------------------------- ------- ------ --- --------- -------------------------- ---------------------------------------------------- ------------- -------------------------- -------------------------------------------------------- ---------- -------------------------- -------------------------------------------------- ----------- -------------------------- --------------------------------------------------- ---- ------- -------展开代码
在上述代码中，我们引入了 Hyphyer 以及不同语言的分隔符，并使用 hyphenate 进行连字操作。您可以保存该代码并在浏览器中运行，查看实际效果。
总结
本文中我们学习了 hypher 的基本使用方法、API 和高级用法，并提供了实例代码，希望读者能够通过这篇教程了解并掌握 hypher，以便在实际前端开发中实现更好的文本排版效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64714
