FacebookTwitterLinkedIn

English translation by ChatGPT

Ahmed Zayed 3/2/1/1 أساسيات الجافاسكريبت 'التعامل مع النصوص'Ahmed Zayed 3/2/1/1 أساسيات الجافاسكريبت 'التعامل مع النصوص'

Course

دورة تدريبية

3/2/1/1 أساسيات الجافاسكريبت 'التعامل مع النصوص'

تطوير المواقع الإلكترونية MEAN-Stack from A to Z التأسيس Level1

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

- في البداية يعتبر النص أو الـ string datatype مشابه للـ array بطريقة حيث تعتبر مصفوفة من الـ characters حيث يحمل كل character حرف أو رمز أو رقم مثل
Code

      const myTxT = 'Hello world @ JS 4ever'
  
و على ذلك فإن لكل character رقم للـ index الخاص به و هو رقم ترتيبه في المصفوفة و يبدأ من الصفر فمثلا يمكن التعرف علي الـ character الثاني من النص عن طريق
Code

      let mySTR = 'Hello world @ JS 4ever';
      console.log(mySTR[1]) // e
  
و أيضا لكل نص يمكن معرفة طول النص كما يلي
Code

      let mySTR = 'Hello world @ JS 4ever';
      console.log(mySTR.length) // 22
  
أيضا يمكن معرفة الـ character عن طريق الـ index الخاص به بطريقة أخري عن طريق
Code

      let mySTR = 'Hello world @ JS 4ever';
      console.log(mySTR.charAt(0)) //H
  
أيضا هناك خاصية indexOf و التي تقوم بتحديد هل النص يحتوي علي character أو نص فرعي مثل
Code

      let mySTR = 'Hello world @ JS 4ever';
      console.log(mySTR.indexOf('o')) // 4
  
في الكود السابق يتم تحديد رقم الـ index الخاص بحرف الـ o و هو رقم 4 (مع الأخذ في الإعتبار أن العد يبدأ من الصفر) أيضا يلاحظ وجود حرف الـ o موجود مرتين بالنص و لكنه قام بتحديد رقم موضع أول حرف o في النص
Code

      console.log(mySTR.indexOf('o',5)) // 7
  
في المثال السابق عند تمرير الـ argument الثاني (الذي يعتبر optional ) و إعطاءه رقم 5 فهو يقوم بالبحث في النص بدأ من العنصر السادس و اذا لم يتم تمرير الـ argument يتم البحث من أول النص
Code

      console.log(mySTR.indexOf('world')) // 6
  
أيضا يمكن البحث عن بداية موضع كلمة كاملة و ليس مجرد character كما في المثال السابق
Code

      console.log(mySTR.indexOf('z')) // -1
  
في المثال السابق عندما لا يوجد النص أو الـ character الذي تبحث عنه يتم إرجاع -1 أيضا كما في الـ array هناك lastIndexOf و هي تقوم بنفس مهمة الـ indexOf و لكن بدلا من أن تبحث عن أول موضع يحتوي النص أو الـ character المراد البحث عنه فهي تقوم بدلا من ذلك بالبحث عن أخر موضع يحتوي النص أو الـ character
Code

      console.log(mySTR.lastIndexOf('o')) // 7
  
أيضا من العمليات الخاصة بالـ array و التي يمكن تنفيذها علي النصوص هي slice و تقوم بقطع النص بداية من index محدد حتي index أخر و اذا لم يتم تحديد البداية يتم اعتبار البداية من الموضع 0 و اذا لم يتم تحديد النهاية يتم اعتباره أخر موضع من النص مثل الكود التالي:
Code

      let mySTR = 'Hello world @ JS 4ever';
      console.log(mySTR.slice(6,11)) //world
      console.log(mySTR.slice(11)) // @ JS 4ever
      console.log(mySTR.slice()) //Hello world @ JS 4ever
  
- من المعاملات التي ممكن تنفيذها علي النصوص هو تحويل النص للحروف الصغيرة أو الحروف الكبيرة upper and lower case مثل
Code

      let mySTR = 'Ahmed';
      console.log(mySTR.toUpperCase()) //AHMED
      console.log(mySTR.toLowerCase()) //ahmed
  
