التعامل مع النصوص في لغة JavaScript

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

1. إنشاء النصوص (Creating Strings)

في JavaScript، عندك 3 طرق أساسية لإنشاء نص:

• علامات الاقتباس الفردية (') أو المزدوجة ("): دي الطريقة التقليدية والأكثر استخدامًا.
• قوالب النصوص (Template Literals): ودي الأفضل للمرونة، بتستخدم علامات Backticks ( ) وبتمكنك تكتب نصوص على أكتر من سطر وتدمج المتغيرات بسهولة.

مثال:

let singleQuoteString = 'مرحباً بالعالم!';
let doubleQuoteString = "أهلاً وسهلاً!";
let templateLiteralString = <code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">هذا نص
على عدة أسطر
باستخدام قوالب النصوص.</code>؛

let name = "أحمد";
let greeting = <code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">مرحباً بك يا ${name}! كيف حالك؟</code>;
console.log(greeting); // مرحباً بك يا أحمد! كيف حالك؟

2. طول النص (String Length)

عايز تعرف طول النص؟ الموضوع بسيط جداً، استخدم الخاصية length:

let message = "يا هلا بالشباب!";
console.log(message.length); // الناتج: 14

3. الوصول للحروف (Accessing Characters)

لو عايز توصل لحرف معين في النص، عندك طريقتين:

• بواسطة الأقواس المربعة ([]): ودي زي ما بتتعامل مع الـ Arrays.
• باستخدام الدالة charAt(): بتديلها رقم الـ Index.

الـ Index بيبدأ من 0.

let word = "JavaScript";
console.log(word[0]);      // الناتج: J
console.log(word.charAt(4)); // الناتج: S
console.log(word[10]);     // الناتج: undefined (لأن مفيش حرف في الـ Index ده)

4. دمج النصوص (Concatenation)

عايز تلزق نصين في بعض؟ عندك كذا طريقة:

• علامة الجمع (+): الأسهل والأكثر شيوعاً.
• الدالة concat(): بتضيف نص لنص موجود.
• قوالب النصوص (Template Literals): الأفضل لدمج المتغيرات مع النصوص.

let firstName = "محمد";
let lastName = "علي";

// باستخدام علامة الجمع
let fullName = firstName + " " + lastName; // محمد علي

// باستخدام concat()
let welcomeMessage = "أهلاً ".concat(fullName, "!"); // أهلاً محمد علي!

// باستخدام Template Literals
let fullGreeting = <code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">مرحباً يا ${firstName} ${lastName}!</code>; // مرحباً يا محمد علي!
console.log(fullGreeting);

5. البحث عن أجزاء من النص (Finding Substrings)

لو عايز تعرف هل جزء معين من النص موجود، أو مكانه فين:

• indexOf(): بتديلك أول ظهور لجزء من النص (substring)، ولو مش موجود بترجع -1.
• lastIndexOf(): بتديلك آخر ظهور.
• includes(): بترجع true أو false لو الجزء موجود.
• startsWith(): بتشوف لو النص بيبدأ بجزء معين.
• endsWith(): بتشوف لو النص بينتهي بجزء معين.

let sentence = "البرمجة بلغة JavaScript ممتعة جداً.";
console.log(sentence.indexOf("JavaScript")); // الناتج: 10
console.log(sentence.indexOf("بايثون"));    // الناتج: -1
console.log(sentence.includes("ممتعة"));      // الناتج: true
console.log(sentence.startsWith("البرمجة")); // الناتج: true
console.log(sentence.endsWith("جداً."));    // الناتج: true

6. استخراج أجزاء من النص (Extracting Substrings)

عايز تقطع حتة من النص؟ عندك 3 دوال مهمة:

• slice(startIndex, endIndex): بتقطع جزء من النص. endIndex مش بتدخل في القطع. ممكن تاخد أرقام سالبة (من الآخر).
• substring(startIndex, endIndex): زي slice بس مش بتقبل أرقام سالبة. لو الـ startIndex أكبر من الـ endIndex، بتتبدل الأماكن.
• substr(startIndex, length): بتقطع عدد معين من الحروف بدءًا من startIndex.

let data = "Apple,Banana,Orange";
console.log(data.slice(6, 12));      // الناتج: Banana
console.log(data.substring(0, 5));   // الناتج: Apple
console.log(data.substr(6, 6));      // الناتج: Banana (من الـ Index 6 خد 6 حروف)
console.log(data.slice(-6));         // الناتج: Orange (آخر 6 حروف)

7. استبدال أجزاء من النص (Replacing Substrings)

لو عايز تغير جزء من النص بجزء تاني، استخدم:

• replace(searchValue, replaceValue): بتغير أول ظهور بس.
• replaceAll(searchValue, replaceValue): بتغير كل الظهورات (جديدة نسبياً في ES2021).

ملاحظة: الدوال دي مش بتغير النص الأصلي، بترجع نص جديد.

let text = "أنا أحب البرمجة، البرمجة ممتعة.";
let newText = text.replace("البرمجة", "JavaScript"); // أنا أحب JavaScript، البرمجة ممتعة.
console.log(newText);

let allReplaced = text.replaceAll("البرمجة", "التطوير"); // أنا أحب التطوير، التطوير ممتعة.
console.log(allReplaced);

8. تغيير حالة الحروف (Changing Case)

لو عايز تغير النص كله لحروف كبيرة أو صغيرة (مهم خصوصاً في مقارنات البيانات):

• toUpperCase(): بتحول كل الحروف لحروف كبيرة (Uppercase).
• toLowerCase(): بتحول كل الحروف لحروف صغيرة (Lowercase).

let product = "JavaScript Course";
console.log(product.toUpperCase()); // JAVASCRIPT COURSE
console.log(product.toLowerCase()); // javascript course

9. إزالة المسافات البيضاء (Trimming Whitespace)

أحياناً بيجيلك نصوص فيها مسافات زيادة في الأول أو الآخر، ودي بتعمل مشاكل. استخدم:

• trim(): بتشيل المسافات من أول وآخر النص.
• trimStart(): بتشيل المسافات من أول النص بس.
• trimEnd(): بتشيل المسافات من آخر النص بس.

let userInput = "   اسم المستخدم  ";
console.log(userInput.trim());       // "اسم المستخدم"
console.log(userInput.trimStart());  // "اسم المستخدم  "
console.log(userInput.trimEnd());    // "   اسم المستخدم"

10. تقسيم النص (Splitting Strings)

لو عندك نص وعايز تقسمه لأجزاء بناءً على فاصل معين، وتخزنه في Array، استخدم split():

let tags = "html,css,javascript,react";
let tagsArray = tags.split(","); // ["html", "css", "javascript", "react"]
console.log(tagsArray);

let sentence = "هذا هو مثال لتقسيم جملة";
let words = sentence.split(" "); // ["هذا", "هو", "مثال", "لتقسيم", "جملة"]
console.log(words);

تلميح من مبرمج قواعد بيانات: زي ما بنستخدم دوال زي SUBSTRING أو REPLACE في SQL للتعامل مع النصوص في قواعد البيانات، JavaScript بتوفر لك أدوات مشابهة وقوية جداً عشان تتعامل مع النصوص في الـ Frontend أو الـ Backend (مع Node.js). فهمك للدوال دي هيخلي الكود بتاعك أنظف وأكثر كفاءة.

وبكده نكون غطينا أهم دوال وطرق التعامل مع النصوص في JavaScript. الموضوع بسيط ومباشر، والممارسة هي اللي هتثبت المعلومة. بالتوفيق!

← السابقالفهرس