JavaScript 將變數插入字串
本文將介紹如何在 JavaScript 中將變數插入字串。
在 JavaScript 中使用模板文字將變數插入字串
模板文字的概念在 JavaScript 中已經存在了一段時間。它們以前被稱為模板字串。ES6 中引入了模板文字。與必須使用繁瑣的字串連線相比，它提供了一種將變數嵌入給定句子中的簡便方法。代替使用引號（雙引號或單引號），我們使用帶反引號（鍵盤上的`字元）定義的模板文字。我們將字串放在反引號中，並將變數嵌入句子中。以下是模板文字的用法。
僅將字串本身包含在一組反引號中就可以使其成為字串值。它具有與在雙引號"中保留字串文字相同的功能。以下示例程式碼描述了用作模板文字的簡單字串。
console.log(`Hello World`);
輸出：
Hello World
我們已經準備好正常的字串。如果必須在此字串中顯示變數的值，則需要嵌入變數。嵌入時，我們將變數用大括號括起來，並在其前加上 $ 符號。嵌入變數值的語法是 ${variableName}。以下程式碼段將 eggCount 變數嵌入到普通字串中，而整個內容都封裝在反引號中。
let eggCount = 20;
console.log(`On easter we decorted ${eggCount}` easter eggs);
輸出：
On easter we decorted 20 easter eggs
嵌入涉及變數的表示式
與帶有模板文字的純字串連線不同，我們可以包含具有多個變數的表示式，類似於使用模板文字在 JavaScript 中進行編碼。如果我們需要執行某些操作，例如求和，獲取子字串（包括日期）等，則可以將所有這些功能以及更多功能嵌入帶有模板文字的字串中。下面的程式碼集有很多用例。
let a = 5;
b = 10;
console.log(`Sum of ${a} and ${b} is ${a + b}`);
輸出：
Sum of 5 and 10 is 15
另一個涉及日期的示例如下。在這裡，我們不使用任何變數，但是模板文字中包含的表示式本身可以工作。它是帶有 javascript 的字串，繼續使用雙引號或反引號，就像我們連線句子時一樣：
console.log(`The date today is ${new Date().getDate()}-${
new Date().getMonth() + 1}-${new Date().getFullYear()}`);
輸出：
The date today is 7-4-2021
備註
- 模板文字提供了將變數嵌入句子中的最簡單方法之一。
- 它還支援直接在字串中包含表示式，並讓編譯器在執行時解析計算。
- 現在，我們可以輕鬆地在字串中包含單引號和雙引號，而無需使用轉義符。
- 模板文字使編碼簡單、簡潔、整齊、可讀。
- 模板文字的值可以分配給新變數。可以將其視為包含變數值的新字串。
在 JavaScript 中使用基本格式將變數插入字串
將變數值整齊地插入字串的另一種方法是使用 JavaScript 支援的基本格式。使用 JavaScript console.log()，我們可以避免串聯並在目標字串中新增佔位符。如下所示，將要分配的值作為引數傳遞。
let a = 5;
b = 10;
console.log('Sum of %d and %d is %d.', a, b, (a + b));
輸出：
Sum of 5 and 10 is 15.
變數到值的這種解析僅與 console.log() 一起使用。因此，我們不能將其用於分配給其他變數，也不能將其用於在 HTML UI 中顯示新的已解析字串。
備註
- 我們可以在使用
console.log()函式進行記錄時使用這個方法。因此，該方法不適用於將值分配給變數。因此，它可能不值得在日誌以外的場景使用。 - 使用基本格式時，字串中使用的佔位符應與作為引數傳遞的資料型別相對應。例如，對於顯示數值，句子中的佔位符應該是
%d，對於字串資料型別，應該是%s。
let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));
輸出：
Sum of 5 and 10 is 15.
如果我們忘記考慮傳遞的引數型別，則可能是型別不匹配。JavaScript 會嘗試對變數進行型別轉換，並將結果值新增到字串中。下面的程式碼解釋了這種現象。
let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', op1, op2, (op1 + op2), operation);
輸出：
5 of 10 and 15 is NaN.
op1 是 Number 資料型別，我們正在使用%s 將其注入到最終字串中。%s 會自動將數字型別轉換為字串資料型別。這種轉換進行得很順利。但是對於 operation 變數，該值將分配給該序列中緊隨其後的佔位符。該佔位符為%d。因此，此處將字串資料型別轉換為數字。轉換不會發生。因此，返回的結果是 NaN，我們將其視為輸出的結尾字。
我們可以在引數中使用表示式，就像在 (op1 + op2) 中看到的那樣。JavaScript 理解並相應地將其解析為總和。
在這種情況下，如果不使用轉義字元，則不能在最終字串中使用雙引號。但是，如果將整個結構封裝在雙引號中，則可以使用單引號。請看以下程式碼。
let op1 = 5, op2 = 10, operation = 'Sum';
console.log('\'%s\' of %d and %d is %d.', operation, op1, op2, (op1 + op2));
輸出：
'Sum' of 5 and 10 is 15.
在 JavaScript 中使用 sprintf() 將變數插入字串
在 JavaScript ES6 中的模板文字之前，開發社群遵循了功能豐富的 sprintf.js 庫。該庫有一個稱為 sprintf() 的方法。sprintf.js 是 JavaScript 的開源庫。它具有適用於 Node.js 和瀏覽器的實現。有關設定和配置，你可以訪問其 git-hub 頁面。sprintf() 用於在字串中包含變數，而不使用字串串聯。用法如下。
let sprintf = require('sprintf-js').sprintf;
let op1 = 5, op2 = 10, operation = 'Sum';
sprintf('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));
輸出：
Sum of 5 and 10 is 15.
它具有以下各種有用的特殊功能。
sprintf()函式允許以不同順序指定變數。- 像模板文字的功能一樣，
sprintf()解析封裝在字串中的表示式。 - 它支援多種格式。除了標準的字串和數字之外，
sprintf-js庫還支援布林值，二進位制格式等，用於將變數值輸出到字串。 - 此外，你可以使用庫提供的
vsprintf()方法將引數指定為陣列。 - 它還允許直接在第二個引數中傳遞物件，並自動解析變數。
該庫提供了更多功能。可以在其 GitHub 連結中指定的 Read.me 檔案中找到更多詳細資訊。
まとめ
如果要在字串中包含變數值而不使用+ 和雙引號來進行繁瑣的字串連線，則最好的選擇是使用帶有反引號的功能模板文字。如果我們僅需要出於記錄目的而在輸出字串中插入值，JavaScript 的 console.log() 函式就很有用。它具有預設情況下包括的格式設定選項。sprintf.js 庫具有豐富的功能，並在空間中起著主導作用，因為它在嵌入變數值時比模板文字提供了更多的功能。但這是以熟悉該庫為代價的。