الميزات الجديدة في ES6: القوالب (Templates) والكائنات (Objects)

تُعدّ نسخة ECMAScript 6، والمعروفة اختصاراً بـ ES6 أو ECMAScript 2015، نقلة نوعية في تاريخ لغة JavaScript، إذ أضافت عدداً من الميزات والوظائف التي حسّنت من كتابة الشيفرة البرمجية وجعلتها أكثر مرونة وقوة وسهولة في الاستخدام. من بين هذه الميزات، تبرز القوالب النصية (Template Literals) التي غيرت طريقة التعامل مع النصوص، بالإضافة إلى تحسينات جذرية على الكائنات (Objects) وتسهيل طرق إنشائها والتعامل معها.

في هذا المقال، سنغوص في تفاصيل هاتين الميزتين المهمتين في ES6، مع استعراض دقيق لكيفية استخدام القوالب النصية وفهم التحسينات التي طرأت على الكائنات، مع أمثلة عملية وتوضيحات متكاملة تساعد على استيعاب هذه المفاهيم بشكل عميق.

أولاً: القوالب النصية (Template Literals) في ES6

1. التعريف والمفهوم

القوالب النصية هي طريقة جديدة لكتابة السلاسل النصية (Strings) في JavaScript، تتيح تضمين تعبيرات JavaScript داخل النصوص بطريقة سلسة ومباشرة دون الحاجة لاستخدام العلامات التقليدية مثل علامات الجمع (+) للربط بين النصوص والمتغيرات.

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

2. كيفية استخدام القوالب النصية

