在 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 的模板文字功能。如果需要與字串連線的變數很少，那麼，在這種情況下，你可以使用+ 運算子。