ما سيتم إضافته إلى JavaScript في عام 2020

في الآونة الأخيرة ، انتقلت السلسلة الاختيارية والقيمة الافتراضية للسمة ( Nullish Coalescing ) إلى الخطوة الرابعة والأخيرة من عملية TC39.

في الممارسة العملية ، هذا يعني أن هذه وغيرها من الابتكارات ستصبح جزءًا من معيار JavaScript بالفعل في هذا ، 2020. سننظر فيها في هذه المقالة.

يمكنك تتبع دعم المتصفح هنا ("ميزات 2020") - تقريبًا. العابرة.

String.prototype.matchAll

قد لا يكون استخدام تعبيرات عادية لزجة أو عالمية ، عندما تحتاج إلى التقاط مجموعات متعددة على نفس الخط ، أمرًا بسيطًا.

لا يُرجع String.prototype.match المجموعات الملتقطة بحضور علامة عمومية ، وبدون ذلك يمكنك الحصول على أول تطابق كامل للقالب ومجموعته.

مثال:

let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; const results = str.match(regexp); console.log(results); 

النتيجة مع العلم "g"

النتيجة بدون علم "g"

باستخدام String.prototype.matchAll يضمن أن يتم إرجاع جميع التطابقات ومجموعاتها.

مثال:

 let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; let array = [...str.matchAll(regexp)]; console.log(array); 

النتيجة:

BIGINT

قبل BigInt ، كانت أكبر قيمة يمثلها الرقم هي 2⁵³-1 (MAX_SAFE_INTEGER). سيكون جافا سكريبت الآن بدائية يمكن أن تتجاوز الحد.

يمكنك إنشاء BigInt عن طريق إضافة 'n' إلى رقم أو باستخدام وظيفة BigInt ().

مثال:

 let bigInt = 4n console.log(bigInt * bigInt) 

• BigInt لا يعادل الرقم ، ولكن يمكن أن يلقي لهذا الأخير.
• عند إجراء عمليات مثل التقسيم ، سيتم تقريب النتيجة إلى أقرب كلي.
• لا يمكن استخدامها مع الرقم دون نوع الصب.

تحاول إضافة BigInt برقم ...

 let bigInt = 4n + 2 console.log(bigInt) 

... ينتج استثناء:

globalThis

كان الوصول إلى الكائنات العالمية في عالم JavaScript دائمًا بمثابة صداع. يجب أن تكون على دراية ببناء الجملة المحدد للبيئة ، والذي يخلق صعوبات غير ضرورية عند كتابة التعليمات البرمجية المحمولة ويجعل من الضروري استخدام شيء مثل getGlobal.

مثال:

 var getGlobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new Error('no global object found'); }; var globals = getGlobal(); 

مع ظهور globalThis ، يمكنك التوقف عن التفكير في البيئة وتوحيد الكائنات العالمية.

مثال:

 globalThis.someFunction = () => 'hello' console.log(globalThis.someFunction()) 

Promise.allSettled

افترض أن لديك بعض الوعود ، وتريد أن تفعل شيئًا بعد الانتهاء منها (لا يهم إذا كان ناجحًا أم لا). Promise.allSettled هو لهذا الغرض بالذات.

مثال:

 const fulfilledPromise = Promise.resolve("success"); const rejectedPromise = Promise.reject("error") const promises = [fulfilledPromise, rejectedPromise]; Promise.allSettled(promises). then((results) => results.forEach((result) => console.log(result))); 

النتيجة:

استيراد ديناميكي

تريد تحميل وحدة نمطية في وقت التشغيل ، وهذا يتوقف على حالة معينة؟ الآن يمكن أن يتم ذلك دون مكتبات الطرف الثالث.

يكفي استدعاء وظيفة الاستيراد ، والتي ستعود الوعد.

مثال:

 import("some_module") .then(module => { module.doSomething(); }) .catch(err => { console.error(err.message); }); 

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

مثال باستخدام قالب:

 import(`${some_module}.js`) .then(module => { module.doSomething(); }) .catch(err => { console.error(err.message); }); 

الائتلاف لاذع

عندما تحتاج إلى الحصول على سمة أو قيمة افتراضية ، إذا كانت فارغة أو غير معرّفة ، فإننا نستخدم عامل التشغيل "||" عادةً.

قبل الإئتلاف الناقص:

 const response = someResponse.properties.mayBeUndefined || 'Response'; 

تخيل ، مع ذلك ، أن السمة لها قيمة "خاطئة".

مشكلة استخدام '|':

 const someResponse = {properties: { mayBeUndefined: ''}} const response = someResponse.properties.mayBeUndefined || 'Response'; console.log(response) 

النتيجة:

هذا هو سلوك غير مرغوب فيه. في هذه الحالة ، كنا بحاجة إلى قيمة سمة ، وليس قيمة افتراضية.

مع Nullish ائتلاف هذه المشكلة لن تكون. سيتم إرجاع القيمة الافتراضية فقط للسمات الفارغة أو غير المحددة .

باستخدام Nullish ائتلاف:

 const someResponse = {properties: { mayBeUndefined: ''}} const response = someResponse.properties.mayBeUndefined ?? 'Response'; console.log(response) 

النتيجة:

تسلسل اختياري

للوصول إلى السمة الفرعية ، نحتاج إلى التأكد من وجود السمة أعلاه. حتى الآن ، يجب التحقق من وجود كل من السمات الزائدة يدويًا.

قبل التسلسل الاختياري:

 const someObj = { property: 'prop', otherProperty: { name: 'prop2' } }; const property = someObj.NotOtherProperty ? someObj.NotOtherProperty.name: undefined; console.log(property); 

مع ظهور الاختياري Chaining ، يمكنك استخدام المشغل "؟" للوصول الاختياري إلى السمات الفرعية. الرمز أدناه مكافئ للرمز أعلاه.

باستخدام تسلسل اختياري:

 const someObj = { property: 'prop', otherProperty: { name: 'prop2' } }; const property = someObj.NotOtherProperty?.name; console.log(property); 

يجعل Chaining الاختياري الكود أكثر نظافة ، خاصةً إذا كانت هناك الكثير من السمات في السلسلة.

استنتاج

يمكنك محاولة تشغيل أمثلة من مقال في وحدة التحكم: بعضها مطبق بالفعل في أحدث إصدارات المتصفحات ، ومن المحتمل أن يتم تطبيق البعض الآخر قريبًا. بطريقة أو بأخرى ، من الممكن بالفعل البدء في الارتباط بالإمكانيات الواردة في المقالة كجزء من لغة 2020.