JavaScript String Methods Part 1

-

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

تمام نفهم شو يعني هذا الحكي. 
بنحكي في هذا الدرس عن methods  التالية :

  • Extracting String Parts
  • ()String slice
  • ()String substring
  • ()String substr
  • String Content
  • regular expression
  • Upper and Lower Case
  • ()String concat

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

تقسيم string الي أجزاء Extracting String Parts

الفكرة هون: إمكانية تقسيم القيم في string والوصول الى أجزاء مختلفة منها.
يدعم JavaScript عدة طرق للتعامل مع string parts وهذه الطرق methods  هي :
  • slice(start, end)
  • substring(start, end)
  • substr(start, length)
تمام نفهم شو المقصود بها
الطريقة الأولى ()slice
تعمل هذه method على استخراج جزء من string ويعيد الجزء المستخرج في string جديدة.
يتم ارسال 2 parameters 
  • موضع البداية start position
  • وموضع النهاية end position (اختياري لن يتم احتسابه وتضمينه في النتيجة).
مثال :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Events</h3>
<p id="Date"></p>
<script>
var firstname="Layan lareen mlak";
var SliceValue = firstname.slice(6,12);
document.write(
    SliceValue
              );
document.write("<br>");
</script>
</body>
</html> 
النتيجة: 

نفهم الكود 
عرفنا متغير باسم SliceValue يحتوي هذا المتغير على قيمة تبدأ من index رقم 6 وينتهي ب index رقم 12 والنتيجة طباعة كلمة lareen 
Index رقم 12 هو المسافة الفارغة بعد كلمة lareen والسبب في تحديد هذا الرقم هو ان اخر position في slice غير محسوب فا ما بدنا ترجع القيمة الفارغة. لو جربت تغير position الى 11 بتكون النتيجة :
Laree
الحرف الأخير n ما رجع لان موجود في position رقم 11 
رقم index الأول في string يساوي 0
تمام 
حكينا ان parameter  رقم 2 اختياري يعني ممكن ما نرسل قيمة لهاذ parameter  
نشوف النتيجة 
طبق الكود التالي: 

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Methods</h3>
<p id="Date"></p>
<script>
var firstname="Layan lareen mlak";
var SliceValue = firstname.slice(6);
document.write(
    SliceValue
              );
document.write("<br>");
</script>
</body>
</html> 
النتيجة 
في حال ما تم ارسال parameter  رقم 2 بكون الافتراضي نهاية string يعني بتكون النتيجة من position المرسل في parameter  رقم 1 وحتي نهاية string وبناء عليه كانت النتيجة : 
lareen mlak
استخدام parameter  بقيم سالبة negative
إذا كانت parameter  سالبة ، يتم حساب position من نهاية string.
نطبق مثال :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Methods</h3>
<p id="Date"></p>
<script>
var firstname="Layan lareen mlak";
var SliceValue = firstname.slice(-12,-5);
document.write(
    SliceValue
              );
document.write("<br>");
</script>
</body>
</html> 
النتيجة :
الطريقة الثانية ()substring
تشبه طريقة ()substring طريقة  ()slice لكن الفرق الوحيد : في ()substring اذا كانت قيم البداية start والنهاية end الأقل من 0 يتم التعامل معها على أنها 0
مثال:

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Methods</h3>
<p id="Date"></p>
<script>
var firstname="Layan lareen mlak";
var SliceValue = firstname.substring(6,12);
document.write(
    SliceValue
              );
document.write("<br>");
</script>
</body>
</html> 
النتيجة:
تمام شو لو عملنا البداية اقل من صفر 
طبق المثال التالي: 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Methods</h3>
<p id="Date"></p>
<script>
var firstname="Layan lareen mlak";
var SliceValue = firstname.substring(-6,12);
document.write(
    SliceValue
              );
document.write("<br>");
</script>
</body>
</html> 
النتيجة : 
قيمة البداية ارسلناها تساوي -6 وبالتالي تم ارجاع النتيجة من بداية string 
في حال حذف second parameter، فإن سيتم احتساب النهاية نهاية string 
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Methods</h3>
<p id="Date"></p>
<script>
var firstname="Layan lareen mlak";
var SliceValue = firstname.substring(-6);
document.write(
    SliceValue
              );
document.write("<br>");
</script>
</body>
</html>
النتيجة: 
الطريقة الثالثة ()substr

()substr  يشبه ()slice. الفرق هو أن second parameter تحدد طول الجزء المستخرج. 
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Methods</h3>
<p id="Date"></p>
<script>
var firstname="Layan lareen mlak";
var SliceValue = firstname.substr(6,9);
document.write(
    SliceValue
              );
document.write("<br>");
</script>
</body>
</html> 
النتيجة:
لاحظ ان البداية من position رقم 6 والنهاية كانت عند position رقم 14
السبب ان هذه الطريقة بتعمل على تحديد البداية حسب parameter  الأول والنهاية بتكون:
 position ل parameter الأول + قيمة parameter  الثاني 
في المثال السابق 
البداية تساوي 6
النهاية تساوي : 6+9  وتساوي 15

