如何在 JavaScript 字符串中插入变量

要将变量的值放入 JavaScript 字符串中，最简单的方法通常是使用模板字面量：用反引号包住文本，并在需要插入值的位置写入 `${variableName}`。将 variableName 换成变量的名称，JavaScript 就会在这里插入它当前的值。一般的字符串拼接用模板字面量最方便；控制台占位符适合输出日志，而格式化库则适用于其功能足以抵偿额外依赖的情况。

在 JavaScript 中使用模板字面量将变量插入字符串

模板字面量使用反引号，而非单引号或双引号。JavaScript 会计算 ${ 和 } 之间的表达式，并将计算结果转换为字符串。生成的字符串可以赋给变量、从函数返回，或传给其他函数。若把 "Hello, ${name}" 放在带引号的字符串中，插值语法只会作为普通文本保留；单引号和双引号字符串不会插入变量值。

下面的示例先创建问候语，再计算总价，并把完整文本赋给 message：

const name = "Ada";
const price = 12;
const message = `Hello, ${name}. Your total is $${price + 3}.`;
console.log(message);

Hello, Ada. Your total is $15.

${price + 3} 会先计算出 15 再插入字符串；紧邻表达式前面的美元符号只是普通文本。表达式中也可以使用算术运算、属性访问或函数调用。为让句子易读，表达式应尽量简短。模板字面量可以跨行书写，其中的引号不必转义。若要把 ${ 作为普通字符写入模板字面量，可在美元符号前加反斜杠，写成 \${；若要包含反引号，则在它前面加反斜杠。表达式若产生对象，JavaScript 会使用该值的字符串转换结果，但这种结果未必适合展示对象内容；需要可读的对象数据时，应明确选择转换或格式化方式。插值只会生成普通文本，不会自动转义成适合 HTML 的安全内容。在网页中显示不可信的值时，应使用适合具体上下文的安全 DOM API。

在 JavaScript 中使用基本格式化将变量插入字符串

输出诊断信息时，可以用 console.log() 将占位符与后续参数组合起来。以下示例中，%s 用于姓名，%d 用于分数，参数按对应占位符的顺序传入：

const name = "Ada";
const score = 42;
console.log("%s scored %d points.", name, score);

占位符是否受支持以及如何转换参数，取决于所用的控制台实现。因此，这只是日志输出的便利功能，并非可移植的字符串构造 API。console.log() 会输出诊断信息，但不会返回格式化后的消息供赋值或插入 HTML 页面。若需要字符串值，请使用模板字面量或格式化库。参数应依照占位符的顺序传入；多余参数或没有匹配参数的占位符，可能会被不同控制台以不同方式显示。

在 JavaScript 中使用 sprintf() 将变量插入字符串

sprintf-js 是一个可选库，它的 sprintf() 函数会返回字符串。如果项目已安装此套件并支持 CommonJS，可以用 const { sprintf } = require("sprintf-js"); 加载函数，再通过 const message = sprintf("%s has %d items", name, count); 建立字符串。这些语句展示了 API 的用法；套件的安装方式和导入语法取决于项目环境。浏览器项目或使用模块的项目，应参照该项目链接中的设置说明。

sprintf() 会根据格式指令和传入的参数生成结果，但不会执行格式字符串中写出的 JavaScript 表达式。每个格式指令都会使用相应的参数。如果需要反复进行较复杂的格式化，而且库的功能值得增加一个依赖，可以选择它。项目文档列出了可用的格式指令和设置方式。若只是用一个变量组成简短句子，通常直接使用内置的模板字面量更简单。

结论

一般的字符串构造、插入变量值或嵌入 JavaScript 表达式，都可以使用模板字面量。输出诊断信息时，可以用 console.log() 占位符，但要留意其行为可能因控制台实现而异，而且调用不会产生可重复使用的格式化字符串。如果 sprintf-js 的格式化功能足以证明额外依赖是值得的，也可以考虑使用它。对于简单的插值，用反引号和 ${...} 将变量当前值放入 JavaScript 字符串，通常最清楚直接。