ES6 中使用模板字符串进行 HTML 模板渲染-JavaScript中文网-JavaScript教程资源分享门户

在现代的 Web 开发中，前后端分离已经成为了主流，而前端的一个重要任务就是将后端响应的数据渲染成页面。在这个过程中，HTML 模板渲染是必不可少的一环。ES6 中新增的模板字符串，能够更加方便地进行 HTML 模板渲染，本文将详细地介绍其用法、深度学习和指导意义。

什么是模板字符串

模板字符串是 ES6 新增的一种字符串形式，其语法使用反引号 `` 来声明一个字符串，在其中使用 ${} 插入表达式，以生成动态字符串。其基本语法如下所示：

`string ${expression} string`

其中 string 代表字符串常量，expression 是需要插入的表达式，可以是变量、函数调用、运算表达式等。

模板字符串的优势

相对于传统的字符串拼接方式，使用模板字符串进行 HTML 模板渲染有如下优势：

代码更简洁。不用像传统的字符串拼接方式那样使用大量的加号和反斜杠进行字符串拼接，使得代码更加简化易读。
避免 XSS 攻击。传统的字符串拼接方式容易受到 XSS 攻击，而模板字符串使用 ${} 插入表达式，在渲染 HTML 内容时会自动转义，减少了 XSS 攻击的风险。
性能更佳。模板字符串使用一次拼接而不是多次拼接，减少了多余的字符串对象的创建和销毁，提高了性能。

模板字符串的使用

单一表达式的渲染

首先，我们来看一个简单的单一表达式的渲染示例：

const name = 'Lucy';
const html = `
  <div>
    <p>Hello, ${name}!</p>
  </div>
`;

在这个例子中，我们定义了一个变量 name，然后使用模板字符串渲染了一段 HTML 代码，其中使用 ${} 插入表达式，将变量 name 的值渲染到 HTML 页面中。渲染结果如下所示：

<div>
  <p>Hello, Lucy!</p>
</div>

多表达式的渲染

接下来，我们来看一个多表达式的渲染示例：

const firstName = 'Lucy';
const lastName = 'Wang';
const html = `
  <div>
    <p>Hello, ${firstName} ${lastName}!</p>
    <p>Now is ${new Date().toLocaleString()}.</p>
  </div>
`;

在这个示例中，我们定义了两个变量 firstName 和 lastName，然后使用模板字符串渲染了一段 HTML 代码，其中使用 ${} 插入表达式，将变量 firstName、 lastName 及当前时间渲染到 HTML 页面中。渲染结果如下所示：

<div>
  <p>Hello, Lucy Wang!</p>
  <p>Now is 2021/6/24 下午8:30:41.</p>
</div>

函数调用的渲染

除了变量，我们也可以在模板字符串中调用函数进行渲染。例如：

-- -------------------- ---- -------
-------- ------------- -
  ------ -------------------
-

----- -------- - ----------
----- ---- - -
  -----
    -------- ------------------------
  ------
--

在这个示例中，我们定义了一个函数 getCity，它会将传入的参数转换为大写字母并返回。然后我们使用模板字符串渲染了一段 HTML 代码，其中调用了函数 getCity，将变量 cityName 的值作为参数传入函数中，并最终渲染到 HTML 页面中。渲染结果如下所示：

<div>
  <p>City: BEIJING</p>
</div>

条件渲染

有时，我们需要在 HTML 模板渲染中做出一些判断来决定是否渲染某些内容。模板字符串可以通过模板字面量中内嵌的条件分支和循环语句来方便地实现条件渲染。例如：

-- -------------------- ---- -------
----- ---- - -
  ----- -------
  ---- ---
  ------- ---------
  -------- ----
--

----- -------- - -
  -----
    -------- ----------------
    ------- ---------------
    ---------- ------------------
    -------------- - ------------ -------- - ---
  ------
--

在这个示例中，我们定义了一个对象 data，它包含了一些个人信息。然后我们使用模板字符串渲染了一段 HTML 代码，并在其中使用三元运算符来判断并渲染婚姻状况提示，如果 data.married 的值为 true，则会渲染内容 <p>Married: Yes</p>，否则不渲染任何内容。渲染结果如下所示：

<div>
  <p>Name: Lucy</p>
  <p>Age: 28</p>
  <p>Gender: female</p>
  <p>Married: Yes</p>
</div>

循环渲染

除了条件渲染，我们有时也需要在 HTML 模板渲染中进行循环渲染。这可以使用模板字符串内的循环语句来实现。例如：

const list = ['apple', 'orange', 'banana', 'peach'];
const html = `
  <ul>
    ${list.map(item => `<li>${item}</li>`).join('')}
  </ul>
`;

在这个示例中，我们定义了一个数组 list，它包含了一些水果名称。然后我们使用模板字符串渲染了一段 HTML 代码，并在其中使用 Array.prototype.map() 方法遍历数组 list 所有元素，对每个元素执行一个函数，将处理后的结果保存在一个新的数组中，然后使用 Array.prototype.join() 方法将数组的所有元素连接成一个字符串，最终插入到模板字符串的 HTML 中。这样，就能够实现循环渲染，渲染结果如下所示：

<ul>
  <li>apple</li><li>orange</li><li>banana</li><li>peach</li>
</ul>

总结与展望

本文简要介绍了使用 ES6 模板字符串进行 HTML 模板渲染的基本语法和常用用法，包括单一表达式、多表达式、函数调用、条件渲染和循环渲染等。通过使用模板字符串的方式进行 HTML 模板渲染，可以使代码更加简洁易读、避免 XSS 攻击、性能更佳。同时，本文还展望了在未来的 Web 开发中，模板字符串的应用将得到进一步的拓展和完善。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64d39c1fb5eee0b525b3d52e