如何建立可重複使用的 ES6 範本文字以進行動態求值？

可重複使用的ES6 模板文字

挑戰：

模板文字通常對內插值非常簡單有用。然而，當嘗試在運行時重複使用或評估這些文字時，會出現常見的挫折感。似乎替換必須始終在聲明時完成，限制了它們作為模板的實用性。

解決方案：

要克服此限制並創建可重用的模板文字，可以要動態重用和評估，我們必須引入一個中間階段。

使用 Function 建構子：

可重複使用的關鍵在於利用 Function 建構子來包裝模板細繩。透過這樣做，我們實質上將模板轉換為一個 JavaScript 函數，稍後可以使用特定的變數值來呼叫該函數。

<code class="js">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)); // Output: "Hello world!"</code>

在此範例中，fillTemplate 函數將範本字串和變數物件作為參數。它將模板包裝在函數中，然後傳回使用給定變數值呼叫函數的結果。這使我們能夠動態評估模板，每次插入不同的變數值。

其他注意事項：

雖然此方法為可重用性問題提供了解決方法，但它還引入了潛在的限制。

• 模板標籤的合併變得更加困難。
• 由於後期插值，無法包含內聯 JavaScript 邏輯。

替代方法：

有些人可能更喜歡探索替代模板引擎庫，它們為可重複使用和運行時評估的模板提供更全面的解決方案。

以上是如何建立可重複使用的 ES6 範本文字以進行動態求值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！