String Methods في JavaScript: قص النصوص، البحث، الاستبدال والتنظيف بأمثلة عملية

بعد ما تعلمت أساس Strings، الخطوة الطبيعية هي تعلم الأدوات اليومية للتعامل مع النصوص. هنا يأتي دور String Methods في JavaScript.

هذا الدرس مناسب إذا كنت تبحث عن: قص جزء من النص، البحث عن كلمة، استبدال نص، أو تنظيف المدخلات من المسافات الزائدة.

قاعدة مهمة قبل البدء

النصوص في JavaScript من النوع immutable. يعني أغلب الدوال لا تغيّر النص الأصلي، بل تعيد نصاً جديداً.

let name = "javascript";
let upper = name.toUpperCase();

console.log(name);  // "javascript"
console.log(upper); // "JAVASCRIPT"

ماذا يفعل هذا الكود؟ ينشئ نسخة جديدة بحروف كبيرة دون تغيير المتغير الأصلي.

النتيجة المتوقعة: name يبقى كما هو، وupper يحمل النص المعدّل.

خطأ شائع: توقع أن toUpperCase() تعدل النص داخل نفس المتغير تلقائياً.

1) length لمعرفة طول النص

let text = "Hello JS";
console.log(text.length); // 8

ماذا يفعل هذا الكود؟ يحسب عدد الأحرف بما فيها المسافة.

النتيجة المتوقعة: القيمة 8.

خطأ شائع: نسيان أن المسافات تُحسب ضمن الطول.

2) toUpperCase() و toLowerCase()

let email = "USER@Example.COM";

console.log(email.toLowerCase()); // user@example.com
console.log(email.toUpperCase()); // USER@EXAMPLE.COM

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

النتيجة المتوقعة: يسهل مقارنة النصوص مثل البريد الإلكتروني.

خطأ شائع: مقارنة نصين بدون توحيد الحالة أولاً.

3) indexOf() و includes() للبحث داخل النص

let sentence = "I love JavaScript";

console.log(sentence.indexOf("love"));    // 2
console.log(sentence.indexOf("Python"));  // -1
console.log(sentence.includes("Java"));   // true

ماذا يفعل هذا الكود؟ يبحث عن جزء من النص بطريقتين مختلفتين.

النتيجة المتوقعة: موقع البداية مع indexOf أو قيمة منطقية مع includes.

خطأ شائع: اعتبار 0 يعني "غير موجود" بينما قد يعني "موجود من البداية".

4) slice() لقص جزء من النص

let word = "JavaScript";

console.log(word.slice(0, 4));  // Java
console.log(word.slice(4));     // Script
console.log(word.slice(-6));    // Script

ماذا يفعل هذا الكود؟ يستخرج جزءاً من النص حسب بداية ونهاية محددتين.

النتيجة المتوقعة: يمكن أخذ أول جزء أو آخر جزء بسهولة.

خطأ شائع: الخلط بين الفهرس (Index) ورقم الحرف البشري (العد يبدأ من 0).

5) replace() لاستبدال نص

let msg = "Welcome user";
let newMsg = msg.replace("user", "Rachid");

console.log(newMsg); // Welcome Rachid

ماذا يفعل هذا الكود؟ يستبدل أول تطابق للنص المحدد.

النتيجة المتوقعة: إنشاء نسخة جديدة بالنص المستبدل.

خطأ شائع: توقع استبدال كل التكرارات تلقائياً بدون Regex عالمي.

6) trim() لتنظيف المسافات الزائدة

let username = "   admin   ";
console.log(username.trim()); // "admin"

ماذا يفعل هذا الكود؟ يزيل المسافات من البداية والنهاية فقط.

النتيجة المتوقعة: قيمة نظيفة مناسبة للتحقق والتخزين.

خطأ شائع: الاعتقاد أنه يزيل المسافات داخل النص أيضاً.

مثال تطبيقي واقعي: تنظيف مدخل المستخدم

let rawInput = "   JavaScript Course   ";

let cleanInput = rawInput.trim();
let normalized = cleanInput.toLowerCase();
let slug = normalized.replace(" ", "-");

console.log(cleanInput); // "JavaScript Course"
console.log(normalized); // "javascript course"
console.log(slug);       // "javascript-course"

ماذا يفعل هذا الكود؟ ينظف النص ثم يوحّد حالته ثم يجهزه كرابط بسيط.

النتيجة المتوقعة: مدخل أكثر احترافية قبل الحفظ أو العرض.

خطأ شائع: تنفيذ الخطوات بترتيب غير مناسب ثم ظهور نتيجة غير متوقعة.

Story قصيرة: لماذا فشل تسجيل الدخول؟

مستخدم كتب البريد: " USER@MAIL.COM " مع مسافات وأحرف كبيرة. النظام قارن القيمة مباشرة مع بريد مخزن بحروف صغيرة، ففشل الدخول. بعد استخدام trim() وtoLowerCase() قبل المقارنة، اختفت المشكلة.

جدول سريع لأكثر الدوال استخداماً

Checklist قبل إنهاء الدرس

• أفهم أن String methods تعيد قيمة جديدة غالباً.
• أعرف متى أستخدم indexOf ومتى أستخدم includes.
• أستطيع تنظيف مدخل المستخدم باستخدام trim.
• أستطيع قص جزء من النص باستخدام slice.

الأسئلة الشائعة — FAQ

هل دوال النصوص تعدل النص الأصلي؟

لا غالباً. معظم الدوال تعيد نصاً جديداً، لذلك احفظ النتيجة في متغير جديد عند الحاجة.

ما الفرق بين indexOf وincludes؟

indexOf يعيد رقم الموقع أو -1، بينما includes يعيد true/false.

متى أستخدم trim؟

قبل المقارنة أو الحفظ، خصوصاً مع مدخلات المستخدم من النماذج.

تريد مراجعة سريعة قبل DOM؟ ارجع إلى مقدمة Strings أو شاهد طريقة الدمج الحديثة في Template Literals.