فيما يلي أمثلة على كل ما هو جديد في ECMAScript 2016 و 2017 و 2018

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

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

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

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

1. Array.prototype.includes

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

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

2. المشغل infix المشغل

عمليات الرياضيات مثل الجمع والطرح لديها مشغلي 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". لوحة (10) // '5'
'5'.padEnd (10،' = * ') //' 5 = * = * = * = * = '
يكون هذا في متناول يدي عندما نريد محاذاة الأشياء في سيناريوهات مثل عرض الطباعة جميلة أو الطباعة النهائية.

3.1 padStart المثال:

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

ECMAScript 2017 - على سبيل المثال padStart

3.2 وسادة مثال على ذلك:

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

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

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

3.3 padStart و padEnd على Emojis وغيرها من الأحرف مزدوجة البايت

يتم تمثيل Emojis و chars مزدوجة البايت باستخدام بايت متعددة من unicode. حتى padStart و padEnd قد لا تعمل كما هو متوقع!

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

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

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

لذلك نحن في نهاية المطاف مع: ❤heart

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

4. Object.getOwnPropertyDescriptors

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

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

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

قبل…

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

بعد…

ECMAScript 2017 (ES8) - Object.getOwnPropertyDescriptors
فار كار =
 الاسم: 'BMW' ،
 السعر: 1000000 ،
 تعيين الخصم (x) {
  this.d = س ؛
 }،
 الحصول على خصم () {
  ارجع هذا
 }،
}؛
// اطبع تفاصيل خاصية "الخصم" الخاصة بجسم السيارة
console.log (Object.getOwnPropertyDescriptor (سيارة ، 'خصم')) ؛
//مطبوعات..
// {
// get: [الوظيفة: get] ،
// مجموعة: [وظيفة: مجموعة] ،
// عد: صحيح ،
// شكلي: صحيح
//}
// نسخ خصائص السيارة إلى ElectricCar باستخدام Object.assign
const ElectricCar = Object.assign ({}، Car)؛
// طباعة تفاصيل خاصية "خصم" كائن ElectricCar
console.log (Object.getOwnPropertyDescriptor (ElectricCar، 'discount'))؛
//مطبوعات..
// {
// القيمة: غير محدد ،
// قابل للكتابة: صحيح ،
// عد: صحيح ،
// شكلي: صحيح
  
//}
// ot لاحظ أن الحروف والأدوات المفقودة في كائن ElectricCar لخاصية "الخصم"! 
// نسخ خصائص السيارة إلى ElectricCar2 باستخدام Object.defineProperties
/ / واستخرج خصائص السيارة باستخدام Object.getOwnPropertyDescriptors
const ElectricCar2 = Object.defineProperties ({}، Object.getOwnPropertyDescriptors (Car))؛
// طباعة تفاصيل خاصية "الخصم" الخاصة بـ ElectricCar2
console.log (Object.getOwnPropertyDescriptor (ElectricCar2، 'discount'))؛
//مطبوعات..
// {get: [Function: get]، 
// مجموعة: [وظيفة: مجموعة] ، 
// عد: صحيح ،
// شكلي: صحيح
//}
// لاحظ أن الحروف والأدوات موجودة في كائن ElectricCar2 لخاصية "الخصم"!

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

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

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

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

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

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

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

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

ECMAScript 2017 (ES 8) - Async في انتظار المثال الأساسي

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

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

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

ECMAScript 2017 (ES 8) - Async في انتظار أنفسهم بإرجاع وعد

6.2 الاتصال غير المتزامن / الانتظار بالتوازي

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

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

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

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

الخيار 1 - استخدم try catch داخل الوظيفة

ECMAScript 2017 - استخدم try catch داخل وظيفة async / wait
// الخيار 1 - استخدم try catch داخل الوظيفة
وظيفة المزامنة doubleAndAdd (a، b) {
 محاولة {
  a = انتظر doubleAfter1Sec (a) ؛
  b = تنتظر doubleAfter1Sec (b) ؛
 } catch (e) {
  عودة NaN //العودة شيء
 }
إرجاع + ب ؛
}
// Usage:
doubleAndAdd ('one'، 2). ثم (console.log)؛ // NaN
doubleAndAdd (1، 2). ثم (console.log)؛ // 6
الوظيفة doubleAfter1Sec (param) {
 إرجاع وعد جديد ((حل ، رفض) => {
  setTimeout (function () {
   اسمحوا فال = param * 2 ؛
   ليس (فال)؟ رفض (NaN): العزم (val) ؛
  } ، 1000) ؛
 })؛
}

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

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

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

الخيار 3 - احصل على وظيفة المزامنة المنتظرة بأكملها

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

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

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

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

with المشكلة مع الموسومة سلسلة حرفية

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

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

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

الدالة myTagFunc (str) {
 إرجاع {"cooked": "undefined" ، "raw": str.raw [0]}
}

var str = myTagFunc `hi \ ubla123abla`؛ / / اتصل بـ myTagFunc

str // {cooked: "undefined"، raw: "hi \\ unicode"}

3. "dotall" العلم للتعبير منتظم

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

فمثلا:

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

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

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

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

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

4. RegExp المسماة مجموعة الالتقاطات

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

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

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

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

4.2 استخدام المجموعات المسماة داخل regex نفسها

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

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

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

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

على سبيل المثال ، قم بتغيير "الاسم الأول ، اسم العائلة" إلى "اسم العائلة ، الاسم الأول".

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

5. بقية خصائص الكائنات

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

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

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

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

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

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

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

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

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

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

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

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

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

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

التأكيد السلبي: دعنا نقول أننا نريد استخراج الأرقام من الأسطر التي تحمل علامات € وليس علامات دولار قبل هذه الأرقام.

ECMAScript 2018 - (؟ <! ...) للتأكيدات السلبية

8. RegExp يهرب خاصية يونيكود

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

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

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

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

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

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

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

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

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

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

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

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

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

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

المراجع:

  1. ECMAScript 2018 Proposal
  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 جافا سكريبت "سيئة" الأجزاء التي تم إصلاحها في ES6
  3. هل "الفصل" في ES6 هو الجزء "السيئ" الجديد؟