JS / النصوص

الناشر :كودا فوكس -

التعامل مع النصوص

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

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

JS - النصوص

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

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

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

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋 
<!DOCTYPE html>
<html>
    <body>
        <script>
let str1 = 'Text inside single quotes';
let str2 = "Text inside double quotes";

document.write('str1 = ' + str1 + '<br>');
document.write('str2 = ' + str2);
        </script>
    </body>
</html>

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋 
<!DOCTYPE html>
<html>
    <body>
        <script>
let str1 = 'She said "Hey"';
let str2 = "Don't eat sugar";

document.write('str1 = ' + str1 + '<br>');
document.write('str2 = ' + str2);
        </script>
    </body>
</html>

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋 
<!DOCTYPE html>
<html>
    <body>
        <script>
let str1 = "She said \"Hey\"";
let str2 = 'Don\'t eat sugar';

document.write('str1 = ' + str1 + '<br>');
document.write('str2 = ' + str2);
        </script>
    </body>
</html>

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋 
<!DOCTYPE html>
<html>
    <body>
        <script>
let str = "Here, backslash is used as \\Normal Charater\\";

document.write(str);
        </script>
    </body>
</html>

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

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

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

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

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋 
<!DOCTYPE html>
<html>
    <body>
        <script>
let username = "Ahmed";
let totalMessages = 10;
let text = `Good morning ${username}, you have ${totalMessages} messages.`;

document.write(text);
        </script>
    </body>
</html>

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋 
<!DOCTYPE html>
<html>
    <body>
        <script>
let str = 
`Multiline text 
defined using
back-ticks`;

document.write(str);
        </script>
    </body>
</html>

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

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

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

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

 📋 
let str = "welcome to codafox.blogspot.com";

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

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



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

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


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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 
<!DOCTYPE html>
<html>
    <body>
        <script>
let str = 'Welcome to codafox.blogspot.com';

// str ترجع عدد الأحرف الموجودة في النص length الخاصية
document.write('Total characters = ' + str.length);
        </script>
    </body>
</html>

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

سنقسم دوال النصوص إلى 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 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 يستخدم هذا الحرف لإضافة عدة مسافات فارغة عمودياً حتى يظهر النص كجدول إذا كان هناك نص آخر تحته.

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

التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال