النصوص JavaScript Strings

-

بنحكي في هذا الدرس عن النصوص Strings JavaScript وهي متغيرات مخصصة لتخزين النصوص ومعالجتها. JavaScript

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

طريقة البناء والتركيب Syntax

var val = new String(string);

بنستخدم لتعريف string الكلمات الخاصة بالتعريف مثل var, let, const حسب الحاجه، بعد هيك اسم المتغير، ثم قيمة المتغير. 

مثال: 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Events</h3>
<p id="Date"></p>
<script>
var firstname="Layan lareen mlak"
document.write(
    firstname
              );
document.write("<br>");
</script>
</body>
</html> 
النتيجة:

الموضوع بسيط جدا عرفنا متغير باسم firstname وخزنا فيه القيمة  "Layan lareen mlak" وبعدها طبعنا النتيجة. 
اجباري عند التعامل مع string تكون القيمة بين علامات الاقتباس سواء single or double

لو ما اضفنا القيم داخل علامات الاقتباس شو النتيجة
عدل الكود السابق الى :

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Events</h3>
<p id="Date"></p>
<script>
var firstname=Layan lareen mlak
document.write(
    firstname
              );
document.write("<br>");
</script>
</body>
</html> 
النتيجة:

وفي المتصفح بتكون النتيجة: 

سبب الخطأ السابق ان JavaScript ما فهم شو المقصود بالقيمة Layan lareen mlak لأنها عبارة عن string لكن ما قدر يعالج العملية.
يمكن من خلال JavaScript القيام بمجموعه من العمليات على strings منها :

طول string - String Length
يمكن بكود بسيط معرفه كم طول النص الموجود داخل string 
المثال السابق لو بدنا نشوف كم طول النص داخل string بنستخدم الكود 

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Events</h3>
<p id="Date"></p>
<script>
var firstname="Layan lareen mlak";
let length = firstname.length;
document.write(
    firstname+" length:"+length
              );
document.write("<br>");
</script>
</body>
</html> 

النتيجة:

استخدمنا الامر length مع المتغير وخزنا النتيجة في متغير باسم length وبعدها طبعنا النتيجة.

إضافة علامات الاقتباس (double او single) 
يمكن استخدام علامات الاقتباس (double او single) داخل string بشرط ان لا يكون البداية والنهاية نفسها. مثال : 
نعدل على المثال السابق الى:

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Events</h3>
<p id="Date"></p>
<script>
var firstname="Layan 'lareen mlak";
document.write(
    firstname
              );
document.write("<br>");
firstname='Layan "lareen mlak';
document.write(
    firstname
              );
</script>
</body>
</html> 
النتيجة:

في الجملة الأولى اضفنا العلامة ' في الطباعة، وفي الجملة الثانية اضفنا العلامة ".
الفكرة حسب طريقة الاستخدام ممكن نضيف علامات الاقتباس إذا كانت string داخل "" ممكن نضيف العلامة ' واذا كانت string داخل العلامة '' ممكن نضيف "".

يوجد طريقة ثانيه في JavaScript يمكن من خلالها طباعه الرموز داخل النصوص من غير شروط وتسمى
Escape Character
الفكرة من هذه الطريقة استخدام الرمز \ لإضافة الرموز داخل string بدون مشاكل.
لنفهم الموضوع نعدل على المثال السابق الى:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Events</h3>
<p id="Date"></p>
<script>
var firstname="Layan "lareen" mlak";
document.write(
    firstname
              );
document.write("<br>");
firstname='Layan "lareen mlak';
document.write(
    firstname
              );
</script>
</body>
</html> 
النتيجة : 

لاحظ المشكلة طباعه العلامة " داخل string موجود داخل "" مشكلة لا يمكن عمل ذلك بالطريقة السابقة
لكن اكيد في حل، ولحل هذه المشكلة بنستخدم مفهوم Escape Character وهو إضافة العلامة \ قبل العلامة " 
حتى نفهم الموضوع نعدل على المثال الى:

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Events</h3>
<p id="Date"></p>
<script>
var firstname="Layan  \"lareen\" mlak";
document.write(
    firstname
              );
document.write("<br>");
</script>
</body>
</html> 
النتيجة 
بهذه الطريقة يمكن طباعه علامات الاقتباس دون شروط
تستخدم هذه العلامة لإدخال الرموز ('، " ، \) التالية في string ، طريقة الكتابة بتكون فقط  إضافة العلامه  \ قبل العلامات السابقه. 

مثال 
طباعه العلامة \ مع النص في المثال السابق :

نعدل الكود الى :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Events</h3>
<p id="Date"></p>
<script>
var firstname="Layan  \\lareen\\ mlak";
document.write(
    firstname
              );
document.write("<br>");
</script>
</body>
</html> 
النتيجة:
الجدول التالي ذكرنا فيه شو هي escape character المستخدمة في JavaScript

الكود
النتيجة 
\b
Backspace مسافة للخلف
\f

Form Feed  طباعة العلام  

\n
New Line سطر جديد
\r
Carriage Return
\t
Horizontal Tabulator
\v
Vertical Tabulator
تم تصميم escape characters الستة أعلاه في الأصل للتحكم في typewriters وteletypes وfax machines. لا معنى لها في HTML.

كسر أسطر التعليمات البرمجية الطويلة Breaking Long Code Lines

يفضل تجنب كتابة الأكواد الطويلة في سطر واحد وعادتا ما يتم تقسيم السطور الطويلة (تزيد عن 80 حرف) الى أكثر من سطر. وليتم تنفيذ هذا الكلام في JavaScript يجب استخدام العلامة \ لذلك. هذه العلامة تعني ل Javascript حتى لو كان الأكواد في أكثر من سطر هي سطر واحد. 
نعدل المثال السابق الى:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Events</h3>
<p id="Date"></p>
<script>
var firstname="Layan \
lareen \
mlak";
document.write(
    firstname
              );
document.write("\t");
</script>
</body>
</html> 
النتيجة 
النتيجة سطر واحد فقط. 

استخدام الطريقة \ ليست هي الطريقة المفضلة. حيث ان بعض المتصفحات لا تسمح بمسافات خلف العلامة \. لذا افضل طريقة لتقسم الكود هو استخدام العلامة + 
نعدل الكود السابق الى :

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Events</h3>
<p id="Date"></p>
<script>
var firstname="Layan "+
"lareen "+
"mlak";
document.write(
    firstname
              );
document.write("\t");
</script>
</body>
</html> 
النتيجة 
نفس النتيجة لكن الطريقة مختلفة. 
الفكرة من الطريقة السابقة هي تجميع مجموعة strings مع بعض كل string في سطر مستقل.