لنتحدث عن الفاصلة المنقوطة في JavaScript

لاستخدامها أو عدم استخدامها ...

تقسم الفاصلة المنقوطة في JavaScript المجتمع. يفضل البعض استخدامها دائمًا ، بغض النظر عن السبب. يحب الآخرون تجنبها.

لقد أجريت استطلاعًا على Twitter لاختبار الوضع ، ووجدت الكثير من مؤيدي الفاصلة المنقوطة:

بعد استخدام الفاصلة المنقوطة لسنوات ، قررت في خريف عام 2017 محاولة تجنبها عندما أستطيع ذلك. قمت بإعداد Prettier لإزالة الفواصل المنقوطة تلقائيًا من الكود الخاص بي ، ما لم يكن هناك بنية كود معينة تتطلبها.

الآن أجد أنه من الطبيعي تجنب الفاصلة المنقوطة ، وأعتقد أن الكود يبدو أفضل وأكثر نظافة للقراءة.

كل هذا ممكن لأن JavaScript لا تتطلب فاصلة منقوطة بشكل صارم. عندما يكون هناك مكان يحتاج إلى فاصلة منقوطة ، فإنه يضيفها خلف الكواليس.

وهذا ما يسمى الإدراج التلقائي للفاصلة المنقوطة .

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

قواعد JavaScript Automatic Semicolon Insertion

سيضيف محلل JavaScript تلقائيًا فاصلة منقوطة عندما يجد هذه المواقف المعينة أثناء تحليل شفرة المصدر:

  1. عندما يبدأ السطر التالي برمز يكسر السطر الحالي (يمكن أن ينتشر الرمز على عدة أسطر)
  2. عندما يبدأ السطر التالي بـ a }، يتم إغلاق الكتلة الحالية
  3. عند الوصول إلى نهاية ملف التعليمات البرمجية المصدر
  4. عندما يكون هناك returnبيان على السطر الخاص به
  5. عندما يكون هناك breakبيان على السطر الخاص به
  6. عندما يكون هناك throwبيان على السطر الخاص به
  7. عندما يكون هناك continueبيان على السطر الخاص به

أمثلة على التعليمات البرمجية التي لا تفعل ما تعتقده

بناءً على هذه القواعد ، إليك بعض الأمثلة.

خد هذا:

const hey = 'hey'const you = 'hey'const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

ستحصل على الخطأ Uncaught TypeError: Cannot read property 'forEach' of undefinedلأنه بناءً على القاعدة 1، يحاول JavaScript تفسير الكود على أنه

const hey = 'hey';const you = 'hey';const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

هذا الجزء من الكود:

(1 + 2).toString()

المطبوعات "3".

const a = 1const b = 2const c = a + b(a + b).toString()

بدلاً من ذلك ، فإنه يثير TypeError: b is not a functionاستثناءً ، لأن JavaScript يحاول تفسيره على أنه

const a = 1 const b = 2 const c = a + b(a + b).toString()

مثال آخر على القاعدة 4:

(() => { return { color: 'white' }})()

كنت تتوقع أن تكون القيمة المرجعة لهذه الوظيفة التي تم استدعاؤها فورًا كائنًا يحتوي على colorالخاصية ، ولكنها ليست كذلك. بدلاً من ذلك undefined، لأن JavaScript يقوم بإدراج فاصلة منقوطة بعد ذلك return.

بدلاً من ذلك ، يجب عليك وضع قوس الفتح بعد return:

(() => { return { color: 'white' }})()

كنت تعتقد أن هذا الرمز يظهر "0" في تنبيه:

1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

لكنه يظهر 2 بدلاً من ذلك ، لأن JavaScript (وفقًا للقاعدة 1) يفسرها على النحو التالي:

1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

استنتاج

كن حذرًا - بعض الناس لديهم رأي شديد بشأن الفاصلة المنقوطة. بصراحة لا يهمني. تعطينا الأداة خيار عدم استخدامها ، حتى نتمكن من تجنب الفاصلة المنقوطة إذا أردنا ذلك.

أنا لا أقترح أي شيء من جانب أو آخر. فقط اتخذ قرارك بناءً على ما يناسبك.

بغض النظر ، نحتاج فقط إلى إيلاء القليل من الاهتمام ، حتى لو لم تظهر هذه السيناريوهات الأساسية في التعليمات البرمجية في معظم الأوقات.

اختر بعض القواعد:

  • كن حذرًا مع returnالعبارات. إذا قمت بإرجاع شيء ما ، قم بإضافته على نفس السطر مثل الإرجاع (نفس الشيء لـ break، throw، continue)
  • لا تبدأ أبدًا سطرًا بأقواس ، حيث قد يتم ربطها بالسطر السابق لتكوين استدعاء دالة ، أو مرجع عنصر مصفوفة

وفي النهاية ، اختبر الكود دائمًا للتأكد من أنه يفعل ما تريد.

أقوم بنشر برنامج تعليمي مجاني واحد للبرمجة يوميًا على موقع flaviocopes.com ، تحقق من ذلك!

نُشر في الأصل على موقع flaviocopes.com.