JavaScript String Templates

Back-Tics

برای ایجاد یک رشته الگو از علامت `` به جای علامت‌های نقل قول ساده و دوگانه استفاده می‌کنیم.


                  let text = `Hello World!`;

در این حالت می‌توانید داخل رشته از هر دو علامت نقل قول ساده و دوگانه در صورت نیاز استفاده کنید.


                  let text = `He's often called "Johnny"`;

همچنین این نوع نوشتار به شما این امکان را می‌دهد که نوشته خود را در صورت نیاز در چند سطر بنویسید.


                  let text = 

                    `The quick

                    brown fox

                    jumps over

                    the lazy dog`;

جایگذاری متغیرها داخل رشته الگو (Interpolation)

یکی از مهم‌ترین کاربردهای یک رشته الگو، جایگذاری متغیرهای مورد نظر داخل آن است.

<!DOCTYPE html>
<html>
  <body>

      <h2>JavaScript Template Literals</h2>

      <p>Template literals allows variables in strings:</p>

      <p id="demo"></p>

      <p>Template literals are not supported in Internet Explorer.</p>

      <script>
          let firstName = "John";
          let lastName = "Doe";

          let text = `Welcome ${firstName}, ${lastName}!`;

          document.getElementById("demo").innerHTML = text;
      </script>

  </body>
</html>

خروجی:

جایگذاری یک عبارت داخل رشته الگو

یکی دیگر از کاربردهای مهم رشته الگو، استفاده از عبارت‌های جاوا اسکریپت داخل آن است.

<!DOCTYPE html>
<html>
  <body>

      <h2>JavaScript Template Literals</h2>

      <p>Template literals allows variables in strings:</p>

      <p id="demo"></p>

      <p>Template literals are not supported in Internet Explorer.</p>

      <script>
          let price = 10;
          let VAT = 0.25;
          let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

          document.getElementById("demo").innerHTML = total;
      </script>

  </body>
</html>

خروجی:

HTML Templates

<!DOCTYPE html>
<html>
    <body>

        <h2>JavaScript Template Literals</h2>

        <p>Template literals allows variables in strings:</p>

        <p id="demo"></p>

        <p>Template literals are not supported in Internet Explorer.</p>

        <script>
            let header = "Templates Literals";
            let tags = ["template literals", "javascript", "es6"];

            let html = `<h2>${header}</h2><ul>`;

            for (const x of tags) {
              html += `<li>${x}</li>`;
            }

            html += `</ul>`;
            document.getElementById("demo").innerHTML = html;
        </script>

    </body>
</html>

خروجی:

<< مبحث قبلی مبحث بعدی >>