JavaScript 将变量插入字符串
本文将介绍如何在 JavaScript 中将变量插入字符串。
在 JavaScript 中使用模板文字将变量插入字符串
模板文字的概念在 JavaScript 中已经存在了一段时间。它们以前被称为模板字符串。ES6 中引入了模板文字。与必须使用繁琐的字符串连接相比，它提供了一种将变量嵌入给定句子中的简便方法。代替使用引号（双引号或单引号），我们使用带反引号（键盘上的`字符）定义的模板文字。我们将字符串放在反引号中，并将变量嵌入句子中。以下是模板文字的用法。
仅将字符串本身包含在一组反引号中就可以使其成为字符串值。它具有与在双引号"中保留字符串文本相同的功能。以下示例代码描述了用作模板文字的简单字符串。
console.log(`Hello World`);
输出：
Hello World
我们已经准备好正常的字符串。如果必须在此字符串中显示变量的值，则需要嵌入变量。嵌入时，我们将变量用大括号括起来，并在其前加上 $ 符号。嵌入变量值的语法是 ${variableName}。以下代码段将 eggCount 变量嵌入到普通字符串中，而整个内容都封装在反引号中。
let eggCount = 20;
console.log(`On easter we decorted ${eggCount}` easter eggs);
输出：
On easter we decorted 20 easter eggs
嵌入涉及变量的表达式
与带有模板文字的纯字符串连接不同，我们可以包含具有多个变量的表达式，类似于使用模板文字在 JavaScript 中进行编码。如果我们需要执行某些操作，例如求和，获取子字符串（包括日期）等，则可以将所有这些功能以及更多功能嵌入带有模板文字的字符串中。下面的代码集有很多用例。
let a = 5;
b = 10;
console.log(`Sum of ${a} and ${b} is ${a + b}`);
输出：
Sum of 5 and 10 is 15
另一个涉及日期的示例如下。在这里，我们不使用任何变量，但是模板文字中包含的表达式本身可以工作。它是带有 javascript 的字符串，继续使用双引号或反引号，就像我们连接句子时一样：
console.log(`The date today is ${new Date().getDate()}-${
new Date().getMonth() + 1}-${new Date().getFullYear()}`);
输出：
The date today is 7-4-2021
备注
- 模板文字提供了将变量嵌入句子中的最简单方法之一。
- 它还支持直接在字符串中包含表达式，并让编译器在运行时解析计算。
- 现在，我们可以轻松地在字符串中包含单引号和双引号，而无需使用转义符。
- 模板文字使编码简单、简洁、整齐、可读。
- 模板文字的值可以分配给新变量。可以将其视为包含变量值的新字符串。
在 JavaScript 中使用基本格式将变量插入字符串
将变量值整齐地插入字符串的另一种方法是使用 JavaScript 支持的基本格式。使用 JavaScript console.log()，我们可以避免串联并在目标字符串中添加占位符。如下所示，将要分配的值作为参数传递。
let a = 5;
b = 10;
console.log('Sum of %d and %d is %d.', a, b, (a + b));
输出：
Sum of 5 and 10 is 15.
变量到值的这种解析仅与 console.log() 一起使用。因此，我们不能将其用于分配给其他变量，也不能将其用于在 HTML UI 中显示新的已解析字符串。
备注
- 我们可以在使用
console.log()函数进行记录时使用这个方法。因此，该方法不适用于将值分配给变量。因此，它可能不值得在日志以外的场景使用。 - 使用基本格式时，字符串中使用的占位符应与作为参数传递的数据类型相对应。例如，对于显示数值，句子中的占位符应该是
%d，对于字符串数据类型，应该是%s。
let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));
输出：
Sum of 5 and 10 is 15.
如果我们忘记考虑传递的参数类型，则可能是类型不匹配。JavaScript 会尝试对变量进行类型转换，并将结果值添加到字符串中。下面的代码解释了这种现象。
let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', op1, op2, (op1 + op2), operation);
输出：
5 of 10 and 15 is NaN.
op1 是 Number 数据类型，我们正在使用%s 将其注入到最终字符串中。%s 会自动将数字类型转换为字符串数据类型。这种转换进行得很顺利。但是对于 operation 变量，该值将分配给该序列中紧随其后的占位符。该占位符为%d。因此，此处将字符串数据类型转换为数字。转换不会发生。因此，返回的结果是 NaN，我们将其视为输出的结尾字。
我们可以在参数中使用表达式，就像在 (op1 + op2) 中看到的那样。JavaScript 理解并相应地将其解析为总和。
在这种情况下，如果不使用转义字符，则不能在最终字符串中使用双引号。但是，如果将整个结构封装在双引号中，则可以使用单引号。请看以下代码。
let op1 = 5, op2 = 10, operation = 'Sum';
console.log('\'%s\' of %d and %d is %d.', operation, op1, op2, (op1 + op2));
输出：
'Sum' of 5 and 10 is 15.
在 JavaScript 中使用 sprintf() 将变量插入字符串
在 JavaScript ES6 中的模板文字之前，开发社区遵循了功能丰富的 sprintf.js 库。该库有一个称为 sprintf() 的方法。sprintf.js 是 JavaScript 的开源库。它具有适用于 Node.js 和浏览器的实现。有关设置和配置，你可以访问其 git-hub 页面。sprintf() 用于在字符串中包含变量，而不使用字符串串联。用法如下。
let sprintf = require('sprintf-js').sprintf;
let op1 = 5, op2 = 10, operation = 'Sum';
sprintf('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));
输出：
Sum of 5 and 10 is 15.
它具有以下各种有用的特殊功能。
sprintf()函数允许以不同顺序指定变量。- 像模板文字的功能一样，
sprintf()解析封装在字符串中的表达式。 - 它支持多种格式。除了标准的字符串和数字之外，
sprintf-js库还支持布尔值，二进制格式等，用于将变量值输出到字符串。 - 此外，你可以使用库提供的
vsprintf()方法将参数指定为数组。 - 它还允许直接在第二个参数中传递对象，并自动解析变量。
该库提供了更多功能。可以在其 GitHub 链接中指定的 Read.me 文件中找到更多详细信息。
结论
如果要在字符串中包含变量值而不使用+ 和双引号来进行繁琐的字符串连接，则最好的选择是使用带有反引号的功能模板文字。如果我们仅需要出于记录目的而在输出字符串中插入值，JavaScript 的 console.log() 函数就很有用。它具有默认情况下包括的格式设置选项。sprintf.js 库具有丰富的功能，并在空间中起着主导作用，因为它在嵌入变量值时比模板文字提供了更多的功能。但这是以熟悉该库为代价的。