JS ES新特性 模板字符串

JS ES新特性 模板字符串是指一种更加灵活、可读性更高的字符串写法，它可以在字符串中嵌入表达式、变量、函数调用等。

模板字符串的基本语法

使用模板字符串时，我们需要使用反引号（ ）将字符串包裹起来。在反引号中，我们可以使用${}` 来引用变量、表达式等。例如：

const name = "Tom";
const age = 18;
console.log(`我的名字是 ${name}，我今年 ${age} 岁了`);

输出结果为：

我的名字是 Tom，我今年 18 岁了

模板字符串中的表达式可以是函数调用、数学运算等，例如：

const x = 10;
console.log(`x 的两倍是 ${x * 2}`);

输出结果为：

x 的两倍是 20

模板字符串的高级用法

除了基本语法外，模板字符串还有一些高级用法，可以让我们更加灵活地处理字符串。

处理多行字符串

传统的字符串写法中，如果要写多行字符串，我们需要使用换行符（\n）拼接多个字符串。而使用模板字符串，则可以直接在字符串中换行。例如：

console.log(`这是一段
多行
字符串`);

输出结果为：

这是一段
多行
字符串

处理原始字符串

在传统的字符串写法中，如果要输出一些特殊字符，例如反斜杠（\）或双引号（"），则需要使用转义字符（\）来表示，例如：

console.log("这是一个带有\"双引号\"和\\反斜杠的字符串");

而在使用模板字符串时，可以在反引号前添加前缀 String.raw 将字符串设置为原始字符串，这样就可以直接输出包括转义字符在内的原始字符串了。例如：

console.log(String.raw`这是一个带有"双引号"和\反斜杠的字符串`);

输出结果与上面相同。

示例

使用模板字符串生成 HTML 片段

我们可以使用模板字符串来生成一段 HTML 片段，例如：

const name = "Tom";
const age = 18;
const html = `
  <div class="person">
    <p>姓名：${name}</p>
    <p>年龄：${age}</p>
  </div>
`;
console.log(html);

输出结果为：

<div class="person">
  <p>姓名：Tom</p>
  <p>年龄：18</p>
</div>

使用模板字符串格式化输出日志

我们可以使用模板字符串来格式化输出日志，例如：

function log(level, message) {
  const time = new Date().toLocaleString();
  console.log(`${time} [${level}] ${message}`);
}

log("INFO", "服务器已启动，端口号为 8080");
log("ERROR", "读取配置文件失败");

输出结果类似于：

2021/10/10 上午11:04:30 [INFO] 服务器已启动，端口号为 8080
2021/10/10 上午11:05:15 [ERROR] 读取配置文件失败

以上是我对 JS ES新特性 模板字符串的完整攻略。