JavaScript المتقدم (ES6+)

القوالب الحرفية

13 دقيقة الدرس 4 من 40

القوالب الحرفية

القوالب الحرفية (سلاسل القوالب) هي واحدة من أكثر ميزات ES6 عملية. توفر طريقة أنيقة لإنشاء سلاسل مع تعبيرات مدمجة، وسلاسل متعددة الأسطر، وحتى قوالب موسومة لمعالجة سلاسل متقدمة. لنستكشف هذه الميزة القوية!

بناء جملة القالب الحرفي بالعلامات المائلة العكسية

تستخدم القوالب الحرفية علامات مائلة عكسية (`) بدلاً من علامات الاقتباس:

الطريقة القديمة (تسلسل السلاسل):
var name = "John";
var greeting = "Hello, " + name + "!";
var message = "Welcome to " + siteName + ", " + name + "!";

الطريقة الجديدة (القوالب الحرفية):
const name = "John";
const greeting = `Hello, ${name}!`;
const message = `Welcome to ${siteName}, ${name}!`;

البناء الرئيسي: تستخدم القوالب الحرفية علامات مائلة عكسية (`) وتدمج التعبيرات ببناء جملة ${expression}.

استيفاء السلاسل مع ${}

يمكنك تضمين أي تعبير JavaScript داخل ${}:

المتغيرات:
const name = "John";
const age = 25;
console.log(`Name: ${name}, Age: ${age}`);
// الإخراج: "Name: John, Age: 25"

التعبيرات:
const a = 10;
const b = 20;
console.log(`Sum: ${a + b}`); // "Sum: 30"
console.log(`Double: ${a * 2}`); // "Double: 20"
console.log(`Is adult: ${age >= 18}`); // "Is adult: true"

استدعاءات الدالة:
function getFullName(first, last) {
  return `${first} ${last}`;
}
console.log(`Hello, ${getFullName("John", "Doe")}!`);
// الإخراج: "Hello, John Doe!"

خصائص الكائن:
const user = { name: "Jane", age: 30 };
console.log(`User: ${user.name}, Age: ${user.age}`);
// الإخراج: "User: Jane, Age: 30"

التعبيرات المعقدة تعمل بسلاسة:

const price = 100;
const tax = 0.15;
const total = `Total: $${(price * (1 + tax)).toFixed(2)}`;
console.log(total); // "Total: $115.00"

const items = ["apple", "banana", "orange"];
console.log(`First item: ${items[0]}`); // "First item: apple"
console.log(`Item count: ${items.length}`); // "Item count: 3"

const condition = true;
console.log(`Status: ${condition ? "Active" : "Inactive"}`);
// الإخراج: "Status: Active"

نصيحة: يمكنك تضمين أي تعبير JavaScript صالح داخل ${}، بما في ذلك معاملات ثلاثية، استدعاءات دالة، وحسابات.

السلاسل متعددة الأسطر

تجعل القوالب الحرفية السلاسل متعددة الأسطر سهلة بشكل لا يصدق:

الطريقة القديمة (قبيحة وعرضة للخطأ):
var html = "<div>\n" +
  "  <h1>Title</h1>\n" +
  "  <p>Content</p>\n" +
  "</div>";

الطريقة الجديدة (نظيفة وقابلة للقراءة):
const html = `
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
`;

السلاسل متعددة الأسطر تحافظ على التنسيق:

const message = `
Dear ${name},

Thank you for your order!

Order Details:
- Product: ${product}
- Quantity: ${quantity}
- Total: $${total}

Best regards,
The Team
`;

console.log(message);
// يُخرج رسالة منسقة مع فواصل الأسطر

مهم: تحافظ القوالب الحرفية على كل المسافات البيضاء، بما في ذلك المسافات البادئة/النهائية وفواصل الأسطر. قم بالقص إذا لزم الأمر باستخدام .trim().

القوالب الموسومة

تسمح القوالب الموسومة بتحليل القوالب الحرفية باستخدام دالة:

قالب موسوم أساسي:
function tag(strings, ...values) {
  console.log("Strings:", strings);
  console.log("Values:", values);
}

const name = "John";
const age = 25;
tag`Name: ${name}, Age: ${age}`;

// الإخراج:
// Strings: ["Name: ", ", Age: ", ""]
// Values: ["John", 25]

مثال عملي - تسليط الضوء على القيم:

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i] !== undefined
      ? `<mark>${values[i]}</mark>`
      : '';
    return result + str + value;
  }, '');
}

const name = "John";
const score = 95;
const html = highlight`${name} scored ${score}%`;
console.log(html);
// الإخراج: "<mark>John</mark> scored <mark>95</mark>%"

مثال آخر - تنسيق العملة:

function currency(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i] !== undefined
      ? `$${values[i].toFixed(2)}`
      : '';
    return result + str + value;
  }, '');
}

const price = 19.5;
const tax = 2.925;
const total = currency`Price: ${price}, Tax: ${tax}`;
console.log(total);
// الإخراج: "Price: $19.50, Tax: $2.93"

تقييم التعبيرات في القوالب

يتم تقييم التعبيرات فوراً عند إنشاء القالب:

let count = 0;
const getMessage = () => `Count: ${count++}`;

console.log(getMessage()); // "Count: 0"
console.log(getMessage()); // "Count: 1"
console.log(getMessage()); // "Count: 2"
// يتم زيادة count في كل مرة

يمكنك استخدام القوالب الحرفية للمحتوى الديناميكي:

