可重複使用模板文字：暴露隱藏的潛力

雖然ES6 中的模板文字被廣泛使用，但人們仍然認為它們永遠與它們創建的那一刻，缺乏重複使用和動態更新的靈活性。本文挑戰了這個概念，探索將模板文字轉換為可重複使用的動態文件的可能性。

傳統範本的本質在於能夠在運行時注入令牌，並在必要時進行評估。然而，ES6 模板文字似乎在聲明時評估它們的替換，限制了它們的實用性。

基本催化劑：函數建構子

為了克服這個明顯的限制，我們使用 Function 建構子作為中介。透過利用這個構造，我們可以延遲插值過程，直到呼叫函數：

const templateString = "Hello ${this.name}!";
const templateVars = {
  name: "world",
};

const fillTemplate = function (templateString, templateVars) {
  return new Function(
    "return `"   templateString   "`;"
  ).call(templateVars);
};

console.log(fillTemplate(templateString, templateVars));

在此範例中，fillTemplate 函數接受模板字串和一組要插值的變數。在該函數中，我們建構一個函數，該函數在執行時傳回模板字串，其中包含運行時注入的 templateVar 的值。

可重複使用範本文字的好處

The產生的可重複使用範本文字具有許多優點：

• 動態插值：可以在運行時將值插值到模板中，從而提供更大的靈活性。
• 外部插值：範本可以來自外部文件，方便維護和協作。
• 擴充功能：可以透過一些獨創性整合模板標籤等附加功能。

雖然此解決方案引入了某些限制，例如無法內聯 JavaScript 邏輯，可以開發變通方法。

結論

透過使用 Function 建構函數，我們釋放了 ES6 模板文字的真正潛力。我們將它們從靜態字串轉換為可重複使用的動態模板，為程式碼組織和靈活性開闢了新的可能性。雖然完全重新創建傳統模板引擎功能的旅程仍在繼續，但該技術為擴展模板文字的功能提供了堅實的基礎。