آموزش کامل، از پایه تا پیشرفته + مثال‌های کاربردی واقعی (۲۰۲۶)

مقدمه

در جاوااسکریپت، بیشتر خطاهای منطقی، رفتارهای عجیب و باگ‌های پنهان از عدم شناخت درست تبدیل نوع داده (Type Casting) به‌وجود می‌آیند.

بنابراین اگر Type Casting را عمیق و عملی یاد بگیرید:

• شرایط شرطی‌تان دقیق‌تر می‌شود

• کار با فرم و ورودی کاربر قابل اعتماد می‌شود

• کار با API، LocalStorage و URLها آسان می‌شود

• رفتار مقایسه‌ها (== و ===) را کاملاً می‌فهمید

• از Type Coercionهای خطرناک جلوگیری می‌کنید

این مقاله همه چیز را خیلی ساده، کاربردی و پروژه‌محور توضیح می‌دهد؛ تمرکز بر موضوعات واقعی:

• تبدیل رشته به عدد

• تبدیل ورودی‌ها

• تبدیل داده‌های API

• تبدیل بولیین

• رفتارهای عجیب جاوااسکریپت (😅)

• روش درست و حرفه‌ای

برویم سر اصل مطلب.

بخش ۱: Type Casting چیست؟

Type Casting یعنی اینکه نوع یک داده را تغییر دهیم.

در جاوااسکریپت دو نوع تبدیل داریم:

۱) Explicit Type Casting

تبدیل صریح و توسط خود برنامه‌نویس

مثل:

Number("10")
String(20)
Boolean(1)

۲) Implicit Type Coercion

تبدیل خودکار توسط جاوااسکریپت

مثل:

"10" * 2 // می‌شود 20
"10" + 2 // می‌شود "102"

در این مقاله هردو را کامل یاد می‌گیرید.

بخش ۲: چرا باید Type Casting را بلد باشیم؟ (مثال‌های واقعی پروژه‌ای)

مثال ۱: فرم ثبت‌نام

کاربر مقدار سن را وارد می‌کند:

نمایش کد

<input id="age" type="number">

مقدار دریافتی:

const age = document.getElementById("age").value;
console.log(typeof age); // string

اگر تبدیل نکنید:

• مقایسه‌ها اشتباه

• شرط‌ها اشتباه

• API خطا می‌دهد

مثال ۲: API و JSON

داده‌های دریافتی:

{
  "id": "12",
  "price": "56000",
  "available": "true"
}

اما ما نیاز داریم:

• id → number

• price → number

• available → boolean

مثال ۳: LocalStorage

تمام اطلاعات در LocalStorage به صورت string ذخیره می‌شود.

بخش ۳: تبدیل صریح (Explicit Conversion)

۳.۱ تبدیل به عدد: Number()

این بخش یکی از مهم‌ترین‌های Type Casting است.

Number("10")  // 10
Number("10.5") // 10.5
Number("") // 0
Number(true) // 1
Number(false) // 0
Number("Hi") // NaN

مثال کاربردی: قیمت ورودی کاربر

const price = Number(priceInput.value);

اگر تبدیل نکنید و بنویسید:

total += priceInput.value;

نتیجه:

"20000" + "30000" = "2000030000" 😱

مثال پروژه‌ای سبد خرید

let total = 0;
const price = Number(product.price);

total += price;

۳.۲ تبدیل به عدد با parseInt و parseFloat

parseInt("20px") // 20
parseFloat("20.5px") // 20.5

تفاوت مهم:

• Number(“20px”) → NaN

• parseInt(“20px”) → 20

کاربرد واقعی: ورودی واحد اندازه

const width = parseInt("250px"); // 250

بخش ۴: تبدیل به رشته (String)

String(10) // "10"
String(true) // "true"
String(null) // "null"

پرکاربردترین روش:

(10).toString()

کاربرد واقعی: پیام‌های UI

let message = "Your score is " + score.toString();

بخش ۵: تبدیل به Boolean – یکی از پرکاربردترین بخش‌ها

جاوااسکریپت ۷ مقدار falsy دارد:

• 0

• “”

• null

• undefined

• false

• NaN

• 0n

هر چیز دیگری true است.

تبدیل صریح:

