فهم أساسيات قص النصوص في JavaScript: دالة truncateText

أهلاً بك أيها المبرمج الطموح! هل سبق لك أن تصفحت موقعاً إلكترونياً ولاحظت أن عناوين المقالات الطويلة أو وصف المنتجات يتم قصها وإضافة ثلاث نقاط (...) في نهايتها؟ هذه ليست صدفة، بل هي تقنية برمجية شائعة جداً لتحسين تجربة المستخدم والحفاظ على تصميم أنيق ومرتب. في هذا الدرس النظري، سنتعمق في فهم كيفية عمل هذه التقنية باستخدام لغة JavaScript.

لماذا نحتاج إلى قص النصوص؟

تخيل أن لديك قائمة بمقالات مدونة. إذا كان عنوان أحد المقالات طويلاً جداً، فقد يتسبب في اختلال تصميم الصفحة أو قد يطغى على العناوين الأخرى. هنا يأتي دور قص النصوص (Text Truncation). إنها تسمح لنا بعرض جزء موجز من النص، مع إشارة للمستخدم بوجود المزيد من المحتوى يمكنه الاطلاع عليه.

تشريح دالة truncateText

دعنا نلقي نظرة على الدالة التي ستمكننا من تحقيق ذلك:

// دالة لقص النص إذا تجاوز طولاً معيناً وإضافة ثلاث نقاط (...)
function truncateText(text, maxLength) {
  // التحقق مما إذا كان النص أطول من الحد المسموح
  if (text.length > maxLength) {
    // قص النص وإضافة النقاط
    return text.slice(0, maxLength) + '...';
  }
  // إذا كان قصيراً، إرجاعه كما هو
  return text;
}

1. تعريف الدالة (function truncateText(text, maxLength))

نبدأ بتعريف دالة اسمها truncateText. هذه الدالة تتلقى وسيطين (parameters):

• text: وهو النص الأصلي الذي نريد قصه.
• maxLength: وهو أقصى طول مسموح به للنص قبل قصه.

2. الشرط (if (text.length > maxLength))

هذا هو قلب الدالة! هنا نتحقق من طول النص الأصلي. الخاصية .length في JavaScript تعطينا عدد الأحرف في السلسلة النصية (string). إذا كان text.length (طول النص) أكبر من maxLength (الحد الأقصى الذي حددناه)، فهذا يعني أن النص طويل ويجب قصه.

3. عملية القص (return text.slice(0, maxLength) + '...')

إذا تحقق الشرط، ننتقل إلى هذه الخطوة:

• text.slice(0, maxLength): هذه هي الطريقة السحرية للقص! الدالة slice() هي دالة مدمجة في JavaScript للسلاسل النصية. تأخذ وسيطين: نقطة البداية (0 تعني من بداية النص) ونقطة النهاية (maxLength تعني حتى هذا الحرف، لا يشمله). النتيجة هي جزء من النص الأصلي.
• + '...': بعد قص النص، نقوم بإضافة ثلاث نقاط (...) إليه باستخدام عامل الربط +. هذا يخبر المستخدم أن هناك المزيد من النص.
• return: كلمة return تعيد القيمة الناتجة من الدالة. بمجرد أن تعيد الدالة قيمة، تتوقف عن التنفيذ.

4. حالة النص القصير (return text;)

ماذا لو لم يتحقق الشرط؟ أي أن النص الأصلي ليس أطول من maxLength. في هذه الحالة، لا نحتاج إلى قصه. لذا، تقوم الدالة ببساطة بإرجاع النص الأصلي كما هو دون أي تغيير.

ملخص

دالة truncateText هي مثال رائع على كيفية استخدام المنطق الشرطي (if statement) ودوال السلاسل النصية المدمجة (مثل slice()) لمعالجة البيانات بطريقة مفيدة. إنها أداة بسيطة لكنها قوية لتحسين عرض النصوص في واجهة المستخدم الخاصة بك. في الدرس العملي القادم، سنقوم بتطبيق هذه الدالة ونرى كيف تعمل في الممارسة!

---

🔗 الخطوة التالية: انتقل إلى التطبيق العملي وجرب الكود بنفسك من هنا.