模板字符串

模板字符串是 ES6 中引入的一种新的字符串表示方式，它使用反引号 (`) 来定义字符串，具有以下特点和优势：

嵌入变量和表达式

• 模板字符串允许在字符串中直接嵌入变量和表达式，无需像传统字符串拼接那样使用大量的 + 运算符。通过 ${} 语法，可以将变量或表达式的值插入到字符串中相应的位置。

  let name = 'John';
  let age = 30;
  let str = `My name is ${
         name} and I am ${
         age} years old.`;
  console.log(str); 
  // 输出：My name is John and I am 30 years old.
  

• 表达式可以是任何有效的 JavaScript 表达式，包括函数调用、算术运算等。

  let num1 = 5;
  let num2 = 3;
  let result = `The sum of ${
         num1} and ${
         num2} is ${
         num1 + num2}.`;
  console.log(result); 
  // 输出：The sum of 5 and 3 is 8.
  

多行字符串

• 模板字符串可以轻松地表示多行字符串，无需使用转义字符或字符串拼接来换行。在模板字符串中，换行符会被保留，使得代码更加清晰易读，特别适合用于定义 HTML 模板、SQL 查询语句等多行文本内容。

  let html = `
  <div>
    <h1>Hello, World!</h1>
    <p>This is a multiline string example.</p>
  </div>
  `;
  console.log(html);
  

字符串插值中的函数调用

• 可以在 ${} 中调用函数，将函数的返回值插入到字符串中。

function getGreeting() {
   
  return 'Good morning';
}

let greeting = `${
     getGreeting()}, ${
     name}!`;
console.log(greeting); 
// 输出：Good morning, John!

标签模板

• 模板字符串还支持标签模板的功能，即可以在模板字符串前面添加一个函数名，该函数将接收模板字符串被分割后的各个部分作为参数，并可以对这些参数进行处理，然后返回最终的结果。

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

let name = 'John';
let age = 30;
let str = tagFunction`My name is ${
     name} and I am ${
     age} years old.`;
console.log(str); 
// 输出：My name is John and I am 30 years old.

在上述示例中，tagFunction 函数接收了模板字符串的静态部分 strings 和动态部分 values，并将它们组合成最终的字符串。标签模板为字符串的处理提供了更大的灵活性，可以用于实现国际化、模板引擎等功能。

原始字符串

• 在模板字符串的开头添加 String.raw 标签，可以获取原始的字符串内容，即不会对反斜杠进行转义处理。

  let path = String.raw`C:\Users\John\Documents`;
  console.log(path); 
  // 输出：C:\Users\John\Documents
  

模板字符串的这些特性使得 JavaScript 中的字符串处理更加方便、灵活和强大，提高了代码的可读性和可维护性，在各种 JavaScript 应用场景中都得到了广泛的应用。