在前端开发中，我们经常需要对数据进行排列与展示，而其中涉及到列表的展示，humanize-list 包就是帮助我们更加直观地展示列表数据的。本文将介绍 humanize-list 包的使用教程。
humanize-list 是什么？
humanize-list 是一个将数组元素转换为人类可读形式的 npm 包。主要用于将数组元素以“and”、“or” 连接方式进行拼接。
humanize-list 的安装
humanize-list 可以使用 npm 安装，使用如下命令：
npm install humanize-list
humanize-list 的使用
humanize-list 使用非常简单，只需在 JavaScript 引入 humanize-list，然后调用 humanizeList 方法即可。
-- -------------------- ---- ------- ----- ------------ - ------------------------- ----- ----- - --------- --------- ---------- ----- ----- - --------- --------- --------- --------- ----- --------- - -------------------- -- --- ------- ------- --- ------- ----- -------- - ------------------- - ------------ ---- --- -- --- ------- ------- ------- -- ------ ----------------------- ----------------------
以上代码结果分别为：
apple, banana, and orange apple, banana, orange, or peach
humanize-list 使用详解
humanize-list 主要有两个参数：数组和选项。
数组
数组参数为必须，是我们需要进行人化的数据。
选项
选项参数可选，用于指定连接符类型。默认情况下为“and”。humanize-list 支持以下连接符类型：
and（默认）：使用 “, and” 连接符or：使用 “, or” 连接符serialComma：使用 “, ” 和 Oxford 序列连接符“，and”
例如：
const list = ['apple', 'banana', 'orange', 'peach'];
const humanizedAndedList = humanizeList(list); // 等价于 "apple, banana, orange, and peach"
const humanizedoredList = humanizeList(list, { conjunction: 'or' }); // 等价于 "apple, banana, orange, or peach"
const humanizedSerialCommaList = humanizeList(list, { serialComma: true }); // 等价于 "apple, banana, orange, and peach"
console.log(humanizedAndedList);
console.log(humanizedoredList);
console.log(humanizedSerialCommaList);以上代码结果分别为：
apple, banana, orange, and peach apple, banana, orange, or peach apple, banana, orange, and peach
humanize-list 的应用场景
humanize-list 绝大部分应用场景都是与字符串连接符有关的。例如：
配合提示框使用
提示框可以展示数组，但是展示为逗号拼接方式可能会不如人类可读，使用 humanize-list 更能凸显人力可读性。
const list = ['apple', 'banana', 'orange'];
alert(`Fruits: ${humanizeList(list)}`); // 等价于 "Fruits: apple, banana, and orange"更好的展示复数
如果列表中只有一个元素，展示为单数，如果有两个以上的元素，则展示为复数。例如：
-- -------------------- ---- ------- ----- ----- - ---------- ----- ----- - --------- ---------- ----- ----- - --------- --------- ---------- ----- -------------- - -------------------- -- --- ------- ----- -------------- - -------------------- -- --- ------- --- -------- ----- -------------- - -------------------- -- --- -------- -------- --- -------- ---------------------------- ---------------------------- ----------------------------
与 React 结合使用
react 中可以使用数组进行 jsx 展示，展示起来可以通过 humanize-list 让界面看起来更加直观。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- ----------------
----- -------- - -- ---- -- -- -
------ ----------------
--
----- ---- - -- ----- -- -- -
----- -------------- - --------------------
------ -
-----
---------------
----
----------------- ------ -- -
--------- ----------- ----------- --
---
-----
-----------------------
------
--
--
------ ------- -----总结
humanize-list 使我们更加容易将数组元素转换为人类可读形式，使展示数据更加直观，让 React 展示的 jsx 更加添加可读性，降低开发难度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69070