النصوص في JavaScript وأهم دوالها

النصوص في كل مكان: أسماء المستخدمين، والرسائل، وعناوين البريد، والتعليقات. في هذا الدرس ستتعلم كيف تتعامل مع النصوص (Strings): كيف تعرف طولها، وتصل إلى أي حرف فيها، وتغيّر شكلها وتبحث داخلها، ثم تتعرف على قوالب النصوص، وهي أسهل طريقة لدمج المتغيرات داخل الجمل.

طول النص والوصول إلى حروفه

تخيّل النص مثل قطار: كل حرف عربة، وكل عربة لها رقم. لكن انتبه: الترقيم في البرمجة يبدأ من صفر وليس من واحد.

let word = "JavaScript";
console.log(word.length);
console.log(word[0]);
console.log(word[4]);
console.log(word.at(-1));
console.log(word[20]);

الناتج

10
J
S
t
undefined

• .length تعطيك عدد الحروف، والمسافات تُحسب أيضاً.
• word[0] أول حرف، و word[4] الحرف الخامس.
• .at(-1) تعطيك آخر حرف. الأرقام السالبة تعدّ من النهاية.
• إذا طلبت رقماً غير موجود مثل word[20] تحصل على undefined.

ملاحظة

استخدمنا كلمة إنجليزية في هذا المثال لأن عدّ الحروف العربية قد يتأثر بعلامات التشكيل، فكلمة «مرحباً» مثلاً تُحسب علامة التنوين فيها حرفاً مستقلاً.

تغيير حالة الأحرف

الدالة (Method) هي أمر جاهز تستدعيه بوضع نقطة بعد النص ثم اسم الدالة وقوسين. هذه دالتان لتغيير حالة الأحرف الإنجليزية:

let text = "Hello World";
console.log(text.toUpperCase());
console.log(text.toLowerCase());

الناتج

HELLO WORLD
hello world

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

تنظيف النص بـ trim

أحياناً يكتب المستخدم مسافات زائدة في أول ما يكتبه أو آخره دون أن يقصد. الدالة trim تزيلها، مثل مقص يقص الأطراف الزائدة:

let input = "   [email protected]   ";
console.log(input.trim());

الناتج

[email protected]

البحث داخل النص

let text = "Hello World";
console.log(text.includes("World"));
console.log(text.indexOf("World"));
console.log("Hello".indexOf("z"));
console.log("photo.png".endsWith(".png"));
console.log("https://site.com".startsWith("https"));

الناتج

true
6
-1
true
true

• includes تجيب: هل الكلمة موجودة؟ (true أو false).
• indexOf تعطيك مكان أول ظهور للكلمة، أو -1 إن لم تجدها.
• startsWith و endsWith تفحصان بداية النص ونهايته. مثلاً: هل الملف صورة بامتداد .png؟

قص النص واستبدال أجزائه

let text = "Hello World";
console.log(text.slice(0, 5));
console.log(text.replace("World", "JS"));
console.log("a-b-a".replaceAll("a", "x"));
console.log(text);

الناتج

Hello
Hello JS
x-b-x
Hello World

• slice(0, 5) تقص من الموضع 0 حتى قبل الموضع 5، أي أن الرقم الثاني لا يدخل في القص.
• replace تستبدل أول ظهور فقط، و replaceAll تستبدل كل الظهورات.

لاحظ السطر الأخير: النص الأصلي text لم يتغير! وهذا يقودنا لقاعدة مهمة.

النصوص لا تتغير

كل دوال النصوص تُرجع نصاً جديداً ولا تعدّل النص الأصلي. إذا أردت حفظ النتيجة، فضعها في متغير:

let animal = "cat";
animal.toUpperCase();
console.log(animal);
animal = animal.toUpperCase();
console.log(animal);

الناتج

cat
CAT

الأمر يشبه آلة التصوير: تعطيك نسخة معدّلة، والورقة الأصلية تبقى كما هي.

قوالب النصوص (Template Literals)

لنفترض أنك تريد أن تبني جملة فيها متغيرات. الطريقة القديمة هي اللصق بعلامة +:

let name = "سارة";
let age = 14;
console.log("اسمي " + name + " وعمري " + age + " سنة");

الطريقة تعمل، لكنها مزعجة: علامات تنصيص كثيرة، ومسافات يسهل نسيانها. الحل الحديث هو قوالب النصوص: اكتب النص بين علامتي backtick (المفتاح الموجود عادة تحت زر Esc)، وضع أي متغير داخل ${ }:

let name = "سارة";
let age = 14;
console.log(`اسمي ${name} وعمري ${age} سنة`);
console.log(`بعد 5 سنوات سيكون عمري ${age + 5} سنة`);

الناتج

اسمي سارة وعمري 14 سنة
بعد 5 سنوات سيكون عمري 19 سنة

القالب يشبه استمارة فيها فراغات: الجملة ثابتة، والفراغات تُملأ بقيم المتغيرات. ولاحظ في السطر الثاني أنك تستطيع كتابة عملية حسابية كاملة داخل ${ }.

ومن مزاياها أيضاً أنها تسمح بكتابة نص من عدة أسطر مباشرة:

let poem = `السطر الأول
السطر الثاني`;
console.log(poem);

الناتج

السطر الأول
السطر الثاني

الرموز الخاصة داخل النص

ماذا لو أردت كتابة علامة تنصيص داخل النص نفسه؟ استخدم الشرطة المائلة العكسية \ قبلها، فتفهم JavaScript أنها جزء من النص. وكذلك \n تعني «سطراً جديداً»:

console.log("قال المعلم: \"ركّزوا\"");
console.log('It\'s easy');
console.log("سطر\nسطر جديد");

الناتج

قال المعلم: "ركّزوا"
It's easy
سطر
سطر جديد

جرّب بنفسك

هذا الكود ينظّف اسماً كتبه مستخدم بمسافات زائدة، ثم يرحّب به. غيّر الاسم في السطر الأول وجرّب دوالاً أخرى تعلمتها:

جرّب بنفسكJavaScript

محرر الكود (JavaScript)let firstName = " omar "; let clean = firstName.trim(); console.log(clean.length); console.log(`مرحباً يا ${clean.toUpperCase()}!`); console.log(clean.includes("m"));

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• نسيان أن الترقيم يبدأ من صفر: أول حرف هو text[0] وليس text[1].
• توقع أن الدالة تغيّر النص الأصلي: كتابة name.trim(); وحدها لا تفعل شيئاً. اكتب name = name.trim();.
• استخدام علامة تنصيص عادية مع ${ }: في "مرحباً ${name}" لن تُستبدل القيمة، وستظهر الكلمة كما هي. القوالب تعمل فقط مع علامة الـ backtick.

اختبر نفسك

سؤال

ما ناتج 'Hello'.slice(1, 3)؟

ellHelel

سؤال

لكي تُستبدل ${age} داخل النص بقيمة المتغير، بين أي علامتين تكتب النص؟

علامتي backtickعلامتي تنصيص مزدوجتينعلامتي تنصيص مفردتين

الخلاصة

• .length تعطي طول النص، والحروف مرقّمة من صفر: text[0] أولها و .at(-1) آخرها.
• دوال مفيدة: toUpperCase و toLowerCase و trim و includes و indexOf و slice و replace.
• دوال النصوص تُرجع نصاً جديداً ولا تغيّر الأصلي.
• قوالب النصوص بعلامة backtick و ${ } هي أسهل طريقة لدمج المتغيرات في الجمل.
• الشرطة العكسية \ تكتب الرموز الخاصة مثل \" و \n.