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

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

 1.在JavaScript中使用模板字符串连接字符串和整数

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

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

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

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

假设我们有一个字符串和value一个值为的整数变量8，如下所示。我们的目标是将变量的值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打印在字符串中。每当我们想将字符串与变量连接时，我们都会使用字符串文字的概念。

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

2.+在JavaScript 中使用运算符连接字符串和整数
 

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