Javascript 模板字符串

Javascript 模板字符串是 ES6 引入的新特性之一，它使得字符串的拼接更加方便、简洁，同时也可以嵌入变量、表达式等。

基本用法

使用模板字符串需要用反引号 `` 包裹字符串，然后使用${}符号来嵌入变量或表达式。例如：

const name = "Tom";
const age = 18;

// 使用模板字符串拼接
const message = `Hi, my name is ${name}, I'm ${age} years old.`;

console.log(message); // Hi, my name is Tom, I'm 18 years old.

在上面代码中，我们使用模板字符串将变量 name 和 age 拼接到字符串中，语法非常简单。

多行字符串

在以往的 Javascript 版本中，如果需要创建多行字符串，需要手动添加换行符\n，非常麻烦。而使用模板字符串，则可以非常方便地创建多行字符串。

// 使用普通字符串需要添加换行符
const str1 = "Hello\nworld";
console.log(str1);

// 使用模板字符串就不需要换行符了
const str2 = `Hello
world`;
console.log(str2);

// str1 和 str2 的输出都是相同的

嵌套模板字符串

模板字符串可以相互嵌套，非常适合创建复杂的字符串。

const tag = 'h1';
const content = 'hello world';
const style = `
  color: red;
  font-size: 14px;
`;

const html = `
  <div>
    <${tag} style="${style}">
      ${content}
    </${tag}>
  </div>
`;

console.log(html);

在上面代码中，我们创建了一个包含样式和标签的 HTML 代码，非常简洁易懂。

空格和换行符

在模板字符串中，空格和换行符都会被保留。如果希望忽略空格和换行符，可以使用 trim() 方法去除。

const name = "Tom";
const age = 18;

const message = `\
Hi, my name is ${name},\
I'm ${age} years old.\
`;

console.log(message.trim());
// 输出： Hi, my name is Tom, I'm 18 years old.

在上面代码中，我们使用反斜杠 \ 连接字符串，然后使用 trim() 方法去除其中的空格和换行符。

结语

以上就是 Javascript 模板字符串的基本用法，简单易懂，非常适合用来拼接字符串和生成复杂的 HTML 代码。同时也提高了代码的可读性和可维护性，是一个非常实用的新特性。