[Javascript] HTML Template Interpolation

The basic interpolatefunction we can create:

function interpolate(str, params) {
      let names = Object.keys(params); // ["title", "description"]
      let values = Object.values(params); //    ["Hello", "World"]
      const body = `return \`${str}\`;`; // return `<h1>${title}</h1><p>${description}</p>`;
      return new Function(...names, body)(...values);

      /*(function(titile, description) {
        return `<h1>${title}</h1><p>${description}</p>`;
      })("Hello", "World");  
      */
    }
    const html = "<h1>${title}</h1><p>${description}</p>";
    const finalHtml = interpolcate(html, {
      title: "Hello",
      description: "World",
    });

Example:

For a web component, we have a template:

    <template id="cart-item-template">
      <li>
        <p class="qty"></p>
        <p class="name"></p>
        <p class="price"></p>
        <p class="toolbar">
          <a href="#" class="delete-button"> 

标签：const,template,values,Javascript,item,HTML,params,Template,return	

From： https://www.cnblogs.com/Answer1215/p/18369422