带有变量的 JS 多行字符串

在 Javascript 中，我们可以使用多行字符串来表示多行文本，而字符串中还可以加入变量，以实现更加灵活、动态的文本输出。

普通多行字符串

在 ES6 中，我们可以使用反引号```来定义多行字符串。例如：

const str = `
  The quick brown fox
  jumps over
  the lazy dog
`;

console.log(str);

输出结果为：

The quick brown fox
jumps over
the lazy dog

带有变量的多行字符串

如果我们要在字符串中加入变量，只需要将变量使用${}包裹即可。例如：

const name = 'John Doe';
const age = 30;

const greeting = `
  Hello, my name is ${name} and I am ${age} years old.
`;

console.log(greeting);

输出结果为：

Hello, my name is John Doe and I am 30 years old.

在函数中使用带有变量的多行字符串

如果我们将带有变量的多行字符串定义在函数中，可以使用箭头函数的写法来实现：

const greeting = (name, age) => `
  Hello, my name is ${name} and I am ${age} years old.
`;

console.log(greeting('John Doe', 30));

输出结果为：

Hello, my name is John Doe and I am 30 years old.

注意事项

需要注意的是，在使用带有变量的多行字符串时，反斜杠\和双引号"需要进行转义。例如：

const str = `
  "Hello, world!" she said.
`;

console.log(str);

输出结果为：

"Hello, world!" she said.

综上所述，带有变量的多行字符串是 Javascript 中非常方便的一个功能，可以帮助我们更加灵活地输出动态的文本。