简介
ES6 Templates是一个JavaScript模板引擎，它允许您将数据和模板组合在一起以生成HTML字符串。 它支持常规的文本插值，并提供了一些高级功能，例如条件语句，循环和分节。
这篇文章将向您展示如何使用npm包es6-templates来创建动态HTML。 我们将使用简单的例子来演示如何使用该库。
安装
要安装es6-templates，请使用npm：
--- ------- ------------- ------
基础用法
ES6 Templates基于ES6中的模板字符串语法。 在JavaScript中，模板字符串是由反引号 ` 包围的字符串，其中可以使用占位符 ${expression} 来嵌入表达式的值。
以下是一个简单的例子：
----- ---- - -------- ----- ------- - ------- ---------- --------------------- -- --- ------- -------
在ES6 Templates中，您可以使用相同的语法来创建模板。 例如，下面的代码创建了一个简单的模板，它将渲染出 "Hello, World!"：
------ - ------- - ---- ---------------- ----- -------- - --------------- ----------- ----- ------ - ---------- ----- ------- --- -------------------- -- --- ------- -------
在上述代码中，我们首先导入compile函数，它是从es6-templates模块中导出的。 然后，我们将模板字符串传递给compile函数，以创建模板。
模板可以通过调用返回的函数来呈现。 我们将对象 { name: 'World' } 作为参数传递给此函数，以将名称“World”注入模板中的${name}占位符中。
条件语句
ES6 Templates支持条件语句，这使得我们能够基于某些条件动态地生成HTML。 下面是一个带有条件语句的示例，它根据用户的年龄显示不同的消息：
------ - ------- - ---- ----------------
----- -------- - ---------
------------ ------------------
---------- -- -- - ------- --- -- ----------- - ------- --- - ------------
---
----- ------ - ----------
----- -
----- --------
---- --
-
---
-------------------- -- --- ------------- ----------------- --- -- -----------在上述代码中，我们使用了三元运算符来根据user.age的值选择要呈现的消息。 您可以使用任何JavaScript表达式来生成条件语句中的内容。
循环
ES6 Templates还支持循环，这使得我们能够在生成HTML时迭代数组或对象。 下面是一个具有循环的示例，它将生成一个带有列表的HTML：
------ - ------- - ---- ----------------
----- -------- - ---------
----
---------------- -- ----------------- ------------------------------
-----
---
----- ------ - ----------
------ -
- ----- -------- ---- -- --
- ----- ------ ---- -- --
-
---
-------------------- -- --- -------------- ---------------- ---------------在上述代码中，我们使用了数组的map方法来生成一个包含用户姓名和年龄的字符串数组。 然后，我们使用join方法将这些字符串连接成单个字符串，并将其嵌入到模板中。
结论
本文介绍了如何使用npm包es6-templates来创建动态HTML。 我们涵盖了基础用法，条件语句和循
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/43316