JavaScript 字符串模板学习笔记

介绍

JavaScript 中的字符串模板是一种方便的方法来构建字符串。相较于传统的拼接字符串的方式，使用模板字符串可以更加简洁和易读。模板字符串在 ES6 中被引入，并通过反引号 (`) 包裹，其中可以插入变量、表达式或函数调用。

示例

插入变量

javascriptCopy Code
const name = 'John';
const age = 30;
const message = `My name is ${name} and I'm ${age} years old.`;

console.log(message); // My name is John and I'm 30 years old.

插入表达式

javascriptCopy Code
const a = 10;
const b = 20;
const sum = `${a} + ${b} = ${a + b}`;

console.log(sum); // 10 + 20 = 30

插入函数调用结果

javascriptCopy Code
function multiply(a, b) {
  return a * b;
}

const x = 5;
const y = 3;
const result = `${x} multiplied by ${y} is ${multiply(x, y)}`;

console.log(result); // 5 multiplied by 3 is 15

换行符

在模板字符串中，可以使用换行符 (\n) 来换行，例如：

javascriptCopy Code
const message = `Hello
World`;

console.log(message); // Hello
                      // World

带标签的模板字符串

标签是一种函数，可以在模板字符串前放置。当使用标签模板字符串时，模板字符串被解析为函数调用的参数，并使用标签函数进行处理。标签可以在输出之前修改模板字符串的值。

javascriptCopy Code
function tag(strings, ...values) {
  console.log(strings); // ["My name is ", " and I'm ", " years old."]
  console.log(values); // ["John", 30]
  
  const name = values[0];
  const age = values[1];
  
  return `Name: ${name}\nAge: ${age}`;
}

const name = 'John';
const age = 30;
const message = tag`My name is ${name} and I'm ${age} years old.`;

console.log(message); // Name: John
                      // Age: 30

结论

JavaScript 字符串模板使得字符串拼接更加方便和易读。在应用程序中使用它们可以增加可维护性和可读性。