每当我们用 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