JavaScript String Methods Part 2

-

بنكمل في هذا الدرس المواضيع المتعلقة ب String methods والخصائص Properties الي ممكن من خلالها التعامل مع strings بسهولة. حيث يمكن من خلال JavaScript التعامل مع القيم الأولية Primitive values ل strings لان JavaScript يتعامل مع Primitive values على أساس انها objects عند تنفيذ methods , properties

بنحكي في هذا الدرس عن 
  • ()String trim
  • String Padding
  • ()padStart
  • ()padEnd
  • Extracting String Characters
  • ()String charAt
  • ()String charCodeAt
  • Property Access
  • Converting a String to an Array
  • ()JavaScript String split

تمام نشوف التفاصيل لكل method 

قطع النص ()JavaScript String trim

الفكرة بهذا الامر هي إزالة المسافات الفارغة white space على جوانب النص (يمين ـ يسار)

نطبق المثال التالي حتى نفهم الموضوع:

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Methods</h3>
<p id="Date"></p>
<script>
let text1 = "      Hi,      ";
let text2=" Welcome"
let reslt= text1+text2;
document.write( reslt.length);
document.write("<br>");
let text3 = text1.trim();
document.write( (text3+text2).length);
document.write("<br>");
</script>
</body>
</html> 

النتيجة: 

لاحظ طول كل string الأول بدون استخدام trim والثاني مع استخدام trim 


الحشو String Padding

تم إضافة هذا الامر في ECMAScript 2017 بحيث تم إضافة 2 methods :

()padStart : لإضافة Padding في بداية string

()padEnd : لإضافة padding في نهاية string 

نطبق امثله عليهم حتى نشوف 

()padStart

الفكره من هذا الامر هو تبطين string داخل string وpadding بتحدد بناء على Parameter رقم 1 المستخدمة. بحيث يكون هذا padding في بداية string الأصل.

مثال:

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String Methods</h3>
<p id="Date"></p>
<script>
let text = "hatem";
document.write( text.padStart(6,"layan"));
document.write("<br>");
</script>
</body>
</html> 

النتيجة :



الفكره : دمج النص المستخدم في الامر padStart مع النص الأصل بمقدار معين(parameter الأول)، حيث يتم التأكد من عدد الاحرف في string اذا كان اقل من parameter الأول وهو عدد الاحرف المطلوب عمل padding لها، اذا كان اقل بتم دمج احرف من string في padStart بعدد الاحرف الناقصة.
في المثال السابق عدد الاحرف في كلمة hatem يساوي 5 وطلبنا padStart بقيمة 6 بناء عليه بتم ارجاع حرف واحد من كلمة layan ودمجها مع hatem

()padEnd
الفكره من هذا الامر هو تبطين string داخل string وpadding بتحدد بناء على Parameter رقم 1 المستخدمة. بحيث يكون هذا padding في نهاية string الأصل.
مثال
نفس الكود السابق باستثناء تبدل padStart الى padEnd 
الكود:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String Methods</h3>
<p id="Date"></p>
<script>
let text = "hatem";
document.write( text.padEnd(6,layan));
document.write("<br>");
</script>
</body>
</html> 
النتيجة
كيفية الوصول او استخراج نص معين في string - Extracting String Characters
يمكن من خلال JavaScript استخراج جزء من النص باستخدام واحد من الطرق التالية:
  • charAt(position)
  • charCodeAt(position)
  • Property access [ ]
تمام نبدأ
()charAt
تستخدم هذه الطريقة لاستخراج حرف واحد بناء على مكان هذا الحرف في النص index (position)
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan";
document.write( text.charAt(2));
document.write("<br>");
</script>
</body>
</html> 
النتيجة 

طباعة الحرف y 
السبب ان مكان الحرف y في position رقم 2 ( حكينا سابقا ان position في string يبدأ من الرقم 0)

()charCodeAt
في هذه الطريقة يتم ارجاع Unicode للحرف بناء على مكان الحرف 
يتم ارجاع UTF-16 code (an integer between 0 and 65535) 
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan";
document.write( text.charCodeAt(2));
document.write("<br>");
</script>
</body>
</html> 
النتيجة : 
طباعة الرقم 121 وهو Unicode الخاص بالحرف y 

الوصول الى Property في النصوص. Property Access

يمكن من خلال JavaScript الوصول الى جزء معين باستخدام الاقواس []

مثال :
<!DOCTYPE html>
<html>
    <body onunload="">
        <h3>JavaScript Events</h3><p id="Date"></p>
        <script>
        var firstname="Layan lareen mlak"
        let char = firstname[0];
        document.write(char );
        document.write("<br>");
        </script>
        </body>
        </html>

النتيجة:

في Property Access يتم التعامل مع النصوص مثل المصفوفات (لكنها ليست كذلك)

وفي حال لم يتم العثور على حرف ، فإن [] ترجع undefined ، بينما تقوم ()charAt  بإرجاع empty string.

تقسيم String في JavaScript 

يمكن تحويل string إلى مصفوفة باستخدام طريقة ()split.

مثال:

<!DOCTYPE html>
<html>
    <body onunload="">
        <h3>JavaScript Events</h3><p id="Date"></p>
     <script>
        var firstname="Layan,lareen,mlak"
        const myArray = firstname.split(",");
        document.write(myArray[0] );
        document.write("<br>" );
        document.write(myArray[1]);
        document.write("<br>" );
        document.write(myArray[2]);
     </script>
   </body>
 </html>
النتيجة:
إذا تم حذف العلامه ، فإن المصفوفة التي تم إرجاعها ستحتوي على السلسلة الكاملة في index [0].