كل الأنشطة

بعد أن اطلعنا في مقال سابق على أبسط أساسيات النصوص في جافا سكريبت، سننتقل في هذا المقال إلى مناقشة العمليات المهمة التي يمكن تنفيذها على النصوص والتوابع الأصلية التي توفرها جافا سكريبت لتحقيق ذلك مثل إيجاد طول سلسلة نصية وضم أو فصل سلسلة نصية وتبديل محرف بآخر وغيرها. ننصحك قبل المتابعة في قراءة هذا المقال بالاطلاع على بعض المقالات السابقة مثل: أساسيات علوم الحاسب. أساسيات HTML. أساسيات عمل CSS السلاسل النصية والكائنات إن معظم اﻷشياء في جافا سكربت هي كائنات objects، فعندما ننشئ سلسلة نصية كما في المثال التالي: const string = "This is my string"; يصبح المتغير قالبًا لكائن نصي وكنتيجة يمكن تطبيق عدد كبير من الخاصيات والتوابع عليه. وللاطلاع على هذه الخاصيات والتوابع يمكنك مراجعة توثيق موسوعة حسوب للكائن String. لا حاجة طبعًا أن تربك نفسك بهذه التوابع في بداية رحلتك في تعلم البرمجة، لكنك ستستخدم بعضها مرارًا لهذا من الجيد أن تلقي نظرة عليها. إيجاد طول سلسلة نصية بإمكانك إنجاز اﻷمر باستخدام الخاصية length، إليك مثالًا: const browserType = "mozilla"; browserType.length; يُفترض أن يعيد المتصفح القيمة 7 لأن عدد محارف السلسلة "mozilla" هو 7. ولهذا اﻷمر فائدته، وكمثال على ذلك، تصوّر أنك ترد ترتيب سلسلة من اﻷسماء وفقًا لطول هذه اﻷسماء، أو أنك تريد إعلام المستخدم أن النص الذي أدخله في الحقل أطول مما هو مسموح. استخلاص محرف محدد من سلسلة نصية بإمكانك عمومًا إعادة محرف محدد من سلسلة نصية باستدعاء المتغير الذي يضمها وبعده قوسان مربعان []يحويان رقم المحرف الذي تريده، فلو أردت مثلًا إعادة المحرف الأول من سلسلة نصية يمكنك كتابة التالي: browserType[0]; وتذكر أن الفهرسة تبدأ من الصفر وليس من 1. ولكي تعيد آخر محرف من أي سلسلة نصية يمكن استخدام الخاصية length وفق التقنية التالية: browserType[browserType.length - 1]; وبما أن طول السلسة "mozilla" هو 7، سيكون رقم المحرف اﻷخير منها هو 6 لأن العد يبدأ من 0. لهذا استخدمنا في الكود أعلاه الأمر length-1. التحقق من وجود سلسلة نصية ضمن أخرى قد ترغب أحيانًا في إيجاد سلسلة نصية ضمن أخرى أطول، لهذا يمكن أن تستخدم التابع ()includes الذي يأخذ معاملًا واحدًا وهو السلسلة النصية التي تبحث عنها. ويعيد التابع القيمة true إن وجد هذه السلسلة و false إن لم يجدها. const browserType = "mozilla"; if (browserType.includes("zilla")) { console.log("Found zilla!"); } else { console.log("No zilla here!"); } وقد ترغب أيضًا بمعرفة إذا ما بدأت سلسلة نصية أو انتهت بسلسلة محددة، لهذا ستحتاج إلى التابعين ()startsWith و ()endsWith ويأخذ كلا التابعين معاملًا واحدًا هو السلسلة التي تبحث عنها في بداية او نهاية سلسلة أطول: const browserType = "mozilla"; if (browserType.startsWith("zilla")) { console.log("Found zilla!"); } else { console.log("No zilla here!"); } const browserType = "mozilla"; if (browserType.endsWith("zilla")) { console.log("Found zilla!"); } else { console.log("No zilla here!"); } إيجاد موقع سلسلة فرعية ضمن سلسلة أطول نستخدم لهذا الغرض التابع ()indexOf الذي يأخذ معاملين اﻷول هو السلسلة التي تبحث عنها والثاني اختياري ويشير إلى موقع بداية البحث. يعيد التابع موقع أول ظهور للسلسلة النصية، لكن إن لم يجدها يعيد القيمة 1-. const tagline = "MDN - Resources for developers, by developers"; console.log(tagline.indexOf("developers")); // 20 في مثالنا السابق يبدأ البحث من الموقع 0، ولو عددت المحارف بما فيها المسافات الفارغة من البداية فسيكون أول ظهور للسلسلة النصية "developers" في الموقع 20. console.log(tagline.indexOf("x")); // -1 يعيد البحث السابق القيمة 1- لأن المحرف x غير موجود ضمن السلسلة. طالما أنك تعلمت كيفية إيجاد الظهور اﻷول لسلسلة فرعية ضمن سلسلة أطول، فكيف ستجد ظهورات أخرى؟ يمكنك ذلك بتمرير قيمة أعلى من قيمة الظهور السابق للوسيط الثاني للتابع. const firstOccurrence = tagline.indexOf("developers"); const secondOccurrence = tagline.indexOf("developers", firstOccurrence + 1); console.log(firstOccurrence); // 20 console.log(secondOccurrence); // 35 نبلغ التابع في هذه الحالة أن يبدأ البحث عن النص بدءًا من الموقع 21 (firstOccurrence + 1) وأعاد القيمة 35 وهو موقع الظهور الثاني. استخلاص سلسلة نصية فرعية من سلسلة أطول وذلك باستخدام التابع ()slice الذي يُمرر له معاملان هما: موقع بداية الاستخلاص. موقع نهاية الاستخلاص ولا يؤخذ المحرف في آخر موقع للاستخلاص. إليك مثالًا: const browserType = "mozilla"; console.log(browserType.slice(1, 4)); // "ozi" إن المحرف الموجود في الموقع 1 هو "o" وفي الموقع 4 هو "l" لهذا يكون النتيجة هي السلسلة "ozi" التي تبدأ بالمحرف "o" وتنتهي قبل المحرف "l". أما إذا أردت استخلاص جميع المحارف التي تأتي بعد محرف معين، فلا تحدد قيمة للمعامل الثاني، بل مرر فقط موقع المحرف الذي تريد أن تبدأ الاستخلاص عنده. جرّب اﻵن ما يلي: browserType.slice(2); // "zilla" تُعيد الشيفرة السابقة النص "zilla" لأن المحرف في الموقع 2 هو "z" ولم نحدد قيمة للمعامل الثاني فستكون النتيجة جميع المحارف من نقطة بداية الاستخلاص حتى نهاية السلسلة. **ملاحظة للتابع ()slice خيارات أخرى يمكنك الاطلاع عليها في توثيق التابع ضمن موسوعة حسوب. تغيير حالة الحروف يغيّر التابع ()toLowerCase جميع حروف السلسلة إلى حروف صغيرة والتابع ()toUpperCase إلى حروف كبيرة، وهذا مفيد مثلًا إن أردت تسوية حالة جميع الحروف التي يدخلها مستخدم قبل تخزينها في قاعدة بيانات. جرّب أن تدخل اﻷسطر التالية لترى ما يحدث: const radData = "My NaMe Is MuD"; console.log(radData.toLowerCase()); console.log(radData.toUpperCase()); تحديث أجزاء من النص يمكن استبدال سلسلة فرعية من نص بسلسلة أخرى باستخدام التابع ()replace. ولتجريب الأمر نحاول أن نستبدل في المثال التالي السلسلة التي مررناها كمعامل أول للتابع بالسلسلة التي تمثل المعامل الثاني: const browserType = "mozilla"; const updated = browserType.replace("moz", "van"); console.log(updated); // "vanilla" console.log(browserType); // "mozilla" وتجدر الملاحظة أن التابع ()replace مثل العديد من توابع الكائن النصي لا يغير الكائن الذي استدعاه بل يعيد سلسلة نصية جديدة، لكن إن أردت تحديث المتغير اﻷصلي browserType، فعليك تنفيذ الشيفرة التالية مثلًا: let browserType = "mozilla"; browserType = browserType.replace("moz", "van"); console.log(browserType); // "vanilla" كما عليك أن تصرح عن browserType في هذه الحالة باستخدام letوليس const ﻷن الثابت لا يمكن تحديث قيمته. وانتبه إلى أن التابع ()replace يستبدل السلسلة عند أول ظهور فقط، لكن إن أردت استبدال كل حالات الظهور، عليك استخدام التابع ()replaceAll let quote = "To be or not to be"; quote = quote.replaceAll("be", "code"); console.log(quote); // "To code or not to code" تطبيقات عملية سندفعك في هذا القسم إلى بذل جهدك في العمل مع السلاسل النصية. ففي كل تمرين مصفوفة من السلاسل النصية وحلقة تعالج قيم كل سلسلة ومن ثم تعرضها على شكل قائمة نقطية. لا حاجة لفهم المصفوفات والحلقات حاليًا لأننا سنفصلها لاحقًا، وكل ما عليك فعله هو كتابة شيفرة برمجية تعرض السلاسل النصية بالشكل الذي نريده. لكل تطبيق زر إعادة ضبط "Reset" يمكنك استخدامه إن ارتكبت خطأً ليعيد كل شيء إلى ما كان عليه، وزر "Show solution" للاطلاع على الحل إن لم تتمكن من إيجاده. فلترة رسائل المعايدة عليك في هذا التمرين وضع رسائل المعايدة بعيد الميلاد على شكل قائمة، لها ضع الاختبار المناسب في البنية الشرطية ()if واختبر كل سلسلة نصية واطبعها ضمن القائمة إن كانت رسالة عيد ميلاد. See the Pen string -methods1 by Hsoub Academy (@HsoubAcademy) on CodePen. تصحيح حالة بداية الكلمات نقدم في هذا التمرين أسماء مدن في المملكة المتحدة لكن حالة بداية حروف بدايات الكلمات غير صحيحة في بعضها. لهذا عليك تغيير حالة الحروف في كل كلمة إلى حروف صغيرة ما عدا الحروف اﻷولى. إليك أحد الطرق لتنفيذ اﻷمر: حول حالة جميع الحروف في السلسلة النصية الموجودة في المتغير إلى حروف صغيرة وخزنها في متغير جديد. استخلص الحرف اﻷول من السلسلة وخزّنه في متغير آخر. استبدل الحرف اﻷول من المتغير الذي أنشأته في الخطوة 2 بقيمة المتحول الذي أنشأته في الخطوة 2 بعد تحويل قيمته إلى حروف كبيرة. غيّر قيمة المتغير result كي تساوي نتيجة الخطوة 3. ملاحظة وتلميح: ليس من الضروري أن يكون معامل توابع السلاسل النصية نصًا بل قد يكون عددًا أو متغيرًا أو تابعًا آخر. See the Pen string-methods2 by Hsoub Academy (@HsoubAcademy) on CodePen. إنشاء نص جديد من أجزاء قديمة تتكون المصفوفة في هذا التمرين من عدة سلاسل نصية تتضمن معلومات عن محطات القطار شمال إنجلترا. وتمثل السلاسل النصية بيانات تضم رمز المحطة المكوّن من ثلاثة حروف متبوعًا بمجموعة بيانات تفهمها اﻵلة يليها فاصلة منقوطة يليها اسم المحطة المقروء بالنسبة للبشر مثلMAN675847583748sjt567654;Manchester Piccadilly لهذا نريد استخلاص رمز المحطة واسمها ووضعهما في سلسلة جديدة لها الشكل التالي: MAN: Manchester Piccadilly. ننصحك بتجريب الخطوات التالية: استخلص رمز المحطة المكون من ثلاثة حروف وخزنه في متغير جديد. جد موقع الفاصلة المنقوطة. استخدم موقع الفاصلة المنقوطة في استخلاص اسم المحطة المقروء بالنسبة للبشر وخزّنه في متغير آخر. ضم قيمتي آخر متغيرين مع سلسلة من حروف مناسبة لتحصل على الصيغة النهائية. غيّر قيمة المتغير result كي تساوي النتيجة النهائية. See the Pen Untitled by Hsoub Academy (@HsoubAcademy) on CodePen. الخلاصة لا يمكن أن نتغاضى عن أهمية التعامل مع النصوص في البرمجة بشكل عام وفي جافا سكريبت بشكل خاص لأن النصوص تتعامل مع الويب المبني على التخاطب مع البشر. وقد قدمنا في هذا المقال أهم توابع التعامل مع النصوص التي تلزمك حاليًا، والتي ستكون ركيزة تساعدك على فهم المواضيع اﻷكثر تعقيدًا في المستقبل. ترجمة -وبتصرف- للمقال Useful string methods اقرأ أيضًا المقال السابق: أساسيات التعامل مع النصوص في جافا سكريبت الدليل الشامل لتعلم جافا سكريبت السلاسل النصية (strings) في جافاسكربت تصميم النّصوص البرمجيّة: تنظيم JavaScript توابع الأنواع الأولية (primitives methods) في جافاسكربت