في حال تم حذف second parameter، فسيتم احتساب النهاية نهاية string 
إذا كانت parameter  سالبة ، يتم حساب position من نهاية string.

الاستبدال Replacing String Content
يمكن في JavaScript استبدال نص باخر في string ولتنفيذ ذلك بنستخدم الامر ()replace 
تكتب بهذا الشكل غير ذلك ستكون النتيجة خطأ
تركيب الجملة:
stringName.replace("Old World", "New World")
نطبق مثال حتى نفهم الموضوع: 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Methods</h3>
<p id="Date"></p>
<script>
let firstname="Layan hatem";
let FullName= firstname.replace("hatem", "Altalafhas")
document.write(
    FullName
              );
document.write("<br>");
</script>
</body>
</html> 
النتيجة:
في المثال السابق استبدلنا كلمة hatem ب Altalafhas

تمام نجرب المثال التالي (استبدل نص غير متطابق مع النص الأصل)

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Methods</h3>
<p id="Date"></p>
<script>
let firstname="Layan hatem";
let FullName= firstname.replace("LayanHa", "Altalafhas")
document.write(
    FullName
              );
document.write("<br>");
</script>
</body>
</html> 
النتيجة:
لاحظ ان بحثنا عن الكلمة LayanHa وهاذي الكلمة غير موجوده في النص السابق لذلك بتكون النتيجة إعادة النص كامل.
في حال تكرار النص المطابق المراد استبداله في string فسيتم استبدال اول نص مطابق فقط .
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Methods</h3>
<p id="Date"></p>
<script>
let firstname="Layan hatem Layan";
let FullName= firstname.replace("Layan", "Altalafhas")
document.write(
    FullName
              );
document.write("<br>");
</script>
</body>
</html> 
النتيجة:

بالرغم من وجود الكلمة Layan مرتين، الا ان عملية الاستبدال تمت فقط على اول كلمة.

يمكن استبدل جميع النصوص المكررة باستخدام regular expression 
لتطبيق هذا الحكي بنستخدم العلامة /g 
شكل الكود بكون 
/world/g
نطبق المثال السابق مع تعديل بسيط الكود:

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Methods</h3>
<p id="Date"></p>
<script>
let firstname="Layan hatem Layan";
let FullName= firstname.replace(/Layan/g, "Altalafhas")
document.write(
    FullName
              );
document.write("<br>");
</script>
</body>
</html> 
النتيجة 

اكيد لاحظت ان تم استبدال جميع الكلمات Layan بالكلمة Altalafhas والسبب استخدام العلامة g/ 

case sensitive Replace
عملية الاستبدال هي عملية case sensitive بمعن أي اختلاف في حالة الاحرف تعتبر غير مطابقة. 
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Methods</h3>
<p id="Date"></p>
<script>
let firstname="Layan hatem Layan";
let FullName= firstname.replace("layan", "Altalafhas")
document.write(
    FullName
              );
document.write("<br>");
</script>
</body>
</html> 
النتيجة:

بسبب اختلاف الحرف L في string تساوي L بينما في الاستبدال تساوي l في هذه الحالة تعتبر غير مطابقه.

Replace insensitive
يمكن الغاء case sensitive في replace باستخدام العلامة i/ وتسمى هذه العلامات ب regular expression والتي تعني (insensitive)
بكون شكل الكود 
/world/i
لكن بدون اضافة علامات الاقتباس

في المثال السابق نعدل عليه بالشكل التالي:

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Methods</h3>
<p id="Date"></p>
<script>
let firstname="Layan hatem Layan";
let FullName= firstname.replace(/layan/i, "Altalafhas")
document.write(
    FullName
              );
document.write("<br>");
</script>
</body>
</html> 

النتيجة:



تحويل حالة الاحرف Converting to Upper and Lower Case
يمكن تحويل حالة الاحرف من الصغير الى الكبير والعكس باستخدام:

()toUpperCase : تحويل جميع النصوص الى احرف كبيره upper case
()toLowerCase: تحويل جميع النصوص الى احرف صغيره lower case
مثال 

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Methods</h3>
<p id="Date"></p>
<script>
let firstname="Layan hatem Layan";
let UpperCase= firstname.toUpperCase();
let LowerCase= firstname.toLowerCase();
document.write( UpperCase );
document.write("<br>");
document.write( LowerCase );
</script>
</body>
</html> 
النتيجة:

الدمج ()JavaScript String concat
يمكن دمج اكثر من سلسله مع بعض باستخدام الكود ()concat
مثال :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Methods</h3>
<p id="Date"></p>
<script>
let firstname="Layan";
let SecondName="Hatem"
let FullName=firstname.concat(" ",SecondName);
document.write( FullName);
document.write("<br>");
</script>
</body>
</html> 
النتيجة:
عرفنا 2 متغيرات، المتغير الأول بقيمة Layan والمتغير الثاني بقيمة Hatem والمتغير الثالث دمجنا المتغيرين الأول والثاني. واضفنا مسافه بينهم واخر اشي طبعنا النتيجة.
عملية الدمج باستخدام concat تعادل استخدام إشارة الجمع + الطريقتين الهم نفس النتيجة.