جافاسكربتالتعامل مع النصوص

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

مفهوم النصوص في جافاسكربت

النص عبارة عن سلسلة من الأحرف ليس لها حجم محدد فقد يتألف من حرف واحد، كلمة، جملة أو فقرة كبيرة جداً.
في جافاسكربت النص يندرج تحت النوع string.

في هذا الدرس ستتعرف على جميع الطرق التي يمكنك من خلالها تعريف نص، بالإضافة إلى الدوال الجاهزة التي يمكنك استخدامها للتعديل على النصوص، البحث فيها و تقطيعها.

طريقة تعريف نص في جافاسكربت

في جافاسكربت يمكنك تعريف النص بواسطة الرمز ' ' أو الرمز " " مع الإشارة إلى أنه لا يوجد أي إختلاف بينهما.

المثال الأول

let str1 = 'Text inside single quotes';
let str2 = "Text inside double quotes";

جرب الكود

في حال تم تعريف النص بواسطة الرمز " " فإنك تستطيع استخدام الرمز ' ' بداخله و العكس صحيح.

المثال الثاني

let str1 = 'She said "Hey"';
let str2 = "Don't eat sugar";

جرب الكود

في حال أردت استخدام الرمز نفسه الذي تم بواسطته تعريف النص بداخله فيجب أن تضع قبله \ لكي يفهم مفسّر جافاسكربت أنك تريد اعتبار هذا الرمز كحرف عادي.

المثال الثالث

let str1 = "She said \"Hey\"";
let str2 = 'Don\'t eat sugar';

جرب الكود

في حال أردت استخدام الرمز \ كأي حرف عادي، فيجب أن تكتبه بشكل مكرر هكذا \\ حتى يفهم مفسّر جافاسكربت أنك تريد اعتبار هذا الرمز كحرف عادي.

المثال الرابع

let str = "Here, backslash is used as \\Normal Charater\\";

جرب الكود

طريقة تعريف قالب نصي في جافاسكربت

القالب النصّي ( String Template ) هو نص يتم تعريفه بواسطة الرمز ` ` و يمتاز عن النص العادي بأنه يسمح بحجز أماكن فيه يتم فيها تمرير قيم متغيرات أخرى بشكل مباشر الأمر الذي يجعل دمج النصوص و القيم الأخرى أمر في غاية السهولة.

أسلوب القالب النصّي أضيف في جافاسكربت ابتداءاً من الإصدار ES6.

في المثال التالي قمنا بحجز مكان للمتغيرات التي نريد دمجها مع النص.

المثال الأول

let username = "Mhamad";
let totalMessages = 10;
let text = `Good morning ${username}, you have ${totalMessages} messages.`;

جرب الكود

النص الموضوع بداخل ` ` يمكن وضعه على عدة أسطر و مفسّر جافاسكربت سيقوم بدمجها بشكل تلقائي.

المثال الثاني

let str = 
`Multiline text 
defined using
back-ticks`;

جرب الكود

في حال كان النص معرّف بواسطة الرمزين ' ' أو " " و النص فيه موضوع على عدة أسطر كما في المثال السابق فإن أي كود موضوع بعد السطر الأول لن يعمل.

مصطلحات مهمة حول التعامل مع النصوص

عدد أحرف النص يسمى Length.
رقم أي خانة في النص يسمى Index.
إذا قمنا بأخذ جزء من النص فهذا الجزء يسمى Substring.

الآن، لنفترض أنه لدينا متغير إسمه str يحتوي على نص كقيمة.

let str = "welcome to harmash.com";

شكل النص في الذاكرة

مفسّر جافاسكربت يقوم بتخزين محتوى النص في الذاكرة حرفاً حرفاً و بالترتيب و يبدأ بترقيمهم من الرقم 0 كما يلي.

String characters indices

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

String details

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

في المثال التالي قمنا بطباعة عدد الأحرف الموجودة في النص بواسطة الخاصية length.

مثال

let str = 'Welcome to harmash.com';
document.write('Total characters = ' + str.length);

جرب الكود

دوال النصوص في جافاسكربت

سنقسم دوال النصوص إلى 5 فئات أساسية بناءاً على وظائفها كما يلي:

