إليك أمثلة على كل شيء جديد في ECMAScript 2016 و 2017 و 2018

من الصعب تتبع الجديد في JavaScript (ECMAScript). ويصعب العثور على أمثلة تعليمات برمجية مفيدة.

لذا في هذه المقالة ، سأغطي جميع الميزات الـ 18 المدرجة في مقترحات TC39 النهائية التي تمت إضافتها في ES2016 و ES2017 و ES2018 (المسودة النهائية) وأظهر لهم أمثلة مفيدة.

هذا منشور طويل جدًا ولكن يجب أن يكون سهل القراءة. فكر في هذا على أنه "قراءة شاملة من Netflix". في نهاية هذا ، أعدك أن لديك الكثير من المعرفة حول جميع هذه الميزات.

حسنًا ، دعنا نراجع هذه واحدة تلو الأخرى.

1. الصفيف. النموذج. يتضمن

يتضمن طريقة مثيل بسيطة على الصفيف وتساعد في العثور بسهولة على ما إذا كان عنصر ما في الصفيف (بما في ذلك NaN على عكس indexOf).

ECMAScript 2016 أو ES7 - Array.prototype.includes ()
التوافه: مواصفات جافا سكريبت التي أراد الناس تسميتها تحتوي ، ولكن يبدو أن Mootools قد استخدمها بالفعل على ما يبدو حتى استخدموها.

2. عامل إنكس الأسي

تحتوي العمليات الحسابية مثل الجمع والطرح على عوامل infix مثل + و- ، على التوالي. على غرارهم ، يستخدم عامل التشغيل ** infix بشكل شائع للتشغيل الأسي. في ECMAScript 2016 ، تم تقديم ** بدلاً من Math.pow.

ECMAScript 2016 أو ES7 - ** مُعامِل معلومات الأس

1. Object.values ​​()

Object.values ​​() هي وظيفة جديدة تشبه Object.keys () ولكنها تُرجع جميع قيم خصائص الكائن باستثناء أي قيمة (قيم) في السلسلة النموذجية.

ECMAScript 2017 (ES8) - Object.values ​​()

2. Object.entries ()

يرتبط Object.entries () بـ Object.keys ، ولكن بدلاً من إرجاع المفاتيح فقط ، فإنها ترجع كلاً من المفاتيح والقيم بطريقة الصفيف. هذا يجعل من السهل جدًا القيام بأشياء مثل استخدام الكائنات في حلقات أو تحويل الكائنات إلى خرائط.

مثال 1:

ECMAScript 2017 (ES8) - استخدام Object.entries () في الحلقات

مثال 2:

ECMAScript 2017 (ES8) - استخدام Object.entries () لتحويل الكائن إلى خريطة

3. حشو سلسلة

تمت إضافة طريقتين من المثيلات إلى String - String.prototype.padStart و String.prototype.padEnd - والتي تسمح بإلحاق / إحضار إما سلسلة فارغة أو سلسلة أخرى إلى بداية السلسلة الأصلية أو نهايتها.

'someString'.padStart (numberOfCharcters [، stringForPadding]) ؛ 
'5'.padStart (10) //' 5 '' 5'.padStart (10، '= *') // '= * = * = * = * = 5'
'5'.padEnd (10) //' 5 '' 5'.padEnd (10، '= *') // '5 = * = * = * = * ='
يكون هذا مفيدًا عندما نريد محاذاة الأشياء في سيناريوهات مثل عرض طباعة جميل أو طباعة طرفية.

3.1 لوحة البدء مثال:

في المثال أدناه ، لدينا قائمة بأرقام مختلفة الأطوال. نرغب في إضافة "0" مسبقًا بحيث يكون لجميع العناصر نفس طول 10 أرقام لأغراض العرض. يمكننا استخدام padStart (10 ، "0") لتحقيق ذلك بسهولة.

ECMAScript 2017 - مثال padStart

3.2 لوحة نهاية مثال:

تُعد padEnd مفيدة حقًا عندما نقوم بطباعة عناصر متعددة ذات أطوال مختلفة ونريد محاذاة اليمين بشكل صحيح.

