字符串内插（String interpolation）是一种将变量和表达式嵌入到字符串中的方法，以便于构造动态的文本内容。在JavaScript中，有几种方法可以实现字符串内插，包括早期使用“+”操作符连接字符串和变量，以及ES6中引入的模板字符串。
使用“+”操作符连接字符串和变量
在早期的JavaScript版本中，常使用“+”操作符来连接字符串和变量。例如：
var name = "小明";
var age = 18;
console.log("我叫" + name + "，今年" + age + "岁。");这会输出以下内容：
我叫小明，今年18岁。
然而，这种方法的缺点在于它不够直观且容易出错。如果要插入多个变量，就需要使用大量的“+”操作符，代码也会变得难以维护。
使用模板字符串
ES6引入了模板字符串（Template literals）来解决这个问题。模板字符串允许我们将变量和表达式嵌入到字符串中，并使用反引号（`）来定义字符串。例如：
const name = "小明";
const age = 18;
console.log(`我叫${name}，今年${age}岁。`);这会输出同样的内容：
我叫小明，今年18岁。
使用模板字符串时，我们只需要将变量和表达式使用${}包裹起来即可。这种方法不仅直观且易于维护，而且还支持多行字符串和嵌套表达式。
多行字符串
在JavaScript中，通常情况下，我们需要在代码中创建多行文本。使用模板字符串可以很容易地实现多行字符串的创建。例如：
const content = ` 这是一篇文章， 它有多行文字， 但是用模板字符串非常方便。 `; console.log(content);
这会输出以下内容：
这是一篇文章， 它有多行文字， 但是用模板字符串非常方便。
嵌套表达式
如果要在模板字符串中使用复杂的表达式，可以将表达式放在${}中，并在内部使用括号来分组。例如：
const a = 10;
const b = 20;
console.log(`a + b = ${a + b}`);
console.log(`2 * (a + b) = ${2 * (a + b)}`);这会输出以下内容：
a + b = 30 2 * (a + b) = 60
此外，模板字符串还支持标签函数（Tag function），这是一个可以自定义模板字符串处理方式的函数。标签函数可以让我们自由地控制模板字符串的输出，从而实现更为灵活的字符串内插。
结论
在JavaScript中，字符串内插是一项非常有用的技能。虽然早期我们只能使用“+”操作符连接字符串和变量，但ES6引入的模板字符串使得字符串内插变得更加方便、直观和易于维护。如果您需要在JavaScript中进行字符串内插，请务必掌握这些方法。
示例代码：
-- -------------------- ---- ------- ----- ---- - ----- ----- --- - --- ------------------------------------ ----- ------- - - ------- ------- ------------- -- --------------------- ----- - - --- ----- - - --- -------------- - - - --- - ----- -------------- - -- - -- - --- - -- - ------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8687