دوال للبحث ( Searching ).
دوال للتجزيء ( Substring ).
دوال للتبديل ( Replacing ).
دوال للمقارنة ( Comparison ).
دوال للمعالجة ( Manipulation ).

النوع string يعتبر Immutable و هذا يعني أنك عندما تستدعي أي دالة على نص، لن يتم تعديل محتوى النص الذي قام باستدعائها، بل سترجع لك نسخة معدلة من هذا النص و سيبقى النص الأصلي كما هو.

دوال البحث في النصوص

إسم الدالة مع تعريفها
1	`charAt(index)` ترجع الحرف الموجود على الخانة التي نمرر رقمها مكان الباراميتر `index` في النص الذي قام بإستدعائها. مثال عنها
2	`charCodeAt(index)` ترجع رقم اليونيكود ( Unicode ) للحرف الموجود على الخانة التي نمرر رقمها مكان الباراميتر `index` في النص الذي قام بإستدعائها. مثال عنها
3	`indexOf(str, indexStart)` تبحث في النص الذي قام بإستدعائها عن أول خانة يوجد إبتداءاً من عندها نفس النص الذي نمرره لها مكان الباراميتر `str` و ترجعه. `indexStart` هو باراميتر إختياري يمكننا من خلاله تحديد رقم الخانة التي نريد بدء البحث من عندها. في حال لم تجد ما تبحث عنه في النص الذي قام باستدعائها فإنها ترجع القيمة `-1`. مثال عنها
4	`lastIndexOf(str, indexEnd)` تبحث في النص الذي قام بإستدعائها عن رقم آخر خانة يوجد إبتداءاً من عندها نفس النص الذي نمرره لها مكان الباراميتر `str` و ترجعه. `indexEnd` هو باراميتر إختياري يمكننا من خلاله تحديد رقم الخانة التي نريد إيقاف البحث من عندها. في حال لم تجد ما تبحث عنه في النص الذي قام باستدعائها فإنها ترجع القيمة `-1`. مثال عنها
5	`search(regex)` تبحث في النص الذي قام بإستدعائها عن أول خانة يوجد إبتداءاً من عندها النص أو التعبير النمطي ( Regex ) الذي نمرره لها مكان الباراميتر `regex` و ترجعه. في حال لم تجد ما تبحث عنه في النص الذي قام باستدعائها فإنها ترجع القيمة `-1`. مثال عنها
6	`includes(str)` تبحث في النص الذي قام باستدعائها عن النص الذي نمرره لها مكان الباراميتر `str`. ترجع `true` في حال كان النص الذي قام بإستدعائها يحتوي على نفس قيمة النص. و ترجع `false` في حال لم يكن كذلك. مثال عنها
7	`fromCharCode(num1, num2, /* …, */ numN)` تحول أرقام اليونيكود ( Unicode ) التي يتم تمرير لها لأحرف و من ثم ترجعها كنص واحد. مثال عنها

دوال تجزيء النصوص

إسم الدالة مع تعريفها
1	`substring(indexStart, indexEnd)` تستخدم للحصول على جزء محدد (substring) من النص الذي قام باستدعائها. مكان الباراميتر `indexStart` نمرر رقم الخانة التي نريد البدء من عندها. `indexEnd` هو بارميتر إختياري يمكننا من خلاله تمرير رقم الخانة التي ستنتهي الجزئية قبلها. في حال عدم تحديد رقم الخانة التي ستنتهي الجزئية عندها فإنه سيتم إرجاع كل النص الموجود بعد الخانة التي تم البدء من عندها. مثال عنها
2	`slice(indexStart, indexEnd)` تستخدم للحصول على جزء محدد (substring) من النص الذي قام باستدعائها مثل الدالة `substring()`. مكان الباراميتر `indexStart` نمرر رقم الخانة التي نريد البدء من عندها و المميز بها أنه في حال تمرير رقم أصغر من `0` فإنها ستبدأ من آخر النص فمثلاً `-1` تبدأ من الحرف ما قبل الأخير. `indexEnd` هو بارميتر إختياري يمكننا من خلاله تمرير رقم الخانة التي ستنتهي الجزئية قبلها و يمكن إعطاءها رقم أصغر من `0` لتحديد خانة التوقف بشكل عكسي. في حال عدم تحديد رقم الخانة التي ستنتهي الجزئية عندها فإنه سيتم إرجاع كل النص الموجود بعد الخانة التي تم البدء من عندها. مثال عنها
3	`split(separator, limit)` تستخدم للحصول على مصفوفة من النص الذي قام باستدعائها. مكان الباراميتر `separator` نمرر نص عادي أو تعبير نمطي ( Regex ) يحدد الطريقة التي سيتم على أساسها تقسيم النص و وضع كل قسم فيه بداخل عنصر في المصفوفة. `limit` هو باراميتر إختيار يمكننا من خلاله تمرير رقم يمثل عدد العناصر الأقصى التي يمكن أن تحتويها المصفوفة. مثال عنها مثال آخر