- في بعض الأحيان نحتاج إلي التأكد من أن النص لا يحتوي علي space مثلا عند التعامل مع كلمات المرور يمكننا حذف المسافات من بداية و نهاية النص تحسبا لأن المستخدم يقوم بعمل copy and paste لكلمة مروره فيمكنه عن طريق الخطأ نسخ مسافة زائدة كما في المثال التالي:
Code

      let mySTR = ' hello world ';
      console.log(mySTR.trim())//hello world
  
كما يمكن تحديد إذا كان سيتم تجاهل المسافات قبل أو بعد النص فقط عن طريق
Code

      let mySTR = ' hello world ';
      console.log(mySTR.trimEnd())// hello world تجاهل المسافات في النهاية فقط
      console.log(mySTR.trimStart())//hello world تجاهل المسافات في البداية فقط
  
- أيضا من الـ methods التي تقوم بتقطيع النصوص
Code

      let mySTR = 'hello world';
      console.log(mySTR.substring(0,5)) //hello
  
و تأخذ بداية القطع و نهايته و كالعادة عندما لا يتم تحديد النهاية يتم إعتبار نهاية القص هو نهاية الـنص مثل
Code

      let mySTR = 'hello world';
      console.log(mySTR.substring(6)) //world
  
- التحقق من وجود نص فرعي بداخل النص يمكن إستخدام الـ method المسماه includes كما في الكود التالي
Code

      let mySTR = 'hello world';
      console.log(mySTR.includes('world')) //true
      console.log(mySTR.includes('hello',5)) //false
  
كما بالكود السابق فالـ method نقوم بتمرير 2 arguments لها أولها النص المراد الكشف عنها ثانيا و هو optional argument يمكن تمريره و يمكن لا في حالة تمريره يتم الكشف عن النص المراد التحقق منه بداية من الموضع المحددي مثل السطر الثاني من الكود السابق و في حالة عدم تمريره له رقم افتراضي 0 أي أنه يقوم بالتحقق من النص المراد الكشف عنه من أول النص الأصلي و تقوم الـ method بإرجاع true لو كان النص الأصلي يحتوي علي النص المراد التحقق منه و في المقابل تقوم بإرجاع false عند عدم وجود النص أو عدم وجوده من الموضع الذي قمنا بالتحقق منه
أو إستخدام الـ method stratsWith لمعرفة هل النص المراد البحث عنه موجود في بداية النص الأصلي أم لا
Code

      let mySTR = 'hello world';
      console.log(mySTR.startsWith('hello',5)) //false
      console.log(mySTR.startsWith('hello',0)) //true
      console.log(mySTR.startsWith('hi')) //false
  
كما في method includes تاخذ الـ method startsWith أثنين من الـ arguments الأول النص المراد التحقق من وجوده في بداية النص الأصلي و الأخر بداية موضع التحقق و كالعادة لو لم يتم تمرير بداية موضع التحقق فسيتم إعتبار القيمة علي أنها 0 أي أنه يقوم بالتحقق من بداية النص الأصلي أو إستخدام الـ method endsWith للتحقق من النص المراد البحث عنه موجود في نهاية النص الأصلي أم لا
Code

      let mySTR = 'hello world';
      console.log(mySTR.endsWith('world')) //true
      console.log(mySTR.endsWith('hi')) //false
      console.log(mySTR.endsWith('hello',5)) //true
  
في الكود السابق يلاحظ أن الـ endsWith يمرر لها 2 arguments الأول هو النص المراد التحقق من أن النص الأصلي ينتهي به و الثاني هو optional argument يحدد نهاية التحقق فمثلا عند تحديد له الرقم 5 فإنه بذلك يعتبر النص الأصلي ينتهي عند الـ character السادس و اذا لم يتم تحديد رقم النهاية تقوم الـ method بالبحث في كل النص الأصلي
- أيضا يمكن تقسيم النص بإستخدام رمز أو كلمة و عمل array مكون من الكلمات الأخري التي كانت بين الكلمة أو الـ character الذي قمنا بتقسيم النص الأصلي بواسطتها مثل الكود التالي:
Code

      let mySTR = 'hello world i am a live';
      console.log(mySTR.split(' ')) //[ 'hello', 'world', 'i', 'am', 'a', 'live' ]
  
