JavaScript: تحويل الأنواع في JavaScript

آخر تحديث: 2026-10-13

تحويل الأنواع هو الجزء الأكثر عرضة للأخطاء في JavaScript. رقم مكتوب في نموذج؟ оказار أنه سلسلة! "5" + 3 يُعطي "53" بدلاً من 8 — كل مبتدئ يصادف هذه "المفاجآت".

دوال عامة ذات صلة：parseFloat() parseInt() Number()

1. طرق تحويل الأنواع والمخاطر

قيم input في نماذج HTML هي دائماً سلاسل، حتى مع type="number". يجب تحويل الأنواع قبل القيام بالعمليات الحسابية، وإلا ستكون النتائج غير متوقعة.

<div id="demo"></div>
<script>
const input = "42";
const result = input + 8;
document.getElementById("demo").textContent = 'input + 8 = ' + result + ' (النوع: ' + typeof result + ')';
</script>

(2) التحويل الصريح: String()، Number()، Boolean()

استدعاء وظائف التحويل صراحةً يجعل نيتك واضحة — هذا هو النهج الموصى به:

(3) التحويل الضمني: ربط الـ + ومقارنة الـ ==

محرك JavaScript ي🦄 تحويل نوع تلقائي غالباً ما يُنتج نتائج غير متوقعة:

• عامل +: إذا كان أي طرف سلسلة، يتحول الآخر إلى سلسلة للربط
• مقارنة ==: تconvert الأنواع قبل المقارنة، بقواعد معقدة يصعب تذكرها

<script>
console.log("5" + 3);       // "53" (الرقم 3 تحول إلى سلسلة)
console.log("5" - 3);       // 2 (السلسلة "5" تحولت إلى رقم)
console.log("" == 0);       // true (السلسلة الفارغة تحولت إلى 0)
console.log(null == undefined); // true
</script>

(4) مشكلات شائعة

هذه مشكلات عالية التكرار في المقابلات والتطوير الحقيقي:

<script>
console.log("5" + 3);        // "53"   + تربط عندما ترى سلسلة
console.log("5" - 3);        // 2      - تقوم فقط بالطرح، تconvert السلسلة إلى رقم
console.log("5" * 3);        // 15     * أيضاً تconvert إلى رقم
console.log(true + 1);       // 2      true تconvert إلى 1
console.log(false + 1);      // 1      false تconvert إلى 0
console.log("" + 0);         // "0"    الرقم يconvert إلى سلسلة
console.log("" == 0);        // true   كلا الجانبين يconvertان إلى أرقام
console.log(null == 0);      // false  null يساوي فقط undefined بشكل فضفاض
console.log("0" == false);   // true   كلاهما يconvert إلى 0
</script>

تذكر هذه القاعدة: + تربط عندما تصادف سلسلة؛ جميع عوامل الحساب الأخرى convert السلاسل إلى أرقام.

(5) قواعد تحويل Number()

السلسلة الفارغة تconvert إلى 0 بدلاً من NaN — هذا التصميم أوقع العديد من المطورين.

(6) قواعد تحويل Boolean() (القيم Falsy)

هذه الـ 6 قيم convert إلى false وتسمى قيم falsy. كل شيء آخر هو true:

<script>
console.log(Boolean(false));     // false
console.log(Boolean(0));         // false
console.log(Boolean(-0));        // false
console.log(Boolean(""));        // false
console.log(Boolean(null));      // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN));       // false
</script>

ملاحظة: Boolean("0") هو true، و Boolean([]) هو أيضاً true — السلاسل غير الفارغة والمصفوفات غير الفارغة هي truthy.

(7) === المساواة الصارمة مقابل == المساواة الفضفاضة

<script>
console.log(5 === "5");   // false (أنواع مختلفة)
console.log(5 == "5");    // true (السلسلة convertت إلى رقم أولاً)
console.log(null === undefined); // false
console.log(null == undefined);  // true
</script>

القاعدة الحديدية: استخدم دائماً ===، ولا تستخدم == أبداً. إلا إذا كنت تعرف بالضبط ما تفعله (مثلاً value == null يمكنها مطابقة كل من null و undefined).

▶ مثال: مقارنة تحويل الأنواع

▶ مثال: مرجع سريع لقيم Boolean() Falsy

▶ مثال: حساب مدخلات النموذج

▶ مثال: مقارنة === مقابل ==

دوال عامة ذات صلة：parseFloat() parseInt() Number()

❓ أسئلة شائعة

📖 ملخص

• حوّل السلاسل النصية إلى أرقام بـ Number()، parseInt()، parseFloat()
• حوّل الأرقام إلى سلاسل نصية بـ String(n)، n.toString()، أو n.toFixed(2)
• التحويل الضمني يحدث تلقائياً: == يحول الأنواع (استخدم ===)، + مع السلاسل يصبح دمجاً
• مخاطر شائعة: "5" - 3 تساوي 2، "5" + 3 تساوي "53"، null == undefined تساوي true
• حوّل إلى Boolean: !!value أو Boolean(value) — ست قيم خاطئة: false/0/""/null/undefined/NaN

📝 تمارين

1. بدون تشغيل الكود، توقع نتائج هذه التعبيرات: "10" + 5، "10" - 5، "10" * "2"، true + true، Boolean("false")، "1" == 1، "1" === 1. ثم اكتب كوداً للتحقق.
2. اكتب دالة calculateBMI(weight, height) حيث المعاملات تأتي من مدخلات النماذج (سلاسل). يجب أن convert الأنواع داخلياً قبل حساب BMI، وتتعامل مع المدخلات الفارغة أو غير الصالحة (تُرجع رسالة خطأ).
3. اكتب دالة strictCompare(a, b) تستخدم فقط === للمقارنة. إذا اختلفت الأنواع، تُرجع مباشرة "أنواع مختلفة، لا يمكن المقارنة"؛ إذا تطابقت الأنواع، تُرجع نتيجة المقارنة.

فريق Web-Tutorial التقني

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

من نحن