Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

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

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

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

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

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

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

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

المثال الأول

let str1 = 'Text inside single quotes';
let str2 = "Text inside double quotes";
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 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\\";
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 username = "Mhamad"; let totalMessages = 10; let text = `Good morning ${username}, you have ${totalMessages} messages.`;
جرب الكود

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

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

let str =
`Multiline text
defined using
back-ticks`;
let str = `Multiline text defined using back-ticks`;
جرب الكود

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

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

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

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

let str = "welcome to harmash.com";
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);
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 هو باراميتر إختياري يمكننا من خلاله تحديد رقم الخانة التي نريد بدء البحث من عندها.
مثال عنها
4 lastIndexOf(str, indexEnd) تبحث في النص الذي قام بإستدعائها عن رقم آخر خانة يوجد إبتداءاً من عندها نفس النص الذي نمرره لها مكان الباراميتر str و ترجعه.
indexEnd هو باراميتر إختياري يمكننا من خلاله تحديد رقم الخانة التي نريد إيقاف البحث من عندها.
مثال عنها
5 search(str) تبحث في النص الذي قام بإستدعائها عن أول خانة يوجد إبتداءاً من عندها نفس النص الذي نمرره لها مكان الباراميتر str و ترجعه.
إذاً هي مثل الدالة indexOf() مع فارق واحد و هو أنه لا يمكن فيها تحديد رقم الخانة التي سيتم بدء البحث من عندها.
مثال عنها
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 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(char, length) ترجع نسخة من النص الذي قام باستدعائها مع تكرار الحرف الذي نمرره لها مكان الحرف char في بدايتها حتى يصل عدد أحرفها لرقم محدد.
مكان الباراميتر length نمرر رقم يمثل عدد الأحرف التي سيتألف منها النص الذي سيرجع إذا لم يكن أساساً عدد أحرفه أكبر من العدد الموضوع.
مثال عنها
8 padEnd(char, length) ترجع نسخة من النص الذي قام باستدعائها مع تكرار الحرف الذي نمرره لها مكان الحرف char في آخرها حتى يصل عدد أحرفها لرقم محدد.
مكان الباراميتر length نمرر رقم يمثل عدد الأحرف التي سيتألف منها النص الذي سيرجع إذا لم يكن أساساً عدد أحرفه أكبر من العدد الموضوع.
مثال عنها

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

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

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

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

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