JavaScript Syntax
قواعد كتابة كود جافا سكريبت
ستتعلم في هذا الدرس قواعد وشروط بناء العبارات في لغة جافا سكريبت ومتي تستخدم الفواصل المنقوطة semicolons والقواعد الاساسية مثل استخدام علامات التنصيص Quotations مع النصوص.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left JavaScript Syntax chevron_left JavaScript
JavaScript Syntax
قواعد كتابة كود جافا سكريبت
</>
JavaScript Semicolons
الفواصل المنقوطة في لغة جافا سكريبت
الفاصلة المنقوطة (;) في JavaScript تُستخدم لإنهاء التعليمات البرمجية (Statements)، وهي تشبه النقطة في نهاية الجملة في اللغة الإنجليزية. لكنها ليست إلزامية دائمًا في JavaScript، حيث يمكن للمترجم (JavaScript Engine) أن يضيفها تلقائيًا في بعض الحالات، وهي ميزة تُعرف بـ ASI - Automatic Semicolon Insertion (إدراج الفاصلة المنقوطة تلقائيًا).
هل يجب استخدام الفاصلة المنقوطة؟ هناك مدرستان برمجيتان بخصوص استخدام الفاصلة المنقوطة في JavaScript:
المدرسة التي تؤيد استخدام الفاصلة المنقوطة دائمًا:
- توفر وضوحًا للكود.
- تقلل من احتمالية الأخطاء الناتجة عن ASI.
- تسهّل التعاون مع المطورين الذين يستخدمون لغات أخرى تتطلب الفاصلة المنقوطة (مثل Java أو C++).
المدرسة التي تعتمد على ASI وتتجنب الفاصلة المنقوطة:
- تجعل الكود أنظف وأبسط.
- تعتمد على محرك JavaScript لإدراجها عند الحاجة.
- تستخدم فقط في الحالات التي تكون فيها ضرورية لتجنب الأخطاء.
Semicolons
يُنصح بإنهاء كل عبارة في JavaScript بفاصلة منقوطة (Semicolon).
console.log("This text is written using JavaScript semicolons.");
console.log("Every statement in JavaScript should end with a semicolon (;).");
Without semicolons
يمكن أن تنتهي بعض العبارات في JavaScript بدون فاصلة منقوطة (Semicolon).
console.log("This text is written using JavaScript semicolons")
console.log("Every statement in JavaScript does not always require a semicolon")
- ليس من الضروري أن تنتهي كل عبارة في JavaScript بفاصلة منقوطة (;)، حيث يمكن لمحرك JavaScript تفسير بدء سطر جديد على أنه نهاية للعبارة السابقة في بعض الحالات. ومع ذلك، فإن الاعتماد على هذه القاعدة قد يؤدي أحيانًا إلى أخطاء غير متوقعة.
- بعض مطوري الويب يفضلون استخدام الفاصلة المنقوطة دائمًا لضمان وضوح الكود وتجنب الأخطاء الناتجة عن إدراج الفاصلة المنقوطة تلقائيًا (ASI - Automatic Semicolon Insertion)، بينما يختار آخرون الاعتماد على هذه الميزة وكتابة التعليمات البرمجية بدونها. في النهاية، القرار يعود إليك في اختيار الأسلوب الذي يناسبك، ولكن من الأفضل فهم كيفية عمل ASI لتجنب المشاكل المحتملة.
</>
Single Quotes and Double Quotes in JavaScript
علامات الاقتباس المفردة والمزدوجة في جافا سكريبت
الفرق بين علامات الاقتباس المفردة (') والمزدوجة ("):
في JavaScript، يمكنك استخدام أيٍ من علامات الاقتباس لإنشاء سلاسل نصية (Strings)، وكلاهما يؤدي نفس الوظيفة. الفرق الأساسي يكون في الأسلوب والتفضيل الشخصي.
متى تستخدم المفردة (') أو المزدوجة ("):
- لا فرق وظيفي بينهما، ويعتمد الاختيار على أسلوب الكتابة أو معايير الفريق.
- يفضل بعض المطورين استخدام علامات الاقتباس المفردة (') في JavaScript لأنها أقل شيوعًا في HTML، مما يقلل من الحاجة إلى الهروب (escaping) عند العمل مع HTML داخل JavaScript.
- في المقابل، يفضل البعض الاقتباس المزدوج (") لجعل الكود متناسقًا مع لغات أخرى مثل JSON التي تعتمد على علامات الاقتباس المزدوجة.
متى يجب اختيار نوع معين؟
- إذا كان النص يحتوي على علامة اقتباس داخلية من نفس النوع، تحتاج إلى الهروب (\) أو استخدام النوع الآخر.
(') using single quotes
مثال على استخدام علامات الاقتباس المفردة ('):
console.log('Hello, World!');
(") using double quotes
مثال على استخدام علامات الاقتباس المزدوجة ("):
console.log("Hello, World!");
(") using single quotes (') when the text contains double quotes
مثال باستخدام علامات الاقتباس المفردة (') عندما يحتوي النص على علامات مزدوجة ("):
console.log('He said, "JavaScript is awesome!"');
Use \ to escape the quote inside the text
يمكنك استخدام \ للهروب من العلامة داخل النص:
console.log('It\'s a beautiful day!');
✅ Escape Character
لأن النص محاط بعلامات اقتباس مزدوجة (")، فلا يوجد تعارض مع علامة الاقتباس المفردة (') داخل النص، وبالتالي لا تحتاج إلى الهروب (\).
console.log("It's a beautiful day!"); // Output: It's a beautiful day!
✅ Escape Character
لأن النص محاط بعلامات اقتباس مزدوجة (")، فلا يوجد تعارض مع علامة الاقتباس المفردة (') داخل النص، وبالتالي لا تحتاج إلى الهروب (\).
console.log("It's a 'beautiful' day!"); // Output: It's a 'beautiful' day!
✅ Escape Character
لأن النص محاط بعلامات اقتباس المفردة (')، فلا يوجد تعارض مع علامة الاقتباس المزدوجة (") داخل النص، وبالتالي لا تحتاج إلى الهروب (\).
console.log('Close"Tag"!'); // Output: Close"Tag"!
- إذا كنت تستخدم علامات اقتباس مفردة (')، فالهروب (\) ضروري داخل النص عند وجود ' فيه.
- إذا كنت تستخدم علامات اقتباس مزدوجة (")، فلا حاجة للهروب (\) عند وجود ' داخل النص.
</>
?When to Use Values Without Quotes in JavaScript
متى تستخدم القيم بدون علامات اقتباس في جافا سكريبت؟
في JavaScript، ليست كل القيم بحاجة إلى أن تكون محاطة بعلامات اقتباس (' أو "). بعض القيم تُكتب مباشرة بدون أي اقتباسات لأن JavaScript يفهمها كأنواع بيانات أخرى غير النصوص (Strings).
- الأرقام (Numbers).
- القيم المنطقية (Boolean Values).
- الكائنات والمصفوفات (Objects & Arrays).
- الكلمات المحجوزة (Reserved Keywords).
Numbers
عند التعامل مع الأرقام، لا تحتاج إلى استخدام علامات اقتباس، لأن JavaScript يتعرف عليها مباشرة كقيم رقمية.
console.log(5 + 5 ); // Output: 10 (عملية حسابية)
Numbers with Quotes
مثال خاطئ (باستخدام علامات اقتباس، مما يحول الرقم إلى نص): لأن JavaScript سيعتبر القيم بين علامات الاقتباس نصوصًا (String) وليس أرقامًا (Number)، مما قد يؤدي إلى أخطاء عند إجراء العمليات الحسابية.
console.log("5 + 5"); // Output: 5 + 5 (عملية دمج نصوص)
</>
Boolean Values Without Quotes in JavaScript
القيم المنطقية بدون علامات اقتباس في جافا سكريبت
القيم المنطقية (true و false) في JavaScript تُستخدم بدون علامات اقتباس، لأنها ليست نصوصًا، بل تمثل حالة منطقية (Boolean values).
لماذا لا نستخدم علامات اقتباس مع true و false؟
لأن JavaScript يتعامل معها كقيم منطقية (Boolean)، وعند وضعها بين علامات اقتباس، تصبح مجرد نصوص (String) لا يمكن استخدامها في العمليات المنطقية بشكل صحيح.
Boolean Values Without Quotes
مثال صحيح (بدون علامات اقتباس) مع القيم المنطقية (Boolean Values):
console.log(true); // Output: true -> Boolean
Boolean Values With Quotes
مثال غير صحيح (بعلامات اقتباس) مع القيم المنطقية (Boolean Values):
console.log("true"); // "true"; -> String
</>
Objects and Arrays Without Quotes in JavaScript
الكائنات والمصفوفات بدون علامات اقتباس في جافا سكريبت
الكائنات (Objects) والمصفوفات (Arrays) لا تحتاج إلى علامات اقتباس، لكن المفاتيح داخل الكائنات قد تحتاج إلى اقتباس في بعض الحالات.
في JavaScript، المفاتيح (Keys) يمكن أن تكتب بدون علامات اقتباس طالما أنها لا تحتوي على مسافات أو رموز خاصة.
متى تحتاج إلى علامات اقتباس في أسماء المفاتيح؟
عند استخدام أسماء تحتوي على مسافات أو رموز خاصة مثل (- أو @).
Objects Values Without Quotes
مثال صحيح بدون علامات اقتباس في الكائنات:
let person = {
name: "Mohamed",
age: 30,
isStudent: false
};
console.log(person.name); // Output: Mohamed
Objects Values With Quotes
مثال خاطئ باستخدام علامات اقتباس حول المفتاح بدون داعٍ:
let person = {
"name": "Mohamed",
"age": 30,
"isStudent": false
};
متى تحتاج إلى علامات اقتباس في أسماء المفاتيح في الكائنات؟
عند استخدام أسماء تحتوي على مسافات أو رموز خاصة مثل (- أو @) في أسماء المفاتيح في الكائنات.
let person = {
"full name": "Mohamed Ahmed",
"email-address": "[email protected]"
};
console.log(person["full name"]); // Output: Mohamed Ahmed
Arrays Values Without Quotes
مثال صحيح (بدون علامات اقتباس حول عناصر المصفوفة غير النصية):
let numbers = [1, 2, 3, 4, 5]; console.log(numbers); // Output: [1, 2, 3, 4, 5] let mixedArray = [true, false, null, undefined, 42]; console.log(mixedArray); // Output: [true, false, null, undefined, 42]
Arrays Values With Quotes
مثال خاطئ (باستخدام علامات اقتباس مع المصفوفات غير ضرورية حول القيم غير النصية):
let numbers = ["1", "2", "3", "4", "5"]; console.log(numbers); // Output: ["1", "2", "3", "4", "5"] (Strings, not numbers) let mixedArray = ["true", "false", "null", "undefined", "42"]; console.log(mixedArray); // Output: ["true", "false", "null", "undefined", "42"] (All are strings)
</>
Reserved Keywords Without Quotes in JavaScript
الكلمات المحجوزة بدون علامات اقتباس في جافا سكريبت
بعض القيم في JavaScript تمثل كلمات محجوزة ولا تحتاج إلى علامات اقتباس، مثل:
- null
- undefined
- NaN
لماذا لا نستخدم علامات اقتباس مع null و undefined؟
لأنها ليست نصوصًا، بل تمثل حالات خاصة داخل JavaScript.
Reserved Keywords Without Quotes
مثال على القيم المحجوزة بدون اقتباس:
console.log(null); // Output: null
Reserved Keywords With Quotes
مثال خاطئ باستخدام علامات اقتباس:
console.log("null"); // Output: "null" (String, تطبع كنص)
</>
When to Use Each Type of Quotation Marks in JavaScript?
متى تستخدم كل نوع من أنواع علامات الاقتباس في جافا سكريبت؟
في JavaScript، يمكنك استخدام علامات الاقتباس المفردة (') والمزدوجة (") والـ Backticks (``) لإنشاء النصوص، لكن لكل نوع استخدامه الأمثل. الجدول التالي يوضح متى يجب استخدام كل نوع منها:
| النوع | متى تستخدمه؟ |
|
علامات الاقتباس المزدوجة (") |
عند الحاجة إلى تضمين نصوص تحتوي على علامات اقتباس مفردة ('). |
|
علامات الاقتباس المفردة (') |
عند الحاجة إلى تضمين نصوص تحتوي على علامات اقتباس مزدوجة ("). |
|
بدون علامات اقتباس |
عند استخدام المتغيرات أو القيم المنطقية (true / false) أو الأرقام. |
|
الـ Backticks (``) |
عند الحاجة إلى تضمين متغيرات داخل النصوص أو عند كتابة نصوص متعددة الأسطر. |
أفضل الممارسات
- استخدم أسلوبًا موحدًا في المشروع.
- إذا كنت تعمل مع فريق، تابع الـ Style Guide المعتمد.
- استخدم الـ Backticks (``) عندما تحتاج إلى إدراج متغيرات داخل النصوص.
- تجنب الهروب (\) غير الضروري باختيار نوع الاقتباس المناسب للنصوص.
- عند التعامل مع JSON، استخدم دائمًا علامات الاقتباس المزدوجة (")، لأن JSON لا يدعم علامات الاقتباس المفردة (').
</>
String Concatenation in JavaScript
دمج النصوص في جافا سكريبت
دمج النصوص (Concatenation) هو عملية ربط النصوص (Strings) معًا لإنشاء نص جديد. في JavaScript، هناك عدة طرق لدمج النصوص، وأكثرها شيوعًا استخدام عامل الجمع (+) و Template Literals (Backticks).
كيف يعمل؟
- يتم جمع (+) النصوص معًا لإنشاء نص جديد.
- تمت إضافة مسافة (" ") بين الاسمين لضمان أن الناتج يبدو طبيعيًا.
String Concatenation
يمكنك استخدام علامة + لدمج نصوص متعددة في JavaScript.
let firstName = "Ahmed"; let lastName = "Ali"; let fullName = firstName + " " + lastName; console.log(fullName); // Output: Ahmed Ali
String Concatenation
مثال باستخدام Template Literals (Backticks) بدلًا من عامل الجمع (+):
let firstName = "Ahmed";
let lastName = "Ali";
let fullName = `${firstName} ${lastName}`;
console.log(fullName); // Output: Ahmed Ali
ما الذي تغير؟
- استخدمنا Backticks (``) بدلاً من علامات الاقتباس العادية.
- استخدمنا ${} لإدراج المتغيرات داخل النص بدون الحاجة إلى +.
</>
Template Literal
القوالب النصية
هي طريقة متقدمة للتعامل مع النصوص في JavaScript باستخدام العلامات المائلة (Backticks) بدلاً من علامات الاقتباس العادية (' أو "). تتيح هذه الطريقة إدراج المتغيرات والتعبيرات البرمجية داخل النصوص باستخدام ${}.
لماذا نستخدمها؟
- تسمح بإدراج المتغيرات مباشرة داخل النص بدون الحاجة إلى استخدام علامة
+للربط. - تدعم النصوص متعددة الأسطر بدون الحاجة إلى
\n.
لماذا تعتبر هذه الطريقة أفضل؟
- أكثر وضوحًا وسهولة في القراءة.
- لا تحتاج إلى علامات +، بل يتم إدراج المتغيرات مباشرة داخل ${}.
- تدعم النصوص متعددة الأسطر بدون الحاجة إلى \n.
Template Literals: javascript
✅ مثال على استخدام القوالب النصية في جافا سكريبت.
console.log(`Hello, ${"mohamed"}!`); // Output: Hello, mohamed!
Template Literals with variable
✅ مثال على استخدام القوالب النصية في جافا سكريبت مع المتغيرات.
let name = "Mohamed";
console.log(`Hello, ${name}!`); // Output: Hello, Mohamed!
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