يتم كتابة القوالب النصية باستخدام العلامة العكسية (backtick) وهي علامة مائلة إلى اليسار (`) بدلاً من علامات الاقتباس المفردة أو المزدوجة.

داخل هذه العلامة، يمكن كتابة النصوص مباشرة، ولإدراج تعبير أو متغير نستخدم الشكل ${expression}.

مثال بسيط:

javascript
CopyEdit
const name = "علي";
const greeting = `مرحباً، ${name}! كيف حالك اليوم؟`;
console.log(greeting);

في هذا المثال، القيمة الناتجة هي:

مرحباً، علي! كيف حالك اليوم؟

3. مزايا القوالب النصية

• سهولة تضمين المتغيرات والتعابير: إمكانية تضمين أي تعبير JavaScript ضمن النص بسهولة.

• تعدد الأسطر: يمكن كتابة نص متعدد الأسطر دون الحاجة لاستخدام رموز خاصة أو \n.

• سهولة التنسيق: دعم تنسيق النصوص المعقدة دون تعقيد.

• تحسين القراءة والصيانة: الشيفرة تصبح أوضح وأسهل للفهم.

مثال على نص متعدد الأسطر:

javascript
CopyEdit
const message = `هذا نص
يمتد على
عدة أسطر`;
console.log(message);

الناتج سيكون:

CopyEdit
هذا نص
يمتد على
عدة أسطر

4. استخدام التعبيرات داخل القوالب النصية

يمكن استخدام العمليات الحسابية، استدعاءات الدوال، أو أي تعبير داخل ${}.

مثال:

javascript
CopyEdit
const a = 5;
const b = 10;
console.log(`الناتج هو ${a + b}`); // الناتج هو 15

ثانياً: التحسينات في الكائنات (Objects) في ES6

تُعد الكائنات حجر الأساس في JavaScript، وكانت ES6 حافلة بالتحسينات التي جعلت من تعريف الكائنات والتعامل معها أكثر سهولة ومرونة.

1. إنشاء الكائنات بطريقة مختصرة (Object Literal Shorthand)

في الإصدارات السابقة من JavaScript، كان تعريف الكائنات يتطلب تكرار أسماء الخصائص والمتغيرات. ES6 قدمت طريقة مختصرة لتقليل هذا التكرار.

قبل ES6:

javascript
CopyEdit
const name = "سارة";
const age = 30;

const person = {
    name: name,
    age: age
};

بعد ES6:

javascript
CopyEdit
const name = "سارة";
const age = 30;

const person = { name, age };

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

2. الدوال داخل الكائنات (Method Definitions)

في ES6، يمكن تعريف الدوال داخل الكائنات بطريقة مختصرة أكثر.

قبل ES6:

javascript
CopyEdit
const obj = {
    sayHello: function() {
        console.log("مرحبا");
    }
};

بعد ES6:

javascript
CopyEdit
const obj = {
    sayHello() {
        console.log("مرحبا");
    }
};

هذه الصيغة المختصرة تجعل الكود أنظف وأوضح.

3. الحقول المحسوبة (Computed Property Names)

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

مثال:

javascript
CopyEdit
const propName = "score";
const player = {
    [propName]: 100
};
console.log(player.score); // 100

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

4. التدمير (Destructuring) للكائنات

هي تقنية تسمح باستخلاص قيم من الكائنات بشكل مباشر إلى متغيرات، مما يسهل التعامل مع خصائص الكائنات.

مثال:

javascript
CopyEdit
const person = { name: "ليلى", age: 25, city: "الرياض" };
const { name, city } = person;
console.log(name); // ليلى
console.log(city); // الرياض

يمكن أيضاً تعيين أسماء متغيرات مختلفة أو قيم افتراضية:

javascript
CopyEdit
const { name: userName, country = "السعودية" } = person;
console.log(userName); // ليلى
console.log(country); // السعودية

5. دمج الكائنات باستخدام Spread Operator

انتشرت في ES6 طريقة جديدة لنسخ ودمج الكائنات باستخدام ثلاث نقاط ... تُعرف باسم Spread Operator.

مثال:

javascript
CopyEdit
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 3, c: 4 }

لاحظ أن الخاصية b تم استبدالها بقيمة 3 لأنها موجودة في الكائن الثاني.

مقارنة بين الأساليب القديمة والجديدة في التعامل مع النصوص والكائنات

تفاصيل إضافية ومزايا عملية في القوالب النصية والكائنات

التعامل مع القوالب النصية في حالات معقدة

تضمين دوال داخل التعبيرات

يمكن إدراج أي تعبير، حتى استدعاء دوال، داخل ${}:

javascript
CopyEdit
function calculateTax(price) {
    return price * 0.15;
}
const price = 200;
console.log(`السعر مع الضريبة: ${price + calculateTax(price)}`);

علامات القوالب النصية المخصصة (Tagged Templates)

هي ميزة متقدمة تسمح بكتابة دوال خاصة لمعالجة النصوص المُمررة عبر القوالب النصية قبل إخراجها.

مثال مبسط:

javascript
CopyEdit
function highlight(strings, ...values) {
    let result = "";
    for(let i=0; ilength; i++) {
        result += strings[i];
        if(i < values.length) {
            result += `${values[i]}`;
        }
    }
    return result;
}

const name = "سامر";
const age = 28;

const output = highlight`مرحباً، اسمي ${name} وعمري ${age} سنة.`;
console.log(output);

الناتج:

css
CopyEdit
مرحباً، اسمي <b>سامرb> وعمري <b>28b> سنة.

هذه التقنية تستخدم كثيرًا في مكتبات مثل React و GraphQL.

مزايا إضافية للكائنات

تحسين التعامل مع الـ Prototypes والوراثة

ES6 قدمت طرقًا جديدة لإدارة الوراثة وإنشاء الكائنات عبر الـ Classes، لكن فيما يتعلق بالكائنات نفسها، أصبح بالإمكان إنشاء خصائص بطريقة أبسط، كما تدعم التعريف الديناميكي لخصائص getters و setters.

مثال Getter و Setter:

javascript
CopyEdit
const user = {
    firstName: "أحمد",
    lastName: "الهاشمي",
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
    set fullName(name) {
        const parts = name.split(" ");
        this.firstName = parts[0];
        this.lastName = parts[1];
    }
};

console.log(user.fullName); // أحمد الهاشمي
user.fullName = "محمد صالح";
console.log(user.firstName); // محمد
console.log(user.lastName); // صالح

الجدول التالي يلخص أهم الخصائص والمزايا مع أمثلة موجزة

خلاصة

تُعد القوالب النصية والكائنات في ES6 من أهم الميزات التي حسّنت من لغة JavaScript بشكل جذري، حيث وفرت القوالب النصية أسلوباً أكثر فاعلية ووضوحاً لكتابة النصوص، خاصة تلك التي تحتوي على متغيرات وتعابير معقدة، مع دعم كتابة نصوص متعددة الأسطر بسهولة ودون تعقيد.

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

المصادر والمراجع

• MDN Web Docs – Template Literals:
  
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

• MDN Web Docs – Working with objects:
  
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

هذا المقال يُعدّ مرجعاً شاملاً لمن يرغب في فهم وإتقان الميزات الجديدة في ES6 الخاصة بالقوالب النصية والكائنات.