在前端开发中，文本排版是非常重要的一环，而连字（Hyphenation）是实现文本排版的重要技术之一。如何实现连字是一个复杂而有挑战性的问题，npm 包 hypher 就是一个实现连字的优秀工具。
hypher 是什么？
hypher 是一个基于 JavaScript 的连字库，可以将单词分解为包含连接符的小块，从而实现单词的连字效果。它采用的是分解单词的语言专业术语（即“音节化”），因此支持的语言不限于英语，还包括法语、德语、俄语等各种不同语言。
如何使用 hypher？
Hypher 的 API 足够简单，只需要参照以下步骤即可开始使用：
- 安装 hypher
--- ------- ------ ------
- 引入 hypher
----- ------ - ------------------
- 加载分隔符
----- ------- - -----------------------------
- 创建 hypher 实例
----- ---------- - --- ----------------
- 进行连字操作
----- ---- - -------------- ----- ---------- - ---------------------------
这样就能够实现 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 来指定连接符的字符，例如：
--------------------------------- - -- ---------------------------------- - -- ----- ------- - ----------------------------- ----- ---------- - --- ---------------- ------------------------------------------------- -- --------------
在上述代码中，我们将左侧最小连字字符数设为 3，右侧最小连字字符数设为 2，因此在连字过程中只有大于等于 3 个字符的块和大于等于 2 个字符的块才将被连接符连接。
同时使用多种语言
如果需要在同一页面中使用多种语言并实现这些语言的连字效果，我们可以使用 hypher 的注册机制。
------ ------ ---- ---------
------ --------------- ---- --------------------
------ ------------- ---- -----------------
------ ------------- ---- -----------------
----- ------ - --- --------
-------- -
-------- ----------------
----- --------------
----- -------------
--
----------- ---------
-------------- --
-------- --
--------- -
---
----- ----- - --------------- ---------------- ------------- ---------------
-------------------- -- -
------------------------------------
---在上述代码中，我们同时引入了英语、法语、和德语的分隔符，并使用 hypher 的注册机制将它们一起注册到 hypher 实例中，然后分别对不同的单词进行联字操作。
实例代码
最后，我们来看一下 hypher 的实际应用：
--------- -----
------
------
------------------ ---------------
------- ------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------
-------
------
---
--------- -------------------------- ----------------------------------------------------
------------- -------------------------- --------------------------------------------------------
---------- -------------------------- --------------------------------------------------
----------- -------------------------- ---------------------------------------------------
----
-------
-------在上述代码中，我们引入了 Hyphyer 以及不同语言的分隔符，并使用 hyphenate 进行连字操作。您可以保存该代码并在浏览器中运行，查看实际效果。
总结
本文中我们学习了 hypher 的基本使用方法、API 和高级用法，并提供了实例代码，希望读者能够通过这篇教程了解并掌握 hypher，以便在实际前端开发中实现更好的文本排版效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64714