ES6 模板字符串

模板字符串是 ES6 (ECMAScript 2015) 引入的一种增强型的字符串表示方式。它们允许你更方便、更直观地创建包含变量或表达式的字符串，以及创建多行字符串。

主要特点和用法：

1. 基本语法：使用反引号（）

三种字符串的比较方法

js 复制代码

 let singleQuoteString = '这是一个单引号字符串';
 let doubleQuoteString = "这是一个双引号字符串";
 let templateString = `这是一个模板字符串`;
 console.log(templateString); // 输出: 这是一个模板字符串

2. 字符串插值（Interpolation）：嵌入表达式 ${expression}

这是模板字符串最强大的功能之一。你可以在反引号内使用 ${expression} 的语法，将任何有效的 JavaScript 表达式（变量、函数调用、算术运算等）的值直接嵌入到字符串中。

嵌入变量：

js 复制代码

let name = "Alice";
let age = 30;

// 传统方式
let messageOld = "你好，我叫 " + name + "，今年 " + age + " 岁。";
console.log(messageOld); // 输出: 你好，我叫 Alice，今年 30 岁。

// 使用模板字符串
let messageNew = `你好，我叫 ${name}，今年 ${age} 岁。`;
console.log(messageNew); // 输出: 你好，我叫 Alice，今年 30 岁。

可以看到，模板字符串的写法更简洁、更易读。

嵌入任意表达式：

js 复制代码

let a = 5;
let b = 10;

console.log(`计算结果： ${a} + ${b} = ${a + b}`); // 输出: 计算结果： 5 + 10 = 15

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(`来自函数的问候： ${greet("Bob")}`); // 输出: 来自函数的问候： Hello, Bob!

let user = { name: "Charlie", isAdmin: true };
console.log(`用户 ${user.name} ${user.isAdmin ? '是' : '不是'} 管理员。`); // 输出: 用户 Charlie 是 管理员。

3. 多行字符串（Multiline Strings）

在模板字符串中，你可以直接换行来创建多行字符串，而不需要像传统字符串那样使用 \n 或字符串拼接。字符串中的换行符会被保留。

传统方式：

js 复制代码

let multiLineOld = '这是第一行\n' +
                   '这是第二行\n' +
                   '这是第三行';
console.log(multiLineOld);
/*
输出:
这是第一行
这是第二行
这是第三行
*/

使用模板字符串：
js 复制代码
```
let multiLineNew = `这是第一行
这是第二行
这是第三行`;
console.log(multiLineNew);
/*
输出:
这是第一行
这是第二行
这是第三行
*/
    
```
注意：模板字符串中的缩进也会被计入字符串内容。如果你不希望包含开头的缩进，需要注意写法。

4. 标签模板（Tagged Templates）

这是一个更高级的特性。你可以在模板字符串前放置一个函数名（标签），这个函数会接收到模板字符串的各个部分（文本部分和表达式的值），并可以对它们进行处理后返回最终的字符串。

语法： tagFunctionstring text ${expression} string text ...;`
工作原理：
- tagFunction 会被调用。
- 第一个参数是一个字符串数组 ，包含模板字符串中被表达式分隔开的静态文本部分。
- 后续的参数是依次计算好的表达式的值。

示例：

js 复制代码

  function simpleTag(strings, ...values) {
  console.log("Strings:", strings);
  console.log("Values:", values);

  // 简单的拼接逻辑
  let result = "";
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      result += `[${values[i]}]`; // 将值用括号括起来
    }
  }
  return result;
}

let item = "苹果";
let price = 5.5;
let quantity = 3;

let taggedOutput = simpleTag`购买物品：${item}，单价：${price}元，数量：${quantity}。总价：${price * quantity}元。`;

/*
控制台输出：
Strings: [ '购买物品：', '，单价：', '元，数量：', '。总价：', '元。' ]
Values: [ '苹果', 5.5, 3, 16.5 ]
*/

console.log(taggedOutput);
// 输出: 购买物品：[苹果]，单价：[5.5]元，数量：[3]。总价：[16.5]元。

常见用途：
- HTML/SQL 转义： 防止注入攻击，对嵌入的变量进行安全处理。
- 国际化 (i18n) / 本地化 (l10n)： 根据语言环境格式化字符串。
- 样式化组件 (Styled Components)： 在 React 等库中用于创建带样式的组件。
- 自定义字符串处理逻辑。

总结:

特性	传统字符串 (' ', " ")	模板字符串 ( )
基本语法	单引号或双引号	反引号
字符串插值	需要使用 + 进行拼接	使用 ${expression} 轻松嵌入表达式
多行字符串	需要使用 \n 或 + 跨行拼接	直接换行即可，所见即所得
标签模板	不支持	支持，允许函数处理模板字符串各部分
可读性	复杂拼接时较差	通常更清晰、易读

ES6 模板字符串

1. 基本语法：使用反引号（ ）

2. 字符串插值（Interpolation）：嵌入表达式 ${expression}

3. 多行字符串（Multiline Strings）

4. 标签模板（Tagged Templates）

1. 基本语法：使用反引号（）