在前端开发中，模版字符串是非常常用的一种语法。它可以让我们在字符串中插入变量，使代码更加简洁易读。ES9 中新增的模板语法则更进一步，可以让我们在模板字符串中使用条件语句、循环语句等，使得模板字符串的功能更加强大。本文将详细介绍 ES9 中的模板语法，以及如何使用它来重构模板字符串。
模板语法
ES9 中新增的模板语法是使用反引号（``）来定义的。在反引号中，我们可以使用 ${} 来插入变量，例如：
const name = "Alice";
const age = 18;
console.log(`My name is ${name}, and I'm ${age} years old.`);
// 输出：My name is Alice, and I'm 18 years old.在 ${} 中，我们还可以执行 JavaScript 表达式，例如：
const num1 = 10;
const num2 = 20;
console.log(`The sum of ${num1} and ${num2} is ${num1 + num2}.`);
// 输出：The sum of 10 and 20 is 30.条件语句
ES9 中的模板语法还支持在模板字符串中使用条件语句。我们可以使用三目运算符来实现简单的条件语句，例如：
const gender = "male";
console.log(`I am a ${gender === "male" ? "boy" : "girl"}.`);
// 输出：I am a boy.如果需要使用复杂的条件语句，我们可以在模板字符串中使用函数来实现。例如：
-- -------------------- ---- -------
-------- ----------------- -
-- ------- --- ------- -
------ ------
- ---- -- ------- --- --------- -
------ -------
- ---- -
------ ----------
-
-
----- ------ - ----------
-------------- -- - ------------------------
-- ---- -- - --------循环语句
除了条件语句，ES9 中的模板语法还支持在模板字符串中使用循环语句。我们可以使用数组的 map 方法来实现简单的循环语句，例如：
const fruits = ["apple", "banana", "orange"];
console.log(`I like ${fruits.map(fruit => `a ${fruit}`).join(", ")}.`);
// 输出：I like a apple, a banana, a orange.如果需要使用复杂的循环语句，我们可以在模板字符串中使用函数来实现。例如：
-- -------------------- ---- -------
-------- ----------------- -
--- ------ - ---
--- ---- - - -- - - -------------- ---- -
------ -- -- --------------
-- -- - ------------- - -- -
------ -- -- --
-
-
------ -------
-
----- ------ - --------- --------- ----------
-------------- ---- ------------------------
-- ---- ---- - ------ - ------- - -------重构模板字符串
使用 ES9 中的模板语法，我们可以将一些复杂的模板字符串重构成更加易读的代码。例如，下面是一个使用模板字符串拼接 HTML 的例子：
const title = "Hello, World!";
const content = "This is a sample page.";
const html = `
<div class="page">
<h1>${title}</h1>
<p>${content}</p>
</div>
`;我们可以使用模板语法来重构这段代码，使它更加易读：
-- -------------------- ---- -------
----- ----- - ------- --------
----- ------- - ----- -- - ------ -------
----- ---- - -
---- -------------
-----------------
----------------------
------
--
-------- ------------------- -
-- -------- --- ----- -- - ------ ------- -
------ -
------- -- - ------ ---------
----- -- ------- -- ----- --- -------- -----------
--
- ---- -
------ --------------------
-
-使用函数来生成 HTML 片段，可以使代码更加易读、易维护。如果需要修改 HTML 结构或内容，我们只需要修改函数中的代码即可。
总结
ES9 中的模板语法为我们提供了更加强大的模板字符串功能，可以让我们在模板字符串中使用条件语句、循环语句等。使用模板语法，我们可以将一些复杂的模板字符串重构成更加易读的代码，使得代码更加清晰、易维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e3d2641886fbafa4019a2b