دوال التبديل في النصوص

إسم الدالة مع تعريفها

1 replace(regex, replacement) تستخدم لتبديل أجزاء محددة في النص الذي قام باستدعائها بجزئية جديدة.
مكان الباراميتر separator نمرر نص عادي أو تعبير نمطي ( Regex ) يمثل الجزئية التي نريد تبديلها.
مكان الباراميتر replacement نمرر النص الجديد الذي نريد تبديله بالنص الذي تم إيجاده.
ملاحظة: إذا كان النص الأول عبارة عن نص عادي فإنه سيتم تبديل أول جزئية فقط في النص تتطابق معه.
مثال عنها مثال آخر

2 replaceAll(regex, replacement) تستخدم لتبديل أجزاء محددة في النص الذي قام باستدعائها بجزئية جديدة.
مكان الباراميتر separator نمرر نص عادي أو تعبير نمطي ( Regex ) يمثل الجزئية التي نريد تبديلها.
مكان الباراميتر replacement نمرر النص الجديد الذي نريد تبديله بالنص الذي تم إيجاده.
مثال عنها

إسم الدالة مع تعريفها
1	`replace(regex, replacement)` تستخدم لتبديل أجزاء محددة في النص الذي قام باستدعائها بجزئية جديدة. مكان الباراميتر `separator` نمرر نص عادي أو تعبير نمطي ( Regex ) يمثل الجزئية التي نريد تبديلها. مكان الباراميتر `replacement` نمرر النص الجديد الذي نريد تبديله بالنص الذي تم إيجاده. ملاحظة: إذا كان النص الأول عبارة عن نص عادي فإنه سيتم تبديل أول جزئية فقط في النص تتطابق معه. مثال عنها مثال آخر
2	`replaceAll(regex, replacement)` تستخدم لتبديل أجزاء محددة في النص الذي قام باستدعائها بجزئية جديدة. مكان الباراميتر `separator` نمرر نص عادي أو تعبير نمطي ( Regex ) يمثل الجزئية التي نريد تبديلها. مكان الباراميتر `replacement` نمرر النص الجديد الذي نريد تبديله بالنص الذي تم إيجاده. مثال عنها

دوال المقارنة النصوص

إسم الدالة مع تعريفها
1	`startsWith(prefix)` تستخدم لمعرفة ما إذا كان النص الذي قام باستدعائها يبدأ بنص أو تعبير نمطي ( Regex ) معين أم لا. إذا كانت قيمة الباراميتر `prefix` موجودة في بدايته ترجع `true`، غير ذلك ترجع `false`. مثال عنها
2	`endsWith(suffix)` تستخدم لمعرفة ما إذا كان النص الذي قام باستدعائها ينتهي بنص أو تعبير نمطي ( Regex ) معين أم لا. إذا كانت قيمة الباراميتر `suffix` موجودة في نهايته ترجع `true`، غير ذلك ترجع `false`. مثال عنها
3	`match(regex)` تستخدم لمعرفة ما إن كان النص أو التعبير النمطي ( Regex ) الذي نمرره لها مكان الباراميتر `regex` مطابق للنص الذي قام باستدعائها. تقارن قيمة النص الذي قام باستدعائها مع التعبير النمطي الذي نمرره لها مكان الباراميتر `regex`. ترجع `true` في حال كانت جميع أحرفهم متطابقة، غير ذلك ترجع `false`. مثال عنها
4	`matchAll(regex)` تستخدم للحصول على نسخة نوعها `iterator` من النص الذي قام باستدعائها. مكان الباراميتر `regex` نمرر التعبير النمطي الذي على أساسه يتم تخزين العناصر في النسخة التي ترجعها الدالة. مثال عنها

