模板字符串

模板字符串（Template Literals）是在ES6（ECMAScript 2015）中引入的一种新的字符串表示法，它提供了构建字符串的更加强大和灵活的方式。模板字符串可以通过反引号（``）（而不是普通的单引号（’ '）或双引号（" "））来定义，并且支持字符串插值和多行字符串等新特性。

字符串插值

字符串插值允许我们在字符串中嵌入变量或表达式，然后将它们转换成字符串的一部分。这是通过使用${expression}语法来实现的，其中expression可以是任何有效的JavaScript表达式。

let name = 'Alice';
let greeting = `Hello, ${name}!`; // 使用模板字符串和插值
console.log(greeting); // 输出: Hello, Alice!

多行字符串

使用传统的字符串定义方法时，创建多行字符串通常需要在每一行的末尾使用换行符\n或者将多个字符串拼接起来。模板字符串简化了这个过程，因为它们可以在不使用任何特殊字符的情况下跨越多行。

let poem = `Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.`;

console.log(poem);
// 输出:
// Roses are red,
// Violets are blue,
// Sugar is sweet,
// And so are you.

标签模板

模板字符串还可以与标签函数结合使用，来创建标签模板。标签函数可以让你通过一个函数来解析模板字符串，这样你就可以自定义插值的处理方式。

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return `${result}${str}${values[i] ? `<b>${values[i]}</b>` : ''}`;
  }, '');
}

let name = 'Alice';
let amount = 50;
let message = highlight`Hello, ${name}! You have ${amount} new messages.`;

console.log(message); // 输出: Hello, <b>Alice</b>! You have <b>50</b> new messages.

在上述示例中，highlight就是一个标签函数，它接收模板字符串分隔的部分和插入的表达式值，然后返回一个自定义的字符串。

模板字符串是现代JavaScript开发中常用的功能之一，特别是在需要动态构建字符串时，它们提供了更清晰和更方便的语法。