المثال أدناه هو مثال واقعي جيد لكيفية جمع padEnd و padStart و Object.entries معًا لإنتاج مخرجات جميلة.

ECMAScript 2017 - مثال على padEnd و padStart و Object.Entries
سيارات const = {'BMW': '10'، 'Tesla': '5'، 'amLamborghini': '0'}
Object.entries (السيارات) .map (([name، count]) => {// padEnd يلحق '-' حتى يصبح الاسم 20 حرفًا // يلحق padStart '0' حتى يصبح العدد 3 أحرف. `$ {name.padEnd (20، '-')} العدد: $ {count.padStart (3، '0')}`)}) ؛
// مطبوعات .. // BMW - - - - - - - - العدد: 010 //  تسلا - - - - - - العدد: 005 // amLamborghini - - - العدد: 000

3.3 pad بدء و padEnd على الرموز التعبيرية وغيرها من الأحرف ثنائية البايت

يتم تمثيل الرموز التعبيرية وغيرها من الأحرف ثنائية البايت باستخدام وحدات بايت متعددة من unicode. لذا قد لا يعمل padStart و padEnd كما هو متوقع!

على سبيل المثال: لنفترض أننا نحاول حشو قلب السلسلة للوصول إلى 10 أحرف باستخدام رمز emoji. ستبدو النتيجة أدناه:

// لاحظ أنه بدلاً من 5 قلوب ، هناك قلبان فقط وقلب واحد يبدو غريباً! 'heart'.padStart (10، "") ؛ // يطبع .. "قلب"

وذلك لأن عبارة عن نقطتي رمز طويلتين ('\ u2764 \ uFE0F')! كلمة القلب نفسها تتكون من 5 أحرف ، لذا لم يتبق لدينا سوى 5 أحرف متبقية. لذا ما يحدث هو أن JS وسادة قلوب اثنين باستخدام "\ u2764 \ uFE0F" وينتج . بالنسبة للأخيرة ، يستخدم ببساطة البايت الأول للقلب الذي ينتج ❤

لذا ننتهي بـ: قلب

ملاحظة: يمكنك استخدام هذا الرابط للتحقق من تحويلات char unicode.

4. Object.getOwnPropertyDescriptors

تُرجع هذه الطريقة جميع التفاصيل (بما في ذلك طرق getter getand setter set) لجميع خصائص كائن معين. الدافع الرئيسي لإضافة هذا هو السماح بنسخ / استنساخ كائن ما في كائن آخر ينسخ أيضًا وظائف getter و setter بدلاً من Object. عين.

Object. عين الضبط نسخ جميع التفاصيل باستثناء وظائف getter و setter للكائن المصدر الأصلي.

يوضح المثال أدناه الفرق بين Object.assign و Object.getOwnPropertyDescriptors جنبًا إلى جنب مع Object.defineProperties لنسخ سيارة الكائن الأصلي إلى كائن جديد ElectricCar. سترى أنه باستخدام Object.getOwnPropertyDescriptors ، يتم أيضًا نسخ دالات getter و setter للخصم في الكائن الهدف.

قبل…

قبل - استخدام Object.assign

بعد…

ECMAScript 2017 (ES8) - Object.getOwnPropertyDescriptors
var Car = {name: 'BMW'، price: 1000000، set discount (x) {this.d = x؛ } ، احصل على خصم () {return this.d؛ } ،} ؛
// اطبع تفاصيل وحدة التحكم في خاصية 'خصم' كائن كائن السيارة (Object.getOwnPropertyDescriptor (سيارة ، 'خصم')) ؛ // يطبع .. // {// get: [الوظيفة: get] ، // set: [الوظيفة: set] ، // enumerable: true ، // configurable: true //}
// نسخ خصائص السيارة إلى ElectricCar باستخدام Object.assign const ElectricCar = Object.assign ({}، Car)؛
// اطبع تفاصيل وحدة التحكم في خاصية 'الخصم' الخاصة بالكائن ElectricCar (Object.getOwnPropertyDescriptor (ElectricCar، 'discount')) ؛ // المطبوعات .. // {// value: undefined، // writable: true، // enumerable: true، // configurable: true //} // ot لاحظ أن الحروف والمستقرات مفقودة في كائن ElectricCar من أجل 'الخصم 'الملكية! 
// نسخ خصائص السيارة إلى ElectricCar2 باستخدام Object.defineProperties // واستخراج خصائص السيارة باستخدام Object.getOwnPropertyDescriptors const ElectricCar2 = Object.defineProperties ({}، Object.getOwnPropertyDescriptors (Car))؛
// اطبع تفاصيل وحدة التحكم في خاصية 'خصم' كائن كائن ElectricCar2 (Object.getOwnPropertyDescriptor (ElectricCar2، 'discount'))؛ // يطبع .. // {get: [الوظيفة: get] ،  // set: [الوظيفة: set] ،  // enumerable: true ، // configurable: true / /} // لاحظ وجود الحروف والمستقرات في كائن ElectricCar2 لخاصية "الخصم"!

5. إضافة فواصل زائدة في معلمات الدالة

هذا تحديث ثانوي يسمح لنا بالحصول على فواصل زائدة بعد معلمة الوظيفة الأخيرة. لماذا ا؟ للمساعدة في أدوات مثل اللوم git لضمان عدم إلقاء اللوم إلا على المطورين الجدد.

يوضح المثال أدناه المشكلة والحل.

ECMAScript 2017 (ES 8) - فاصلة زائدة في المعلمة الوظيفية
ملاحظة: يمكنك أيضًا استدعاء الوظائف بفواصل زائدة!

6. غير متزامن / انتظار

هذه ، إلى حد بعيد ، هي أهم ميزة وأكثرها فائدة إذا سألتني. تسمح لنا وظائف Async بعدم التعامل مع جحيم رد الاتصال وجعل التعليمات البرمجية بأكملها تبدو بسيطة.

تخبر الكلمة الأساسية غير المتزامنة مترجم جافا سكريبت بالتعامل مع الوظيفة بشكل مختلف. يتوقف المحول البرمجي مؤقتًا عندما يصل إلى الكلمة الرئيسية المنتظرة في تلك الوظيفة. يفترض أن التعبير بعد الانتظار يعيد الوعد وينتظر حتى يتم حل الوعد أو رفضه قبل المضي قدمًا.

في المثال أدناه ، تقوم دالة getAmount باستدعاء وظيفتين غير متزامنتين getUser و getBankBalance. يمكننا القيام بذلك في الوعد ، ولكن استخدام انتظار غير متزامن هو أكثر أناقة وبساطة.

ECMAScript 2017 (ES 8) - Async Await مثال أساسي

6.1 ترجع وظائف Async نفسها إلى الوعد.

إذا كنت تنتظر النتيجة من وظيفة غير متزامنة ، فأنت بحاجة إلى استخدام بناء جملة Promise ثم لالتقاط النتيجة.

في المثال التالي ، نريد تسجيل النتيجة باستخدام console.log ولكن ليس داخل doubleAndAdd. لذا نريد الانتظار واستخدام بناء الجملة لتمرير النتيجة إلى console.log.

ECMAScript 2017 (ES 8) - Async Await نفسها تُعيد الوعد

6.2 استدعاء غير متزامن / انتظار بالتوازي

في المثال السابق ، نتصل بانتظار مرتين ، ولكن في كل مرة ننتظر ثانية واحدة (إجمالي ثانيتين). بدلاً من ذلك ، يمكننا موازنتها حيث أن a و b لا يعتمدان على بعضهما البعض باستخدام Promise.all.

ECMAScript 2017 (ES 8) - استخدام Promise.all للتوازي مع متزامن / انتظار

6.3 خطأ في معالجة الدالات غير المتزامنة / الانتظار

هناك طرق مختلفة للتعامل مع الأخطاء عند استخدام انتظار غير متزامن.

الخيار 1 - استخدم حاول الالتقاط داخل الوظيفة

ECMAScript 2017 - استخدم محاولة الالتقاط داخل دالة المتزامن / الانتظار
// الخيار 1 - استخدم محاولة الالتقاط داخل الدالة async function doubleAndAdd (a، b) {try {a = await doubleAfter1Sec (a)؛ b = في انتظار doubleAfter1Sec (b) ؛ } catch (e) {return NaN؛ //العودة شيء }
إرجاع a + b ؛ } // sUsage: doubleAndAdd ('one'، 2) .then (console.log)؛ // NaN doubleAndAdd (1، 2) .then (console.log) ؛ // 6
function doubleAfter1Sec (param) {return new Promise ((حل ، رفض) => {setTimeout (function () {let val = param * 2؛ isNaN (val) ؟jection (NaN): Resolution (val)؛}، 1000) ؛}) ؛ }}