دوال معالجة النصوص

إسم الدالة مع تعريفها
1	`toLowerCase()` ترجع نسخة من النص الذي قام باستدعائها كل أحرفها صغيرة. مثال عنها
2	`toUpperCase()` ترجع نسخة من النص الذي قام باستدعائها كل أحرفها كبيرة. مثال عنها
3	`concat(str1, str2, /* …, */ strN)` ترجع نسخة من النص الذي قام باستدعائها مضافاً في آخره النص أو سلسلة التي يتم تمريرها في الدالة. مثال عنها
4	`trim()` ترجع نسخة من النص الذي قام باستدعائها لا تحتوي على مسافات فارغة في بدايتها و نهايتها. مثال عنها
5	`trimStart()` ترجع نسخة من النص الذي قام باستدعائها لا تحتوي على مسافات فارغة في بدايتها. مثال عنها
6	`trimEnd()` ترجع نسخة من النص الذي قام باستدعائها لا تحتوي على مسافات فارغة في نهايتها. مثال عنها
7	`padStart(length, char)` ترجع نسخة من النص الذي قام باستدعائها مع تكرار الحرف الذي نمرره لها مكان الحرف `char` في بدايتها حتى يصل عدد أحرفها لرقم محدد. مكان الباراميتر `length` نمرر رقم يمثل عدد الأحرف التي سيتألف منها النص الذي سيرجع إذا لم يكن أساساً عدد أحرفه أكبر من العدد الموضوع. مثال عنها
8	`padEnd(length, char)` ترجع نسخة من النص الذي قام باستدعائها مع تكرار الحرف الذي نمرره لها مكان الحرف `char` في آخرها حتى يصل عدد أحرفها لرقم محدد. مكان الباراميتر `length` نمرر رقم يمثل عدد الأحرف التي سيتألف منها النص الذي سيرجع إذا لم يكن أساساً عدد أحرفه أكبر من العدد الموضوع. مثال عنها

حروف الهروب في جافاسكربت

حروف الهروب (Escape Charaters) هي حروب تضاف ضمن النص لجعل مفسّر جافاسكربت يعاملها معاملة خاصة.
أي حرف من حروف الهروب نبدؤه بالرمز \ ثم نضع الحرف بشكل ملاصق له.

في بداية الدرس سبق و استخدمنا حروف الهروب \" و \' و \\ لجعل مفسّر جافاسكربت يطبعها كأحرف عادية و لكن هناك أحرف أخرى يمكن استخدامها و هذه معانيها.

الحرف	معناه
`\n`	يستخدم هذا الحرف للنزول على سطر جديد.
`\b`	يستخدم هذا الحرف لحذف الحرف التالي الذي يأتي بعده.
`\r`	يستخدم هذا الحرف للعودة إلى أول السطر كما في آلات الطباعة القديمة.
`\t`	يستخدم هذا الحرف لإضافة عدة مسافات فارغة أفقياً حتى يظهر النص كجدول إذا كان هناك نص آخر بجانبه.
`\v`	يستخدم هذا الحرف لإضافة عدة مسافات فارغة عمودياً حتى يظهر النص كجدول إذا كان هناك نص آخر تحته.

حروف الهروب ليس لها أهمية كبيرة في صفحات الويب لأن المتصفح يضبط النص بطريقة مناسبة أكثر و يتجاهلها.

الدرس التالي❯

❮الدرس السابق

جافاسكربتالتعامل مع النصوص

مفهوم النصوص في جافاسكربت

طريقة تعريف نص في جافاسكربت

المثال الأول

المثال الثاني

المثال الثالث

المثال الرابع

طريقة تعريف قالب نصي في جافاسكربت

المثال الأول

المثال الثاني

مصطلحات مهمة حول التعامل مع النصوص

شكل النص في الذاكرة

مثال

دوال النصوص في جافاسكربت

دوال البحث في النصوص

دوال تجزيء النصوص

دوال التبديل في النصوص

دوال المقارنة النصوص

دوال معالجة النصوص

حروف الهروب في جافاسكربت

هدف الموقع

روابط مهمة

حقوق النشر

الدورات

أدوات مساعدة

أقسام الموقع

إبحث