模板字符串

1. 概述

模板字符串（Template Literals）是 ES6 引入的一种新的字符串表示方法。它允许嵌入表达式，并且可以跨越多行。模板字符串使用反引号（``）来定义，而不是传统的单引号（''）或双引号（""）。

2. 基本语法

2.1 多行字符串

在传统的 JavaScript 中，如果你想创建一个多行字符串，你需要使用换行符（\n）或连接多个字符串。使用模板字符串，你可以直接在字符串中包含换行符。

// 传统方式
let traditionalString = '第一行\n第二行';

// 模板字符串
let templateString = `第一行
第二行`;

console.log(traditionalString);
console.log(templateString);

2.2 嵌入表达式

模板字符串允许你在字符串中嵌入表达式，使用 ${expression} 语法。

let name = 'Alice';
let age = 30;

let greeting = `你好，我叫 ${name}，今年 ${age} 岁。`;

console.log(greeting); // 输出: 你好，我叫 Alice，今年 30 岁。

3. 高级用法

3.1 嵌套模板字符串

模板字符串可以嵌套使用，这在处理复杂字符串时非常有用。

let isAdmin = true;
let message = `你好，${isAdmin ? '管理员' : '用户'}。`;

console.log(message); // 输出: 你好，管理员。

3.2 标签模板

标签模板（Tagged Templates）是一种更高级的用法，允许你使用函数来处理模板字符串。标签函数会接收模板字符串的各个部分作为参数。

function highlight(strings, ...values) {
    let result = '';
    strings.forEach((string, i) => {
        result += string;
        if (values[i]) {
            result += `<strong>${values[i]}</strong>`;
        }
    });
    return result;
}

let name = 'Bob';
let age = 25;

let highlightedMessage = highlight`你好，我叫 ${name}，今年 ${age} 岁。`;

console.log(highlightedMessage); // 输出: 你好，我叫 <strong>Bob</strong>，今年 <strong>25</strong> 岁。

4. 实践练习

4.1 练习1：创建多行字符串

创建一个包含多行文本的模板字符串，并输出到控制台。

let multiLineString = `这是一个多行字符串
第二行
第三行`;

console.log(multiLineString);

4.2 练习2：嵌入表达式

创建一个模板字符串，嵌入变量和计算表达式，并输出结果。

let product = '苹果';
let price = 1.5;
let quantity = 3;

let receipt = `你购买了 ${quantity} 个 ${product}，总价为 $${price * quantity}。`;

console.log(receipt); // 输出: 你购买了 3 个 苹果，总价为 $4.5。

4.3 练习3：使用标签模板

创建一个标签函数，将模板字符串中的数字格式化为货币格式。

function formatCurrency(strings, ...values) {
    let result = '';
    strings.forEach((string, i) => {
        result += string;
        if (values[i]) {
            result += `$${values[i].toFixed(2)}`;
        }
    });
    return result;
}

let amount = 1234.567;
let formattedAmount = formatCurrency`总金额为 ${amount}。`;

console.log(formattedAmount); // 输出: 总金额为 $1234.57。

5. 总结

模板字符串是 JavaScript 中一个非常强大的工具，它不仅简化了多行字符串的创建，还允许你在字符串中嵌入表达式。通过标签模板，你还可以进一步扩展模板字符串的功能。掌握模板字符串的使用，将使你的代码更加简洁和易读。

6. 下一步

接下来，你可以学习 JavaScript 中的解构赋值（Destructuring Assignment），它与模板字符串一样，都是 ES6 引入的新特性，能够极大地提高代码的可读性和简洁性。