الخيار 2 - التقط كل تعبير ينتظره

نظرًا لأن كل تعبير انتظار ينتظر إرجاع الوعد ، يمكنك التقاط الأخطاء في كل سطر كما هو موضح أدناه.

ECMAScript 2017 - استخدم حاول التقاط كل تعبير ينتظره
// الخيار الثاني - أخطاء * Catch * في كل سطر انتظار // حيث أن كل تعبير ينتظر هو وعد في حد ذاته وظيفة غير متزامنة doubleAndAdd (a، b) {a = await doubleAfter1Sec (a) .catch (e => console.log '"أ" هو NaN')) ؛ //  b = في انتظار doubleAfter1Sec (b) .catch (e => console.log ("" b "is NaN ')) ؛ //  if (! a ||! b) {return NaN؛ } إرجاع + b؛ }}
// Usage: doubleAndAdd ('one'، 2) .then (console.log)؛ // NaN and logs: "a" is NaN doubleAndAdd (1، 2) .then (console.log)؛ // 6
function doubleAfter1Sec (param) {return new Promise ((حل ، رفض) => {setTimeout (function () {let val = param * 2؛ isNaN (val) ؟jection (NaN): Resolution (val)؛}، 1000) ؛}) ؛ }}

الخيار 3 - قبض على وظيفة انتظار عدم التزامن بالكامل

