迹忆客 专注技术分享

本文将介绍如何在 JavaScript 中将变量插入字符串。

模板文字的概念在 JavaScript 中已经存在了一段时间。它们以前被称为模板字符串。ES6 中引入了模板文字。与必须使用繁琐的字符串连接相比，它提供了一种将变量嵌入给定句子中的简便方法。代替使用引号（双引号或单引号），我们使用带反引号（键盘上的`字符）定义的模板文字。我们将字符串放在反引号中，并将变量嵌入句子中。以下是模板文字的用法。

仅将字符串本身包含在一组反引号中就可以使其成为字符串值。它具有与在双引号"中保留字符串文本相同的功能。以下示例代码描述了用作模板文字的简单字符串。

输出：

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 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 中显示新的已解析字符串。

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 ES6 中的模板文字之前，开发社区遵循了功能丰富的 sprintf.js 库。该库有一个称为 sprintf() 的方法。sprintf.js 是 JavaScript 的开源库。它具有适用于 Node.js 和浏览器的实现。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.

如果要在字符串中包含变量值而不使用+ 和双引号来进行繁琐的字符串连接，则最好的选择是使用带有反引号的功能模板文字。如果我们仅需要出于记录目的而在输出字符串中插入值，JavaScript 的 console.log() 函数就很有用。它具有默认情况下包括的格式设置选项。sprintf.js 库具有丰富的功能，并在空间中起着主导作用，因为它在嵌入变量值时比模板文字提供了更多的功能。但这是以熟悉该库为代价的。