Can ES6 Template Literals be Truly Reusable?

Reusability conundrum in ES6 Template Literals

The primary concern raised in this discussion revolves around the presumed lack of reusability in ES6 template literals. Conventional demonstrations emphasize substitutions at declaration time, disallowing runtime modification.

Solution: Leveraging the Function Constructor

To address this issue, a viable solution emerges in the form of the Function constructor. This approach involves converting the template string into a function.

Consider the following snippet:

<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));</code>

By invoking this function, you can generate the desired string while possessing the flexibility to modify variables at runtime.

Benefits of this approach:

• Enables runtime substitution of template values
• Facilitates interpolation from external sources, such as files
• Allows for dynamic string manipulation

Potential drawbacks:

• Template tags may require additional implementation effort
• Inline JavaScript logic within templates is not supported due to late interpolation
• Memory overhead associated with function creation for each template use

In summary, while ES6 template literals inherently lack true reusability, employing the Function constructor offers a workaround that emulates the desired behavior of creating and modifying templates at runtime.

The above is the detailed content of Can ES6 Template Literals be Truly Reusable?. For more information, please follow other related articles on the PHP Chinese website!