在 JavaScript 中連線字串和整數

Sahil Bhosale 2023年10月12日
  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
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