迹忆客 专注技术分享

每当我们用 JavaScript 开发 Web 应用程序时，我们总是会遇到这样一种情况，即我们希望将任何类型的变量（整数、浮点数等）与字符串连接起来。这是一个常见的场景。

本文解释了我们如何在 JavaScript 中使用模板字符串功能和 + 运算符将字符串值与整数值连接起来。

JavaScript 中的模板字符串允许你在给定的字符串值中添加任何类型的变量。反引号 (`) 字符表示模板字符串。

因此，要使用此功能，我们必须将字符串包含在反引号字符中。

我们在这里不使用传统的双引号运算符 (" ")。模板字符串也称为模板文字。

模板字符串功能是在 ES6 版本的 JavaScript 中引入的。

假设我们有一个字符串和一个值为 8 的整数变量 value，如下所示。我们的目标是将变量 value 的值与字符串连接起来，然后在控制台上打印出来。

代码片段 - JavaScript：

let value = 8;
console.log("Number is the value.");

输出：

Number is the value.

为此，首先，我们必须将字符串的双引号（" "）替换为反引号字符（`）。

用反引号括起字符串后，我们可以在字符串中的任何位置连接或插入变量 value。为此，我们必须使用 ${}。

在其中，我们添加变量 ${value}，如下所示。

代码片段 - JavaScript：

let value = 8;
console.log(`Number ${value} is the value.`);

输出：

Number 8 is the value.

如你所见，值 8 打印在字符串中。每当我们想将字符串与变量连接时，我们都会使用字符串文字的概念。

同样，你可以使用此功能连接字符串中具有任何类型的许多变量。

JavaScript 中的 + 运算符还可以将字符串与整数连接起来。我们将采用与上面相同的示例，但我们将使用 + 运算符而不是模板字符串。

代码片段 - JavaScript：

let value = 8;
console.log("Number " + value + " is the value.");

输出：

Number 8 is the value.

在这里，我们必须在字符串上使用传统的双引号，并且在我们想要将整数变量 value 与字符串连接的任何位置，我们首先必须关闭双引号。然后我们在变量 value 之前和之后使用+ 运算符。

在此之后，我们可以再次在双引号的帮助下继续处理剩余的字符串，如上所示。

使用+ 运算符的唯一问题是，如果要在字符串之间连接多个变量，我们需要使用多个+ 运算符来分隔字符串，如下所示。

如果有很多变量要与字符串连接，则可能会在阅读和理解代码时产生问题。

代码片段 - JavaScript：

let value1 = 8;
let value2 = 16;
let value3 = 24;

console.log("Table of " + value1 + " has values " + value2 + " and " + value3);

输出：

Table of 8 has values 16 and 24

因此，始终建议你尽可能多地使用 ES6 的模板文字功能。如果需要与字符串连接的变量很少，那么，在这种情况下，你可以使用+ 运算符。