ECMAScript 2017 - قبض على وظيفة عدم التزامن / الانتظار بالكامل في النهاية
// الخيار 3 - لا تفعل أي شيء سوى التعامل خارج الوظيفة // حيث أن async / انتظار ينتظران وعدًا ، يمكننا التقاط خطأ الوظيفة بالكامل async function doubleAndAdd (a، b) {a = await doubleAfter1Sec (a)؛ b = في انتظار doubleAfter1Sec (b) ؛ إرجاع a + b ؛ }}
// Usage: doubleAndAdd ('one'، 2) .then (console.log) .catch (console.log)؛ //  <------- استخدم "catch"
function doubleAfter1Sec (param) {return new Promise ((حل ، رفض) => {setTimeout (function () {let val = param * 2؛ isNaN (val) ؟jection (NaN): Resolution (val)؛}، 1000) ؛}) ؛ }}
ECMAScript حاليًا في المسودة النهائية وسيتم نشرها في يونيو أو يوليو 2018. جميع الميزات المذكورة أدناه في المرحلة الرابعة وستكون جزءًا من ECMAScript 2018.

1. الذاكرة المشتركة والذرات

هذه ميزة ضخمة ومتقدمة جدًا وهي تحسين أساسي لمحركات JS.

تتمثل الفكرة الرئيسية في جلب نوع من ميزة الترابط المتعدد إلى JavaScript حتى يتمكن مطورو JS من كتابة برامج متزامنة عالية الأداء في المستقبل من خلال السماح بإدارة الذاكرة بأنفسهم بدلاً من السماح لمحرك JS بإدارة الذاكرة.

يتم ذلك عن طريق نوع جديد من كائن عمومي يسمى SharedArrayBuffer يقوم بتخزين البيانات بشكل أساسي في مساحة ذاكرة مشتركة. لذلك يمكن مشاركة هذه البيانات بين خيط JS الرئيسي وسلاسل عمل الويب.

حتى الآن ، إذا أردنا مشاركة البيانات بين سلسلة محادثات JS الرئيسية وعاملي الويب ، كان علينا نسخ البيانات وإرسالها إلى سلسلة الرسائل الأخرى باستخدام postMessage. ليس بعد الآن!

