在 JavaScript 中连接字符串和整数

Sahil Bhosale 2023年1月30日 2022年5月31日
  1. 在 JavaScript 中使用模板字符串连接字符串和整数
  2. 在 JavaScript 中使用 + 运算符连接字符串和整数
在 JavaScript 中连接字符串和整数

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

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

在 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 中的 + 运算符还可以将字符串与整数连接起来。我们将采用与上面相同的示例,但我们将使用 + 运算符而不是模板字符串。

代码片段 - 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 的模板文字功能。如果需要与字符串连接的变量很少,那么,在这种情况下,你可以使用+ 运算符。

Sahil Bhosale avatar Sahil Bhosale avatar

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

LinkedIn

相关文章 - JavaScript String