خطأ جافا سكريبت - Throw و Try to Catch

try الجملة تسمح لك باختبار الأخطاء في الكود.

catch الجملة تسمح لك بمعالجة الأخطاء.

throw جملة تسمح لك بإنشاء أخطاء مخصصة.

finally يسمح لك بتنفيذ الكود، في try و catch، بغض النظر عن النتيجة.

الخطأ سيحدث دائمًا!

عند تنفيذ كود JavaScript، يمكن أن تحدث أنواع مختلفة من الأخطاء.

قد تكون الأخطاء أخطاء برمجة من قبل المبرمج، أو أخطاء بسبب إدخال غير صحيح، أو بسبب مشاكل غير متوقعة أخرى.

مثال

في هذا المثال، نستخدم alert كتابة كود تنبيه لتحفيز خطأ متعمد:

<p id="demo"></p>
<script>
try {
    alert("مرحبًا بك في الزيارة!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

جرب بنفسك

JavaScript يأخذ alert كخطأ، ثم ي�行ر على كود لمعالجة الخطأ.

JavaScript try و catch

try الجملة تسمح لك بتحديد كود، حتى يتم الكشف عن الأخطاء أثناء التنفيذ.

catch الجملة تسمح لك بتحديد كود للتنفيذ، إذا حدث خطأ في كود try.

تعليمات JavaScript try و catch يظهر بشكل مزدوج:

try {
     كود للاختبار
}
 catch(err) {
     كود معالجة الخطأ
}

JavaScript يرفع خطأ

عند حدوث خطأ، يُتوقف JavaScript عادةً ويظهر رسالة خطأ.

يُصطلح بهذا الشكل:سيقوم JavaScript بإلقاء استثناء (إلقاء خطأ).

سيقوم JavaScript بإنشاء استثناء يحتوي على اثنين من الخصائص: Object Error:name و message.

جملة throw

throw جملة تسمح لك بإنشاء أخطاء مخصصة.

تقنيًا يمكنكإلقاء استثناء (إلقاء خطأ).

يمكن أن تكون الاستثناءات أيًا من JavaScript النصية، أو الرقمية، أو الحقيقية، أو الأشياء:

throw "Too big";    // نص استثناء
throw 500;          // رمز استثناء

إذا كان throw مع try و catch باستخدامها معًا، يمكنك التحكم في مسار البرنامج وتوليد رسائل أخطاء مخصصة.

مثال التحقق من الإدخال

سيقوم هذا المثال بالتحقق من الإدخال. إذا كان القيمة خاطئة، سيتم إلقاء استثناء (err).

يتم التقاطع لهذا الاستثناء (err) بواسطة جملة catch ويُعرض رسالة خطأ مخصصة:

<!DOCTYPE html>
<html>
<body>
<p>أدخل رقم بين 5 و 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">اختبار الإدخال</button>
<p id="message"></p>
<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw " فارغ ";
         if(isNaN(x)) throw "ليس رقم";
         x = Number(x);
        if(x < 5) throw " صغير ";
        if(x > 10) throw " كبير ";
    }
    catch(err) {
        message.innerHTML = "الإدخال هو " + err;
    }
}
</script>
</body>
</html>

جرب بنفسك

التحقق من HTML

هذا الكود مجرد مثال.

عادة ما يدمج المتصفحات الحديثة JavaScript مع التحقق المدمج في HTML باستخدام قواعد التحقق المسبقة المحددة مسبقًا المحددة في خصائص HTML:

<input id="demo" type="number" min="5" max="10" step="1">

ستتعلم المزيد عن التحقق من صحة النماذج في الفصول اللاحقة من هذا الدليل.

جملة finally

finally الجملة تسمح لك بتنفيذ الكود بعد try و catch، مهما كانت النتيجة:

try {
     // كود للاختبار
}
 catch(err) {
     // كود معالجة الأخطاء
} 
finally {
     // أي كود يتم تنفيذه مهما كان النتيجة
}

مثال

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "vakut";
        if(isNaN(x)) throw "ليس رقم";
         x = Number(x);
        if(x >  10) throw "كبير جدا";
        if(x <  5) throw "صغير جدا";
    }
    catch(err) {
        message.innerHTML = "خطأ: " + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

جرب بنفسك

Object Error

يملك JavaScript object error مدمج يقدم معلومات عن الأخطاء عند حدوثها.

يقدم object error الخاص بـ JavaScript اثنين من الخصائص المفيدة:name و message.

خصائص Object Error

الخصائص وصف
name تعيين أو العودة إلى اسم الخطأ
message تعيين أو العودة إلى رسالة الخطأ (خطأ من نوع字符串)

قيم اسم الخطأ

يمكن لـ name الخاص بـ error العودة إلى ستة قيم مختلفة:

اسم الخطأ وصف
EvalError حصل خطأ في دالة eval()
RangeError حصل خطأ في نطاق الرقم
ReferenceError حصل خطأ في الاستدلال غير المشروع
SyntaxError حصل خطأ نحوي
TypeError حصل خطأ في النوع
URIError الخطأ الذي حصل في encodeURI()

سأوضح لك التفاصيل الستة المختلفة لهذه القيم.

خطأ في التقييم

EvalError إشارات إلى أخطاء في دالة eval()

إصدارات JavaScript المحدثة لن ترفع أي EvalErrorالرجاء استخدام SyntaxError استبدلها.

خطأ في النطاق

RangeError سيتم إلقاءها عند استخدامك رقم خارج نطاق القيم المقبولة

على سبيل المثال: لا يمكنك تعيين عدد الأرقام الفعالة للرقم إلى 500.

مثال

var num = 1;
try {
    num.toPrecision(500);   // لا يمكن للعدد امتلاك 500 من الأرقام الفعالة
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

جرب بنفسك

خطأ في الاستدلال

إذا كنت تستخدم (استدلال) متغير لم يتم إعلانه بعد، فإن ReferenceError سيتم إلقاءها:

مثال

var x;
try {
    x = y + 1;   // لا يمكن استخدام y (الاستدلال)
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

جرب بنفسك

خطأ نحوي

إذا قمت بحساب كود يحتوي على أخطاء نحوية، فإن SyntaxError تم إلقاءها:

مثال

try {
    eval("alert('Hello)");   // عدم وجود ' سينتج عنه خطأ
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

جرب بنفسك

خطأ في النوع

إذا كان القيمة التي تستخدمها ليست في نطاق القيم المتوقعة، فإن TypeError تم إلقاءها:

مثال

var num = 1;
try {
    num.toUpperCase();   // لا يمكنك تحويل الرقم إلى حروف كبيرة
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

جرب بنفسك

خطأ URI

إذا كنت تستخدم حروف غير قانونية في وظيفة URI، فإن URIError تم إلقاءها:

مثال

try {
    decodeURI("%%%");   // لا يمكنك تشفير هذه النقاط المئوية كـ URI
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

جرب بنفسك

خصائص العنصر غير المعاييرية للـ Error

Mozilla و Microsoft قد أعدما تعريف خصائص العنصر غير المعاييرية للـ error:

  • fileName (Mozilla)
  • lineNumber (Mozilla)
  • columnNumber (Mozilla)
  • stack (Mozilla)
  • description (Microsoft)
  • number (Microsoft)

لا تستخدم هذه الخاصيات في المواقع العامة. لا تعمل هذه الخاصيات في جميع المتصفحات.