如何在 JavaScript 字串中插入變數

若要把變數目前的值放進 JavaScript 字串，最簡單的方式通常是使用模板文字：用反引號括住文字，並在要放入值的位置寫上 `${variableName}`。請將 variableName 換成自己的變數名稱，JavaScript 便會插入該變數當下的值。若只是要組合字串，模板文字通常最直接；主控台佔位符適合輸出記錄訊息，而當格式化功能值得增加相依套件時，也可以改用格式化程式庫。

在 JavaScript 中使用模板文字將變數插入字串

模板文字以反引號括住，不使用單引號或雙引號。JavaScript 會計算 ${ 和 } 之間的運算式，再將結果轉成字串。完成的字串可以指定給變數、由函式回傳，或傳入其他函式。相反地，在引號字串中，例如 "Hello, ${name}"，${name} 只會是字面文字；單引號和雙引號字串不會插入變數值。

以下範例會建立問候訊息、計算總額，並將完成的文字指定給 message：

const name = "Ada";
const price = 12;
const message = `Hello, ${name}. Your total is $${price + 3}.`;
console.log(message);

Hello, Ada. Your total is $15.

${price + 3} 會先求值，因此插入的結果是 15；緊接在運算式前面的美元符號則是一般文字。運算式也可以包含算術運算、屬性存取或函式呼叫。建議讓運算式保持簡短，讓組合出的句子容易閱讀。模板文字可以跨多行，裡面的引號也不必跳脫。若要放入字面的 ${，請跳脫美元符號，寫成 \${；若要放入反引號，則在反引號前加上反斜線。若運算式的結果是物件，JavaScript 會使用該值的字串轉換結果，但這可能不是適合閱讀的表示方式；要呈現清楚的物件資料，請明確轉換。插值產生的是一般文字，不會自動成為安全的 HTML。若要在網頁上顯示不受信任的值，請使用符合情境的安全 DOM API。

在 JavaScript 中使用基本格式化將變數插入字串

輸出診斷訊息時，可以在 console.log() 中使用佔位符，並依序提供對應的引數。以下範例以 %s 格式化名稱、以 %d 格式化分數，兩個引數的順序分別對應這兩個佔位符：

const name = "Ada";
const score = 42;
console.log("%s scored %d points.", name, score);

佔位符支援情況與轉換細節會依主控台實作而異，因此這是方便記錄訊息的方式，並非可跨環境通用的字串組合 API。console.log() 會輸出診斷訊息，不會回傳格式化後的字串供你指定給變數或插入 HTML 頁面。若需要可重複使用的字串值，請改用模板文字或格式化程式庫。引數應依佔位符的順序提供；不同主控台對多餘引數或沒有對應引數的佔位符，可能會有不同的顯示方式。

在 JavaScript 中使用 sprintf() 將變數插入字串

sprintf-js 是一個可選用的格式化程式庫，其 sprintf() 函式會回傳字串。如果專案已安裝此套件，且環境支援 CommonJS，可以使用 const { sprintf } = require("sprintf-js"); 載入函式，再用 const message = sprintf("%s has %d items", name, count); 建立字串值。這些程式碼展示的是 API 用法；套件安裝方式和匯入語法須依專案環境而定。若使用瀏覽器或模組系統，請參閱連結中的專案設定說明。

sprintf() 會根據格式字串中的格式指示符處理傳入的引數；它不會計算格式字串內寫成 JavaScript 的運算式。每個格式指示符都會使用相應的引數。若你需要重複使用格式，或要處理較複雜的格式，而且這些功能值得增加相依套件，就可以考慮使用此程式庫。專案文件列出可用的格式指示符與設定方式。若只是在短句中插入變數，使用內建的模板文字語法通常更簡單。

結論

一般字串組合、插入變數值或嵌入 JavaScript 運算式時，使用模板文字即可。輸出診斷訊息時，可以使用 console.log() 佔位符，但要留意其行為可能因實作而異，而且呼叫不會產生可供重複使用的格式化字串。只有在 sprintf-js 的格式化功能確實有用、足以值得增加相依套件時，才考慮採用它。若只是要插入變數，以反引號搭配 ${...} 通常是將目前值放入 JavaScript 字串中最清楚的做法。