Boolean("") // false
Boolean("hello") // true
Boolean(0) // false
Boolean(1) // true

مثال واقعی: فرم ثبت‌نام

if (!Boolean(username)) {
    alert("Username is required");
}

نسخه کوتاه‌تر:

if (!username) ...

بخش ۶: Implicit Type Coercion (تبدیل خودکار)

اینجاست که رفتارهای عجیب جاوااسکریپت ظاهر می‌شود.

۶.۱ تبدیل خودکار در عملیات ریاضی

"10" * 2 // 20
"10" - 2 // 8
"10" / 2 // 5

اما:

"10" + 2 // "102"

چرا؟

چون اگر یکی از طرفین string باشد، + تبدیل به عملیات الحاق رشته می‌شود.

۶.۲ مثال واقعی: نمایش تعداد محصولات

let count = "5";
count = count + 1;
console.log(count); // "51" 😅

راه‌حل:

count = Number(count) + 1;

بخش ۷: تبدیل بولی در عملیات شرطی

در شرط‌ها، داده‌ها به boolean تبدیل می‌شوند.

مثال:

if ("Hello") console.log("Yes"); // Yes
if (0) console.log("No"); // اجرا نمی‌شود

مثال واقعی پروژه: چک کردن ورودی فرم

if (!email) {
    showError("Enter your email");
}

بخش ۸: تبدیل در مقایسه‌ها (== و ===)

=== (برابری دقیق)

هیچ تبدیل نوعی انجام نمی‌دهد.

10 === "10" // false

== (خطرناک!)

تبدیل خودکار انجام می‌دهد.

10 == "10" // true

مثال واقعی: خطای معروف در فرم‌ها

if (userAge == "") { ... }

اگر userAge برابر 0 باشد:

0 == "" // true 😱

راه درست:

if (userAge === "") ...

بخش ۹: تبدیل خودکار عجیب (نوع دعوای همیشگی جاوااسکریپت!)

این‌ها را حتماً باید بدانید:

[] == ""  // true
[] == 0   // true
[1] == 1  // true
null == undefined // true

بخش ۱۰: مثال‌های واقعی از دنیای پروژه

مثال ۱: API که مقدار عدد را رشته می‌دهد

دریافتی:

{
  "price": "20000"
}

در پروژه:

const price = Number(data.price);
total += price;

مثال ۲: LocalStorage

localStorage.setItem("count", 10);

بازیابی:

const count = localStorage.getItem("count");
console.log(typeof count); // string

راه درست:

const count = Number(localStorage.getItem("count"));

مثال ۳: فرم ورود کاربر

const age = Number(ageInput.value);

if (age >= 18) {
    showAdultSection();
}

مثال ۴: فیلتر محصولات

const min = Number(minInput.value);
const max = Number(maxInput.value);

products.filter(p => p.price >= min && p.price <= max);

مثال ۵: تبدیل داده‌های Query String

const params = new URLSearchParams(location.search);
const page = Number(params.get("page"));

بخش ۱۱: روش‌های حرفه‌ای تبدیل نوع داده (Best Practices – 2026)

✓ همیشه از Number() استفاده کنید

✓ از parseInt فقط برای متون مخلوط (مثل “250px”)

✓ برای بولین‌ها از Boolean() یا !! استفاده کنید

✓ هیچ‌وقت به == اعتماد نکنید

✓ داده‌های ورودی و LocalStorage را همیشه تبدیل کنید

✓ برای boolean از مقادیر مستقیم کاربر اعتماد نکنید (“false” → true!)

بخش ۱۲: الگوی حرفه‌ای Validation ورودی‌ها

مثلاً برای فیلد قیمت:

function normalizePrice(value) {
    const num = Number(value);
    return isNaN(num) ? 0 : num;
}

بخش ۱۳: تمرین پروژه‌ای – سیستم مدیریت کاربر

function normalizeUser(data) {
    return {
        id: Number(data.id),
        age: Number(data.age),
        active: Boolean(data.active),
        name: String(data.name)
    }
}

const user = normalizeUser({
    id: "12",
    age: "19",
    active: "true",
    name: "Sara"
});

console.log(user);

جمع‌بندی نهایی

در این مقاله یاد گرفتید:

• Type Casting چیست

• تفاوت Explicit و Implicit