在前端开发中，我们经常需要动态生成字符串模板，而在 ES6 中，使用模板字符串 (template literals) 可以更加简洁地完成这项工作。但是，有时候我们需要在模板字符串中使用条件语句，以便在满足某些条件时显示不同的内容。本文将介绍如何在 ES6 中使用字符串模板中的条件语句。
基础语法
使用模板字符串创建的字符串可以包含任意表达式和普通文本。为了在模板字符串中使用条件语句，我们需要使用 ${} 包裹需要表达式的部分，并在其中使用条件语句。
下面是一个简单的例子，演示如何在模板字符串中使用条件语句：
const age = 18;
const name = 'John';
const message = `My name is ${name}. I am ${age} years old.${age >= 18 ? ' I am an adult.' : ' I am a minor.'}`;
console.log(message);在这个例子中，我们使用 ${} 包裹了需要使用条件语句的部分，即 ${age >= 18 ? ' I am an adult.' : ' I am a minor.'}。这个语句会先计算 age >= 18 是否为真，如果是真，返回 ' I am an adult.'，否则返回 ' I am a minor.'。最后，这个语句会被替换为实际的结果，从而得到完整的字符串。
使用多个表达式
当需要在字符串模板中使用多个表达式时，可以使用花括号包裹多个表达式，并将它们之间用逗号隔开。下面是一个使用多个表达式的例子：
const age = 18;
const name = 'John';
const message = `My name is ${name}. I am ${age} years old.${age >= 18 ? ', and I am an adult.' : ', and I am a minor.'} Today is ${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}.`;
console.log(message);在这个例子中，我们在模板字符串中使用了三个表达式，分别是 ${name}、${age} 和 ${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}。其中，第一个和第二个表达式都是普通的变量和属性访问，第三个表达式使用了 new Date() 创建了一个 Date 对象，并使用其 getFullYear()、getMonth() 和 getDate() 方法获取了当前日期的年、月和日。
同时，我们还在条件语句中使用了逗号分隔多个表达式，确保这些表达式会按照正确的顺序计算。
使用函数计算表达式
在模板字符串中，我们可以使用任何 JavaScript 表达式，包括函数调用。因此，我们可以使用函数计算某些表达式，以便在模板字符串中使用。
下面是一个使用函数计算表达式的例子：
-- -------------------- ---- -------
----- --- - ---
----- ---- - -------
-------- ---------------- -
-- ---- -- --- -
------ --- -------
- ---- -
------ -- -------
-
-
----- ------- - --- ---- -- -------- - -- ------ ----- ---- --- - -- ------------------- --------
---------------------在这个例子中，我们通过定义 getIdentity() 函数来计算年龄对应的身份，然后在模板字符串中使用 ${getIdentity(age)} 计算表达式。这使得代码更加清晰和易读，同时也让计算逻辑更加模块化和可复用。
深度用例
-- -------------------- ---- ------- ----- ------- - - ----- ------- ------- --------- ---- --- ------ -- ----- ------------ -- ----- ------- - --- ---- -- ---------------- - -- -------------- ----- ---- --- - -- ---------------- --- ------ - -- ---- - -- ------- - -- -- ----- ----------------- -------------- - -- ---- --------------- -- -------- - --- -- ---------------------
在这里，我们定义了一个 student 对象，并使用其中的属性来构建字符串。我们使用了 ${} 来包裹需要使用表达式的部分，并在其中使用了条件语句来判断学生的性别和是否参与了社团活动。
当学生没有参与社团活动时，我们使用了一个空字符串来代替社团活动的信息，这使得消息的输出不会出现多余的信息。
结论
在 ES6 中，使用模板字符串可以更加简洁易读地创建字符串。通过使用 ${} 包裹需要表达式的部分，并在其中使用条件语句，我们可以在字符串模板中添加更加复杂的逻辑。这使得代码更加清晰易读，并且方便了开发者的日常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675179ee8bd460d3ad8a07a4