يمكنك ببساطة استخدام SharedArrayBuffer ويمكن الوصول إلى البيانات على الفور من خلال كل من سلسلة المحادثات الرئيسية وسلاسل عمليات عامل الويب المتعددة.

لكن مشاركة الذاكرة بين مؤشرات الترابط يمكن أن تسبب ظروف العرق. للمساعدة في تجنب ظروف السباق ، تم تقديم كائن Atomics العالمي. توفر Atomics طرقًا مختلفة لقفل الذاكرة المشتركة عند استخدام مؤشر ترابط لبياناتها. كما يوفر طرقًا لتحديث مثل هذه البيانات في تلك الذاكرة المشتركة بأمان.

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

إذا كنت مهتمًا ، أوصي بقراءة:

  1. من العمال إلى الذاكرة المشتركة - lucasfcosta
  2. مقدمة رسوم متحركة لـ SharedArrayBuffers - Lin Clark
  3. الذاكرة المشتركة والذرات - د. أكسل روشماير

2. إزالة القيد الحرفي لقالب معلم

أولاً ، نحتاج إلى توضيح ماهية "حرفية النموذج ذي العلامات" حتى نتمكن من فهم هذه الميزة بشكل أفضل.

في ES2015 + ، هناك ميزة تسمى القالب الحرفي الموسوم الذي يسمح للمطورين بتخصيص كيفية إقحام السلاسل. على سبيل المثال ، بالطريقة القياسية يتم استيفاء السلاسل مثل أدناه ...

في الحرف الحر الموضوع عليه علامات ، يمكنك كتابة دالة لاستلام الأجزاء المشفرة من السلسلة الحرفية ، على سبيل المثال ["Hello"، "!" ] ، ومتغيرات الاستبدال ، على سبيل المثال ، ["Raja"] ، كمعلمات في دالة مخصصة (على سبيل المثال تحية) ، وإرجاع ما تريده من تلك الوظيفة المخصصة.

يوضح المثال أدناه أن تحية وظيفة "العلامة" المخصصة الخاصة بنا تضيف وقتًا من اليوم مثل "صباح الخير!" "مساء الخير" ، وهكذا اعتمادًا على الوقت من اليوم إلى السلسلة الحرفية وإرجاع سلسلة مخصصة.