في الكود السابق قمت بتقسيم النص بواسطة المسافة (white space) و تم فصل كل كلمة قبلها و بعدها مسافة و إعتبار كل كلمة عنصر في array
و في حالة عدم تحديد فاصل و تمرير argument عبارة عن نص فارغ سيتم فصل كل character في النص و جعله item في array مثل
Code

      let mySTR = 'hello';
      console.log(mySTR.split('')) //[ 'h', 'e', 'l', 'l', 'o' ]
  
و في حالة عدم تمرير أي argument للـ method سيتم جعل النص كاملا item في array مثل
Code

      let mySTR = 'hello';
      console.log(mySTR.split()) //[ 'hello' ]
  

1/1/2/3 JavaScript fundamentals 'Working with Strings'

Web Development MEAN-Stack from A to Z Fundamentals Level1

Working with strings and manipulating them in various ways is one of the most common and repetitive tasks. We will review some operations that we frequently need, such as:

- Initially, a string or `string` datatype is similar to an array in that it is considered an array of characters, where each character holds a letter, symbol, or number, like this:
Code

        const myTxT = 'Hello world @ JS 4ever'
    
Therefore, each character has an index number, which is its position in the array, starting from zero. For example, you can identify the second character in the string as follows:
Code

        let mySTR = 'Hello world @ JS 4ever';
        console.log(mySTR[1]) // e
    
You can also determine the length of a string as follows:
Code

        let mySTR = 'Hello world @ JS 4ever';
        console.log(mySTR.length) // 22
    
You can also identify a character by its index in another way using:
Code

        let mySTR = 'Hello world @ JS 4ever';
        console.log(mySTR.charAt(0)) //H
    
There is also the `indexOf` property, which determines whether the string contains a specific character or substring, like this:
Code

        let mySTR = 'Hello world @ JS 4ever';
        console.log(mySTR.indexOf('o')) // 4
    
In the previous code, the index number of the character `o` is determined, which is 4 (keeping in mind that counting starts from zero). Also, note that the character `o` appears twice in the string, but it identifies the position of the first `o` in the string.
Code

        console.log(mySTR.indexOf('o',5)) // 7
    
In the previous example, when passing the second argument (which is optional) and giving it the number 5, it searches the string starting from the sixth element. If the argument is not passed, it searches from the beginning of the string.
Code

        console.log(mySTR.indexOf('world')) // 6
    
You can also search for the starting position of a complete word, not just a character, as in the previous example.
Code

        console.log(mySTR.indexOf('z')) // -1
    
In the previous example, when the text or character you are searching for is not found, it returns `-1`. Also, like in arrays, there is `lastIndexOf`, which performs the same task as `indexOf`, but instead of searching for the first position containing the text or character, it searches for the last position containing the text or character.
Code

        console.log(mySTR.lastIndexOf('o')) // 7
    
Another operation that can be performed on strings, similar to arrays, is `slice`, which cuts the string starting from a specific index to another index. If the start is not specified, it is considered to be from position 0, and if the end is not specified, it is considered to be the end of the string, as in the following code:
Code

        let mySTR = 'Hello world @ JS 4ever';
        console.log(mySTR.slice(6,11)) //world
        console.log(mySTR.slice(11)) // @ JS 4ever
        console.log(mySTR.slice()) //Hello world @ JS 4ever
    
- Another operation that can be performed on strings is converting the text to uppercase or lowercase, like this:
Code

        let mySTR = 'Ahmed';
        console.log(mySTR.toUpperCase()) //AHMED
        console.log(mySTR.toLowerCase()) //ahmed
    
- Sometimes, we need to ensure that the text does not contain spaces, for example, when dealing with passwords. We can remove spaces from the beginning and end of the string in case the user copies and pastes their password and accidentally includes extra spaces, as in the following example:
Code

        let mySTR = ' hello world ';
        console.log(mySTR.trim())//hello world
    
You can also specify whether to ignore spaces at the beginning or end of the string only, using:
Code

        let mySTR = ' hello world ';
        console.log(mySTR.trimEnd())// hello world (ignores spaces at the end only)
        console.log(mySTR.trimStart())//hello world (ignores spaces at the beginning only)
    
