JavaScript String Output

المعرفة:: JavaScript
الحالة:: ملاحظة_مؤرشفة
المراجع:: JavaScript Essential Training

---

String Output

Template Literals

/**  
 * Use template literals to output HTML  
 * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals  
 *  
 */  
import Backpack from "./Backpack.js";  
  
const everydayPack = new Backpack(  
  "Everyday Pack",  
  30,  
  "grey",  
  15,  
  26,  
  26,  
  false,  
  "December 5, 2018 15:00:00 PST"  
);  
  
const content = `  
  <main>  
    <article>  
      <h1>${everydayPack.name}</h1>  
      <ul>  
        <li>Volume: ${everydayPack.volume}</li>  
        <li>Color: ${everydayPack.color}</li>  
        <li>Age: ${everydayPack.backpackAge()}</li>  
        <li>Number of pockets: ${everydayPack.pocketNum}</li>  
        <li>Left strap length: ${everydayPack.strapLength.left}</li>  
        <li>Right strap length: ${everydayPack.strapLength.right}</li>  
        <li>Lid status: ${everydayPack.lidOpen}</li>  
      </ul>  
    </article>  
  </main>  
`;  
  
document.body.innerHTML = content;  

Traditional String Concatenation

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

const content = "<h1>" + everydayPack.name + "</h1>";