مثال على وظيفة العلامة التي توضح استيفاء السلسلة المخصصة
تُرجع الدالة // A "علامة سلسلة حرفية مخصصة. // في هذا المثال ، رحب بمكالمات timeGreet () لإلحاق Good // Morning / Afternoon / Evening بالاعتماد على الوقت من اليوم.
وظيفة تحية (hardCodedPartsArray ، ... replacePartsArray) {console.log (hardCodedPartsArray) ؛ //[ 'مرحبا '، '!' ] console.log (replacePartsArray) ؛ // [رجا]
let str = ''؛ hardCodedPartsArray.forEach ((string، i) => {if (i 
// sUsage: const firstName = 'Raja'؛ تحيات const = تحية`Hello $ {firstName}! `؛ //  <- حرفية ذات علامات
console.log (تحيات) ؛ // 'Hello Raja! صباح الخير!' 
function timeGreet () {const hr = new Date (). getHours ()؛ العودة ساعة <12؟ 'صباح الخير!' : ساعة <18؟ 'مساء الخير!' : 'مساء الخير!'؛ }}

الآن بعد أن ناقشنا ما هي وظائف "الموسومة" ، يرغب العديد من الأشخاص في استخدام هذه الميزة في مجالات مختلفة ، كما هو الحال في Terminal للأوامر وطلبات HTTP لإنشاء عناوين URI ، وما إلى ذلك.

problem المشكلة مع سلسلة أحرف حرفية

تكمن المشكلة في أن مواصفات ES2015 و ES2016 لا تسمح باستخدام أحرف الهروب مثل "\ u" (unicode) أو "\ x" (سداسي عشري) ما لم تبدو تمامًا مثل `\ u00A9` أو \ u {2F804} أو \ xA9.

لذلك إذا كانت لديك وظيفة ذات علامات تم استخدامها داخليًا لبعض قواعد المجال الأخرى (مثل قواعد Terminal) ، فقد تحتاج إلى استخدام \ ubla123abla لا يبدو \ u0049 أو \ u {@ F804} ، فستحصل على خطأ في بناء الجملة .

في ES2018 ، يتم تخفيف القواعد للسماح بأحرف الهروب التي تبدو غير صالحة طالما أن الدالة المميزة تقوم بإرجاع القيم في كائن ذي خاصية "مطبوخة" (حيث تكون الأحرف غير الصالحة "غير محددة") ، ثم خاصية "أولية" ( مع ما تريد).

دالة myTagFunc (str) {return {"cooked": "undefined"، "raw": str.raw [0]}} var str = myTagFunc `hi \ ubla123abla`؛ // call myTagFunc str // {cooked: "undefined"، raw: "hi \\ unicode"}

3. علم "نقطة" للتعبير العادي

حاليًا في RegEx ، على الرغم من أن النقطة (".") من المفترض أن تتطابق مع حرف واحد ، إلا أنها لا تتطابق مع أحرف السطر الجديدة مثل \ n \ r \ f وما إلى ذلك.

فمثلا:

// Before /first.second/.test('first\nsecond ')؛ //خاطئة

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

// ECMAScript 2018 /first.second/s.test('first\nsecond ')؛ // true ملاحظة: / s 

في ما يلي واجهة برمجة التطبيقات الشاملة من مستند الاقتراح:

ECMAScript 2018 - تتيح ميزة Regex dotAll المطابقة حتى \ n عبر

4. RegExp المسماة القبض على المجموعة

يوفر هذا التحسين ميزة RegExp مفيدة من لغات أخرى مثل Python و Java وما إلى ذلك تسمى "المجموعات المسماة". تسمح هذه الميزات للمطورين الذين يكتبون RegExp بتقديم أسماء (معرفات) بالتنسيق (؟ ...) لأجزاء مختلفة من المجموعة في RegExp. يمكنهم بعد ذلك استخدام هذا الاسم للاستيلاء على أي مجموعة يحتاجون إليها بسهولة.

4.1 مثال أساسي للمجموعة المسماة

في المثال أدناه ، نستخدم (؟ ) (؟ ) و (؟ ) أسماء لتجميع أجزاء مختلفة من التاريخ RegEx. سيحتوي الكائن الناتج الآن على خاصية مجموعات ذات خصائص سنة وشهر ويوم بقيم مقابلة.

ECMAScript 2018 - مثال المجموعات المسماة Regex

4.2 استخدام المجموعات المسماة داخل التعبير العادي نفسه

يمكننا استخدام \ k تنسيق للعودة إلى مرجع المجموعة داخل التعبير العادي نفسه. يوضح المثال التالي كيف يعمل.

ECMAScript 2018 - Regex المسماة المجموعات التي ترجع إلى الرجوع عبر \ k <group name>

4.3 استخدام المجموعات المسماة في String.prototype.replace

يتم الآن تمييز ميزة المجموعة المسماة في طريقة مثيل الاستبدال في String. حتى نتمكن من تبديل الكلمات في السلسلة بسهولة.

على سبيل المثال ، قم بتغيير "firstName ، lastName" إلى "lastName ، firstName".

ECMAScript 2018 - استخدام ميزة المجموعات المسماة RegEx في وظيفة الاستبدال

5. استراحة الخصائص للكائنات

عامل الاستراحة ... (ثلاث نقاط) يسمح لنا باستخراج خصائص الكائن التي لم يتم استخراجها بالفعل.

5.1 يمكنك استخدام الراحة للمساعدة في استخراج الخصائص التي تريدها فقط

ECMAScript 2018 - تدمير الكائنات عن طريق الراحة

5.2 أفضل من ذلك ، يمكنك إزالة العناصر غير المرغوب فيها!

ECMAScript 2018 - تدمير الكائنات عن طريق الراحة

6. خصائص الانتشار للكائنات

كما تبدو خصائص الحيز مثل خصائص الباقي بثلاث نقاط ... ولكن الفرق هو أنك تستخدم الحيز لإنشاء (إعادة هيكلة) كائنات جديدة.

نصيحة: يستخدم عامل الانتشار في الجانب الأيمن من علامة التساوي. يتم استخدام الباقي في الجانب الأيسر من علامة يساوي.
ECMAScript 2018 - إعادة هيكلة الكائن عن طريق الانتشار

7. RegExp Lookbehind التأكيدات

هذا تحسين لـ RegEx يسمح لنا بضمان وجود سلسلة على الفور * قبل * سلسلة أخرى.

يمكنك الآن استخدام مجموعة (؟ <=…) (علامة استفهام ، أقل من ، يساوي) للبحث عن تأكيد إيجابي.

علاوة على ذلك ، يمكنك استخدام (؟

التأكيد الإيجابي: لنفترض أننا نريد التأكد من وجود علامة # قبل كلمة الفوز (أي: # الفوز) ونريد أن تعود التعبير العادي فقط بسلسلة "الفوز". إليك كيف ستكتبها.

ECMAScript 2018 - (؟ <=…) للتأكيد الإيجابي

التأكيد السلبي: لنفترض أننا نريد استخلاص الأرقام من الأسطر التي تحتوي على علامات € وليس علامات $ قبل تلك الأرقام.

ECMAScript 2018 - (؟

8. RegExp الهروب خاصية Unicode

لم يكن من السهل كتابة RegEx لمطابقة أحرف unicode المختلفة. تتطابق أشياء مثل \ w و \ W و \ d وما إلى ذلك مع الأحرف والأرقام الإنجليزية فقط. ولكن ماذا عن الأرقام بلغات أخرى مثل الهندية واليونانية وما إلى ذلك؟

هنا يأتي دور Unicode Property Escapes. وتبين أن Unicode يضيف خصائص البيانات الوصفية لكل رمز (حرف) ويستخدمه لتجميع أو تمييز الرموز المختلفة.

على سبيل المثال ، تجمع قاعدة بيانات Unicode جميع الأحرف الهندية (हिन्दी) ضمن خاصية تسمى Script ذات القيمة Devanagari وخاصية أخرى تسمى Script_Extensions بنفس القيمة Devanagari. لذا يمكننا البحث عن Script = Devanagari والحصول على جميع الأحرف الهندية.

يمكن استخدام Devanagari للعديد من اللغات الهندية مثل المهاراتية والهندية والسنسكريتية وما إلى ذلك.

بدءًا من ECMAScript 2018 ، يمكننا استخدام \ p للهروب من الأحرف جنبًا إلى جنب مع {Script = Devanagari} لمطابقة جميع تلك الأحرف الهندية. أي أنه يمكننا استخدام: \ p {Script = Devanagari} في RegEx لمطابقة جميع أحرف Devanagari.

ECMAScript 2018 - عرض \ ص
// ما يلي يتطابق مع عدة حروف هندية / ^ \ p {Script = Devanagari} + $ / u.test ('हिन्दी')؛ // true // PS: هناك 3 أحرف هندية h

وبالمثل ، تجمع قاعدة بيانات Unicode جميع الأحرف اليونانية ضمن خاصية Script_Extensions (والبرنامج النصي) بالقيمة اليونانية. لذا يمكننا البحث عن جميع الأحرف اليونانية باستخدام Script_Extensions = Greek أو Script = Greek.

أي أنه يمكننا استخدام: \ p {Script = Greek} في RegEx لمطابقة جميع الأحرف اليونانية.

ECMAScript 2018 - عرض \ ص
// ما يلي يتطابق مع حرف يوناني واحد /\p{Script_Extensions=Greek}/u.test('π ')؛ // صحيح

علاوة على ذلك ، تقوم قاعدة بيانات Unicode بتخزين أنواع مختلفة من Emojis تحت الخصائص المنطقية Emoji و Emoji_Component و Emoji_Presentation و Emoji_Modifier و Emoji_Modifier_Base مع قيم الخصائص على أنها `true`. حتى نتمكن من البحث عن جميع الرموز التعبيرية عن طريق تحديد الرموز التعبيرية لتكون صحيحة.

أي أنه يمكننا استخدام: \ p {Emoji} و \ Emoji_Modifier وما إلى ذلك لمطابقة أنواع مختلفة من الرموز التعبيرية.

المثال التالي سيوضح كل شيء.

ECMAScript 2018 - يوضح كيفية استخدام \ p لمختلف الرموز التعبيرية
// ما يلي يتطابق مع شخصية Emoji /\p{Emoji}/u.test(' ')؛ //صحيح
// فشل ما يلي لأن الرموز التعبيرية الصفراء لا تحتاج / تحتوي على Emoji_Modifier! /\p{Emoji}\p{Emoji_Modifier}/u.test('️ ')؛ //خاطئة
// ما يلي يتطابق مع رمز emoji \ p {Emoji} متبوعًا \ p {Emoji_Modifier} /\p{Emoji}\p{Emoji_Modifier}/u.test(' ')؛ //صحيح
// Explaination: // بشكل افتراضي ، يكون رمز emoji للنصر أصفر اللون. // إذا استخدمنا تنويعات بنية أو سوداء أو غيرها من الرموز التعبيرية نفسها ، فسيتم اعتبارها // كتغيرات في الرموز التعبيرية الأصلية ويتم تمثيلها باستخدام حرفين يونيكود. // واحد للرموز التعبيرية الأصلية ، متبوعًا بحرف unicode آخر للون. // // لذا في المثال أدناه ، على الرغم من أننا نرى فقط رمزًا تعبيريًا بنصرًا بنيًا واحدًا ، // فإنه في الواقع يستخدم حرفين يونيكود ، أحدهما للرموز التعبيرية والآخر // للون البني. // // في قاعدة بيانات Unicode ، تحتوي هذه الألوان على خاصية Emoji_Modifier. // لذا نحتاج إلى استخدام كل من \ p {Emoji} و \ p {Emoji_Modifier} بشكل صحيح و // يتطابقان تمامًا مع الرموز التعبيرية البنية. /\p{Emoji}\p{Emoji_Modifier}/u.test(' ')؛ //صحيح

أخيرًا ، يمكننا استخدام حرف الهروب الكبير "P" (\ P) بدلاً من الحرف الصغير p (\ p) ، لإلغاء التطابقات.

المراجع:

  1. اقتراح ECMAScript 2018
  2. https://mathiasbynens.be/notes/es-unicode-property-escapes

8. Promise.prototype.finally ()

أخيرًا () هي طريقة مثيل جديدة تمت إضافتها إلى Promise. الفكرة الرئيسية هي السماح بتشغيل رد الاتصال بعد الحل أو الرفض للمساعدة في تنظيف الأشياء. يتم استدعاء الاستدعاء الأخير بدون أي قيمة ويتم تنفيذه دائمًا بغض النظر عن أي شيء.

دعونا نلقي نظرة على حالات مختلفة.

ECMAScript 2018 - أخيرًا () في حل المشكلةECMAScript 2018 - أخيرًا () في رفض القضيةECMASCript 2018 - أخيرًا () في الخطأ الذي تم طرحه من حالة الوعدECMAScript 2018 - تم طرح خطأ من داخل حالة ** catch **

9. التكرار غير المتزامن

هذه ميزة مفيدة للغاية. إنها تسمح لنا في الأساس بإنشاء حلقات من كود غير متزامن بكل سهولة!

تضيف هذه الميزة حلقة جديدة "في انتظار" تسمح لنا باستدعاء وظائف غير متزامنة تُرجع الوعود (أو المصفوفات مع مجموعة من الوعود) في حلقة. الشيء الرائع هو أن الحلقة تنتظر حل كل وعد قبل تنفيذ الحلقة التالية.

ECMAScript 2018 - Async Iterator عبر انتظار

هذا الى حد كبير ذلك!

إذا كان هذا مفيدًا ، فيرجى النقر على زر التصفيق لأسفل أدناه عدة مرات لإظهار دعمك! ⬇⬇⬇

مشاركاتي الأخرى

https://medium.com/@rajaraodv/latest

النشرات ذات الصلة ECMAScript 2015+

  1. تحقق من هذه النصائح والحيل المفيدة ECMAScript 2015 (ES6)
  2. 5 أجزاء JavaScript "سيئة" التي تم إصلاحها في ES6
  3. هل "الفصل" في ES6 هو الجزء "السيئ" الجديد؟