const users = [
  { name: "John", active: true },
  { name: "Jane", active: false },
  { name: "Bob", active: true }
];

const userList = users
  .map(u => `<li class="${u.active ? 'active' : 'inactive'}">${u.name}</li>`)
  .join('');

const html = `
  <ul>
    ${userList}
  </ul>
`;

إنشاء قوالب HTML بالقوالب الحرفية

القوالب الحرفية مثالية لتوليد HTML:

مكون بطاقة بسيط:
function createCard(title, content, imageUrl) {
  return `
    <div class="card">
      <img src="${imageUrl}" alt="${title}">
      <h3>${title}</h3>
      <p>${content}</p>
    </div>
  `;
}

const card = createCard(
  "Product Name",
  "Product description goes here",
  "https://example.com/image.jpg"
);

document.getElementById("container").innerHTML = card;

قالب معقد مع بيانات متداخلة:

function createTable(data) {
  const headers = Object.keys(data[0]);

  return `
    <table>
      <thead>
        <tr>
          ${headers.map(h => `<th>${h}</th>`).join('')}
        </tr>
      </thead>
      <tbody>
        ${data.map(row => `
          <tr>
            ${headers.map(h => `<td>${row[h]}</td>`).join('')}
          </tr>
        `).join('')}
      </tbody>
    </table>
  `;
}

const users = [
  { name: "John", age: 25, city: "New York" },
  { name: "Jane", age: 30, city: "London" }
];

const table = createTable(users);

ملاحظة أمنية: قم دائماً بتنظيف مدخلات المستخدم قبل إدراجها في قوالب HTML لمنع هجمات XSS. لا تثق أبداً في المحتوى المقدم من المستخدم!

أفضل الممارسات وحالات الاستخدام

✓ استخدم القوالب الحرفية لـ:
استيفاء السلاسل (تضمين المتغيرات)
السلاسل متعددة الأسطر
توليد HTML/XML
الرسائل الديناميكية والإشعارات
بناء عناوين URL
استعلامات SQL/GraphQL (مع الهروب المناسب)
رسائل السجل والتصحيح

✗ تجنب القوالب الحرفية عندما:
سلاسل ثابتة بسيطة (استخدم السلاسل العادية)
مدخلات المستخدم تحتاج التنظيف (استخدم المكتبات)
مسارات حرجة للأداء (فرق ضئيل)

أمثلة عملية:

بناء URL:
const userId = 123;
const filter = "active";
const apiUrl = `https://api.example.com/users/${userId}?status=${filter}`;

استعلام SQL (مع الهروب المناسب):
const id = 42;
const query = `SELECT * FROM users WHERE id = ${id}`;
// ملاحظة: استخدم استعلامات ذات معاملات في الإنتاج!

رسائل الخطأ:
const errorMessage = `
  Error: Failed to load user data
  User ID: ${userId}
  Timestamp: ${new Date().toISOString()}
  Please try again later.
`;

سجل وحدة التحكم:
console.log(`User ${user.name} (${user.email}) logged in at ${timestamp}`);

تمرين الممارسة:

أعد كتابة هذا الكود لاستخدام القوالب الحرفية:

var firstName = "John";
var lastName = "Doe";
var age = 25;
var fullName = firstName + " " + lastName;
var intro = "Hello, my name is " + fullName + " and I am " + age + " years old.";

var html = "<div class=\"user\">\n" +
  "  <h2>" + fullName + "</h2>\n" +
  "  <p>Age: " + age + "</p>\n" +
  "</div>";

الحل:

const firstName = "John";
const lastName = "Doe";
const age = 25;
const fullName = `${firstName} ${lastName}`;
const intro = `Hello, my name is ${fullName} and I am ${age} years old.`;

const html = `
  <div class="user">
    <h2>${fullName}</h2>
    <p>Age: ${age}</p>
  </div>
`;

تطبيق في العالم الحقيقي

مولد قالب البريد الإلكتروني:
function generateEmail(recipient, order) {
  return `
    Hi ${recipient.name},

    Thank you for your order #${order.id}!

    ${order.items.map(item => `
      - ${item.name} x${item.quantity}: $${item.price * item.quantity}
    `).join('')}

    Total: $${order.total}

    Expected delivery: ${order.deliveryDate}

    Questions? Reply to this email.

    Best regards,
    ${order.storeName}
  `.trim();
}

const email = generateEmail(
  { name: "John" },
  {
    id: 12345,
    items: [
      { name: "Laptop", quantity: 1, price: 999 },
      { name: "Mouse", quantity: 2, price: 25 }
    ],
    total: 1049,
    deliveryDate: "Dec 15, 2024",
    storeName: "TechStore"
  }
);

الملخص

في هذا الدرس، تعلمت:

تستخدم القوالب الحرفية علامات مائلة عكسية (`) لإنشاء السلاسل
${expression} يدمج أي تعبير JavaScript
السلاسل متعددة الأسطر تحافظ على التنسيق بدون أحرف هروب
القوالب الموسومة تمكّن معالجة سلاسل مخصصة
مثالية لتوليد HTML واستيفاء السلاسل
أكثر قابلية للقراءة من تسلسل السلاسل
قم دائماً بتنظيف مدخلات المستخدم عند توليد HTML

التالي: في الدرس التالي، سنستكشف التفكيك - طريقة قوية لاستخراج القيم من المصفوفات والكائنات ببناء جملة نظيف وموجز!