有时候我们会遇到要处理多个字符串+常量/变量的情况比如需要输出“My name is” 如果用字符串拼接的写法,那么写法就如下

const name = "Kayn";
console.log("My name is" + name);

这样的缺点在于

  1. 多变量或表达式时容易乱:
"Hello " + firstName + " " + lastName + ", you are " + age + " years old.";
  1. 多行字符串需要加 \n:
"Line1\nLine2\nLine3";

于是就有了模板字符串(Template Literal),它是一种字符串字面量的新形式:

  • 用 反引号 ` 包裹。
  • 支持 插入变量或表达式,通过 ${} 语法。
  • 支持 多行字符串,不需要使用 \n。 它的写法为
const name = "Kayn";
console.log(`My name is ${name}`);

这样写的好处在于

  1. 可读性强 直接写 ${变量},看起来就像在自然语言中嵌入变量。
`Hello ${firstName} ${lastName}, you are ${age} years old.`;
  1. 多行字符串方便 直接回车换行,不需要 \n。
`Line1
Line2
Line3`;
  1. 可以嵌入任意表达式
`Next year, you'll be ${age + 1} years old.`;