前言
在前端开发中，我们经常会遇到需要对数组中的值进行格式化输出的情况。如果使用传统的 for 循环或 Array.map() 等方法，即便是简单的格式化操作也会显得繁琐冗长。而 template-literal-each 就提供了一种简单易用的方式来解决这个问题。
template-literal-each 包是一个可以帮助你循环处理数组的 npm 包，它基于 ES6 模板字面量提供了一种简洁的语法来处理数组。在使用该包之前，你需要具备一定的 ES6 语法知识。
安装
你可以通过 npm 安装该包：
--- ------- ---------------------
快速上手
假设我们有一个需要处理的数组：
----- ------ - ------- -------- --------
如果我们想把它们用 <li> 标签包裹并输出到页面上，我们可以这样使用 template-literal-each：
------ ---- ---- ------------------------
----- ------ - -----
----
---------
-----------------
----------
-----
--
--------------------输出的结果如下：
---- ------------ -------------- ------------- -----
以上代码中，我们首先将模板字符串传给了 each 函数，并在模板字符串中使用 ${} 模板标记来引用 colors 数组，${value} 则表示当前循环到的数组元素的值。最后将输出结果保存在 output 变量中。
详解用法
接下来我们来详细了解一下 template-literal-each 的用法。
基本语法
template-literal-each 的基本语法如下：
---------------------------
其中，${array} 表示需要循环处理的数组。在模板字符串中，可以通过 ${value} 来引用当前循环到的数组元素的值。
使用变量名
默认情况下，template-literal-each 把当前循环到的数组元素存储在了 value 变量中。如果希望使用不同的变量名，则可以这样做：
------ ---- ---- ------------------------
----- ---- - -
-
----- --------
---- ---
--
-
----- ------
---- ---
--
--
----- ------ - -----
----
-------
--------------------- ------------ -------
--------
-----
--
--------------------输出的结果如下：
---- ------------- -- ------- ----------- -- ------- -----
使用索引
如果需要使用数组索引，可以使用 ${index}：
----- ------ - -----
----
-------
----------- - -------------------- ------------ -------
--------
-----
--使用第一个和最后一个元素
在模板字符串中，你可以使用 ${first} 和 ${last} 来判断当前循环到的元素是否是数组的第一个或最后一个元素。
----- ------ - -----
----
-------
---------- - - -------------- - --------------------- ------------ -------
--------
-----
--如果是第一个元素，则为 <li> 标签添加 class="first" 属性。
嵌套使用
在模板字符串中，你也可以嵌套使用其它模板字符串。例如，可以在循环中使用另一个循环：
----- ----- - -
-
----- --------
------ --------- ---------
--
-
----- ------
------ --------- ---------
--
--
----- ------ - -----
----
--------
----
------------- ----
----
--------------
-----------------
---------------
-----
-----
---------
-----
--输出的结果如下：
----
----
----- ----
----
--------------
--------------
-----
-----
----
--- ----
----
--------------
--------------
-----
-----
-----其它语法
在模板字符串中，你可以使用模板标记 ${} 调用函数，也可以在模板字符串中使用其它 JavaScript 语法。例如：
----- ------ - -----
----
-------
----------- -- -- - -
----------------- ---------
- - ---
--------
-----
--总结
template-literal-each 提供了一种简洁、易用的方式来处理数组。通过使用它，我们可以避免繁琐冗长的代码，让代码更加简洁易懂。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/the-template-literal-each