模板字符串中怎样使用字符串模板字面量？

在模板字符串中使用字符串模板字面量可以通过以下几种常见的方式：

基本的变量插值

这是最常见的用法，通过 ${} 语法将变量的值插入到字符串中。

const name = 'Alice';
const age = 25;
const message = `My name is ${
     name} and I am ${
     age} years old.`;
console.log(message); 
// 输出：My name is Alice and I am 25 years old.

表达式求值

在 ${} 中可以放入任意有效的 JavaScript 表达式，表达式的结果会被转换为字符串并插入到相应位置。

const num1 = 10;
const num2 = 5;
const result = `The result of ${
     num1} + ${
     num2} is ${
     num1 + num2}.`;
console.log(result); 
// 输出：The result of 10 + 5 is 15.

函数调用

可以在 ${} 中调用函数，函数的返回值会作为字符串的一部分插入。

function getFullName(firstName, lastName) {
   
  return `${
     firstName} ${
     lastName}`;
}

const firstName = 'Bob';
const lastName = 'Smith';
const fullName = `My full name is ${
     getFullName(firstName, lastName)}.`;
console.log(fullName); 
// 输出：My full name is Bob Smith.

嵌套模板字符串

模板字符串可以嵌套使用，以构建更复杂的字符串结构。

const outerVariable = 'outer';
const innerVariable = 'inner';
const nestedString = `Outer: ${
     outerVariable}, Inner: ${`This is ${
   innerVariable}`}`;
console.log(nestedString); 
// 输出：Outer: outer, Inner: This is inner

模板字符串中的 HTML 模板

在构建 HTML 模板时，模板字符串非常有用，可以使代码更清晰易读，减少字符串拼接的复杂性。

const items = ['apple', 'banana', 'cherry'];
const html = `
  <ul>
    ${items.map(item => `<li>${
   item}</li>`).join('')}
  </ul>
`;
console.log(html);
// 输出：
// <ul>
//   <li>apple</li>
//   <li>banana</li>
//   <li>cherry</li>
// </ul>

标签模板字面量

标签模板字面量是一种更高级的用法，通过在模板字符串前添加一个函数名作为标签，该函数将接收模板字符串被解析后的各个部分作为参数，并可以对这些参数进行自定义处理，然后返回最终的字符串结果。

function myTag(strings,...values) {
   
  let result = '';
  for (let i = 0; i < strings.length; i++) {
   
    result += strings[i];
    if (i < values.length) {
   
      result += values[i];
    }
  }
  return result.toUpperCase();
}

const name = 'Eve';
const age = 32;
const taggedString = myTag`My name is ${
     name} and I am ${
     age} years old.`;
console.log(taggedString); 
// 输出：MY NAME is EVE and I am 32 YEARS OLD.

通过以上这些方式，可以充分发挥模板字符串和字符串模板字面量的强大功能，更灵活、高效地处理字符串操作，提高代码的可读性和可维护性。