- Another method for splitting strings is:
Code

        let mySTR = 'hello world';
        console.log(mySTR.substring(0,5)) //hello
    
It takes the start and end of the cut, and as usual, if the end is not specified, the end of the cut is considered to be the end of the string, like this:
Code

        let mySTR = 'hello world';
        console.log(mySTR.substring(6)) //world
    
- Checking if a substring exists within the string: You can use the `includes` method, as in the following code:
Code

        let mySTR = 'hello world';
        console.log(mySTR.includes('world')) //true
        console.log(mySTR.includes('hello',5)) //false
    
As in the previous code, the `includes` method takes two arguments: the first is the text to be checked, and the second is an optional argument. If passed, it checks for the text starting from the specified position, as in the second line of the previous code. If not passed, it defaults to 0, meaning it checks from the beginning of the original string. The method returns `true` if the original string contains the text to be checked, and `false` if it does not or if it is not found from the specified position.
Alternatively, you can use the `startsWith` method to check if the text to be searched for is at the beginning of the original string:
Code

        let mySTR = 'hello world';
        console.log(mySTR.startsWith('hello',5)) //false
        console.log(mySTR.startsWith('hello',0)) //true
        console.log(mySTR.startsWith('hi')) //false
    
Like the `includes` method, the `startsWith` method takes two arguments: the first is the text to be checked, and the second is the starting position for the check. As usual, if the starting position is not passed, it defaults to 0, meaning it checks from the beginning of the original string. Alternatively, you can use the `endsWith` method to check if the text to be searched for is at the end of the original string:
Code

        let mySTR = 'hello world';
        console.log(mySTR.endsWith('world')) //true
        console.log(mySTR.endsWith('hi')) //false
        console.log(mySTR.endsWith('hello',5)) //true
    
In the previous code, note that `endsWith` takes two arguments: the first is the text to be checked, and the second is an optional argument that specifies the end position for the check. For example, if you specify the number 5, it considers the original string to end at the sixth character. If the end position is not specified, the method searches the entire original string.
- You can also split a string using a symbol or word and create an array of the other words that were between the word or character used to split the original string, as in the following code:
Code

        let mySTR = 'hello world i am a live';
        console.log(mySTR.split(' ')) //[ 'hello', 'world', 'i', 'am', 'a', 'live' ]
    
In the previous code, I split the string using a space (white space), and each word before and after the space was separated and considered an element in the array.
If no separator is specified and an empty string is passed as an argument, each character in the string will be separated and made into an item in the array, like this:
Code

        let mySTR = 'hello';
        console.log(mySTR.split('')) //[ 'h', 'e', 'l', 'l', 'o' ]
    
If no argument is passed to the method, the entire string will be made into a single item in the array, like this:
Code

        let mySTR = 'hello';
        console.log(mySTR.split()) //[ 'hello' ]
    

February 27, 2025

Read More
إقرأ المزيد

دورة تدريبية

Course

5/2/1/1 أساسيات الجافاسكريبت 'الجمل الشرطية Conditional statements'

1/1/2/5 JavaScript fundamentals 'Conditional Statements'

دورة تدريبية

Course

8/2/1/1 أساسيات الجافاسكريبت 'الـ Arrays'

1/1/2/8 JavaScript fundamentals 'Arrays'

دورة تدريبية

Course

1/1/1/1 قصة المواقع الإلكترونية منذ البداية

1/1/1/1 The Story of Websites From the Beginning

دورة تدريبية

Course

7/2/1/1 أساسيات الجافاسكريبت 'الـ Functions'

1/1/2/7 JavaScript fundamentals 'Functions'

التسويق الرياضي في أندية الشركات و صناعة الجماهيرية

Sports Marketing in Corporate Clubs and the Fanbase Industry

Keywords
كلمات مفتاحية

دورة الـ mean-stack from a to z دورة النود بالعربي mean-stack دورة الـ دورة الأنجولر بالعربي دورة تطوير المواقع الإلكترونية

course mean-stack from a to zcourse mean-stack from a to znode js arabic coursemean-stack courseangular arabic courseweb development course

© 2026 Ahmed Zayed. All rights reserved.© 2026 كل الحقوق محفوظة أحمد زايد