JavaScript'da turlarni o'zgartirish: String(), Number() va Boolean()

Qisqacha: Turni aniq o'zgartirish — qiymatni o'zingiz kerakli turga aylantirish: Number("25") → 25, String(25) → "25", Boolean("") → false. Formadan kelgan har qanday qiymat satr bo'ladi, shuning uchun hisoblashdan oldin uni Number() bilan songa aylantiring. Tuzoqni unutmang: Number("") — NaN emas, 0.

Bu darsda

• Satrni songa Number(), unar + va parseInt / parseFloat bilan aylantira olasiz va ularning farqini bilasiz.
• Istalgan qiymatni String(), .toString() va template literal bilan satrga aylantira olasiz.
• Boolean() qachon kutilmagan true berishini bilasiz.
• Number("") = 0 va null.toString() kabi tuzoqlardan qochasiz.

Oldin bilishingiz kerak: Ma'lumot turlari xaritasi, Boolean va truthy/falsy, Arifmetik operatorlar, Ternary operatori.

1. Nega bu kerak?

Oldingi darsda "Holat: 70" >= 56 kabi ifodalar kutilmagan natija berishini ko'rdik. Sababi — turlar aralashib ketgan edi. Bu darsda turlarni o'zimiz boshqarishni o'rganamiz.

Tasavvur qiling: onlayn do'kon sahifasida "Soni" maydoni bor. Xaridor 2 yozdi. Siz unga yana bitta sovg'a mahsulot qo'shmoqchisiz:

const soni = "2"; // formadan kelgan qiymat
const jami = soni + 1;

console.log(jami); // 21

2 ta emas, 21 ta! Nega? Chunki HTML formalar qiymatni har doim satr qilib beradi. Hatto <input type="number"> ham. "2" + 1 esa qo'shish emas, satrlarni yopishtirish: "21".

Yechim — hisoblashdan oldin qiymatni o'zingiz songa aylantirish:

const soni = "2";
const jami = Number(soni) + 1;

console.log(jami); // 3

Turni aniq o'zgartirish (explicit type conversion) — qiymatni kodda ko'rinib turadigan tarzda, o'zingiz boshqa turga aylantirish. Number(soni) ni o'qigan har kim darhol tushunadi: "bu yerda satr songa aylantirildi".

Hayotdan o'xshatish: chet elga borganda dollarni bankda so'mga o'zingiz almashtirasiz. Kurs chekda yozilgan, hammasi aniq. Bozorda sotuvchi "o'zim hisoblab qo'yaman" desa-chi? Qaysi kursda hisoblaganini bilmaysiz. JavaScript ham ba'zan turlarni "o'zi hisoblab" o'zgartiradi — buni yashirin o'zgarish deymiz va keyingi darsda o'rganamiz. Bu darsning qoidasi: turni o'zingiz, ochiq o'zgartiring.

2. Songa aylantirish: Number()

2.1 Asosiy ishlatilishi

Number(qiymat) — qavs ichidagi qiymatni songa aylantiradi:

const narx = Number("45000");

console.log(narx); // 45000
console.log(typeof narx); // number

Number — JavaScript'ning tayyor funksiyasi, xuddi console.log kabi. Siz uni faqat chaqirasiz. Funksiyalarni o'zingiz yozishni keyinroq o'rganamiz.

Kasr son ham, manfiy son ham to'g'ri o'qiladi:

console.log(Number("12.5")); // 12.5
console.log(Number("-300")); // -300
console.log(Number("  77  ")); // 77

Uchinchi qatorga e'tibor bering: satrning boshi va oxiridagi bo'sh joylar e'tiborga olinmaydi. Foydalanuvchi tasodifan probel qo'yib yuborsa ham, son to'g'ri o'qiladi.

2.2 Son bo'lmasa — NaN

Satr ichida sonni buzadigan birorta belgi bo'lsa, natija NaN bo'ladi — "son emas" (Not a Number):

console.log(Number("12px")); // NaN
console.log(Number("salom")); // NaN
console.log(Number("12,5")); // NaN
console.log(Number("1 000")); // NaN

Oxirgi ikki qator O'zbekistonda ayniqsa muhim. Biz kasrni ko'pincha vergul bilan yozamiz (12,5), katta sonni esa bo'sh joy bilan ajratamiz (1 000). JavaScript faqat nuqtali kasrni (12.5) va bo'sh joysiz sonni (1000) tushunadi.

NaN ni qanday aniqlash mumkin? NaN === NaN har doim false ekanini tenglik darsida ko'rgan edik. Shuning uchun maxsus tekshiruv bor:

const son = Number("abc");

console.log(Number.isNaN(son)); // true

Number.isNaN va unga o'xshash tekshiruvlarni Matn ↔ son darsida batafsil o'rganamiz.

2.3 Boshqa turlar songa qanday aylanadi

Faqat satrlar emas, har qanday qiymatni Number() ga berish mumkin:

null va undefined ning farqiga e'tibor bering. Ikkalasi ham "yo'qlik", lekin songa har xil aylanadi. Buni eslab qolish uchun: null — ataylab qo'yilgan "bo'sh quti", u 0 ga aylanadi. undefined — qutining o'zi yo'q, undan son chiqmaydi.

2.4 Tuzoq: Number("") — bu 0

const kiritilgan = ""; // foydalanuvchi hech narsa yozmadi
const summa = Number(kiritilgan);

console.log(summa); // 0

Foydalanuvchi summani yozmadi, lekin dastur buni "0 so'm" deb qabul qildi. To'lov tizimida bu jiddiy muammo: "summa kiritilmagan" va "summa nol" — ikki xil narsa.

Shuning uchun bo'sh satrni alohida tekshiring. Oldingi darsdagi ternary shu yerda yordam beradi:

const kiritilgan = "";
const summa = kiritilgan === "" ? null : Number(kiritilgan);

console.log(summa); // null

Endi bo'sh maydon null ga aylandi — "qiymat yo'q" degan aniq belgi.

2.5 Qisqa yo'l: unar +

Arifmetika darsida unar + ni ko'rgan edik. U ham qiymatni songa aylantiradi — xuddi Number() kabi, bir xil qoidalar bilan:

console.log(+"45000"); // 45000
console.log(+""); // 0
console.log(+true); // 1
console.log(-"15"); // -15

Unar + qisqa, shuning uchun begona kodda ko'p uchraydi. Lekin uni ko'zdan qochirish oson: narx + +soni ni birinchi ko'rishda xato deb o'ylash mumkin. Tavsiya: o'zingiz Number() yozing — u ko'proq "gapiradi". Unar + ni esa o'qiy olsangiz yetarli.

2.6 parseInt va parseFloat: boshidan o'qish

Ba'zan satr ichida son va qo'shimcha matn birga keladi: "12px", "3 ta", "72.5kg". Number() bularning hammasiga NaN beradi. Buning uchun boshqa vositalar bor:

console.log(parseInt("12px", 10)); // 12
console.log(parseInt("3 ta", 10)); // 3
console.log(parseFloat("72.5kg")); // 72.5
console.log(parseInt("12.9", 10)); // 12

• parseInt — satrni boshidan o'qiydi va birinchi "son bo'lmagan" belgida to'xtaydi. Faqat butun qismni oladi (12.9 → 12, yaxlitlamaydi).
• parseFloat — xuddi shunday, lekin kasr qismni ham oladi.
• parseInt dagi ikkinchi qiymat 10 — "o'nlik sanoq tizimida o'qi" degani. Uni har doim yozing: ba'zi satrlarni parseInt boshqa sanoq tizimida o'qib yuborishi mumkin. Sanoq tizimlari darsidan ikkilik va o'n oltilikni eslaysizmi? Aynan shular.

Satr boshida son bo'lmasa, ikkalasi ham NaN qaytaradi. Va muhim farq — bo'sh satrda:

console.log(Number("")); // 0
console.log(parseInt("", 10)); // NaN

Qaysi birini tanlash kerak? Number() — qat'iy: satr to'liq son bo'lmasa, rad etadi. Foydalanuvchi kiritgan ma'lumotni tekshirishda aynan shu kerak. parseInt / parseFloat esa kechirimli: "12px" kabi aralash satrdan sonni "sug'urib oladi". Ularni to'liq Matn ↔ son darsida o'rganamiz.

Tekshirib ko'ring: Number("0"), Number("") va Number(" 5 ") nima qaytaradi?

Tekshirib ko'ring: Foydalanuvchi vazn maydoniga "65kg" yozdi. Number va parseFloat qanday natija beradi?

3. Satrga aylantirish

3.1 String()

String(qiymat) — istalgan qiymatni satrga aylantiradi. U hech qachon xato bermaydi:

console.log(String(123)); // 123
console.log(typeof String(123)); // string
console.log(String(true)); // true
console.log(String(null)); // null
console.log(String(undefined)); // undefined

Konsolda 123 va "123" bir xil ko'rinadi. Farqni typeof ko'rsatadi: ikkinchi qatorda string.

3.2 .toString() metodi

Ikkinchi usul — qiymatning o'zidan so'rash:

const narx = 45000;
const faol = true;

console.log(narx.toString()); // 45000
console.log(faol.toString()); // true

Nuqta orqali chaqiriladigan funksiya — metod. Buni console API darsida ko'rgan edik: log — console ning metodi. Metodlar bilan satr darslarida ko'p ishlaymiz.

.toString() ning bitta qo'shimcha imkoniyati bor — sonni boshqa sanoq tizimida yozish:

console.log((5).toString(2)); // 101
console.log((255).toString(16)); // ff

5 ikkilik tizimda 101, 255 o'n oltilik tizimda ff. Bu haqda Son yozish shakllari darsida gaplashamiz.

5 ni nega qavsga oldik? Buni xatolar bo'limida ko'ramiz.

3.3 String() va .toString() farqi

Farq faqat null va undefined da ko'rinadi, lekin juda muhim:

console.log(String(null)); // null

const ism = null;
console.log(ism.toString());

TypeError: Cannot read properties of null (reading 'toString')

Tarjimasi: "null ning xususiyatlarini o'qib bo'lmaydi (toString o'qilayotgan edi)". null va undefined — "hech narsa". Ularda metodlar yo'q, shuning uchun nuqta qo'yib metod chaqirib bo'lmaydi. String() esa ularni ham xotirjam "null" va "undefined" satrlariga aylantiradi.

Qoida: qiymat null yoki undefined bo'lishi mumkin bo'lsa — String() ishlating.

3.4 Template literal bilan

Uchinchi usul — template literal. Bu backtick (`) belgisi ichida yoziladigan satr. Uning ichida ${ } qo'yib, istalgan qiymatni joylash mumkin — u avtomatik satrga aylanadi:

const soni = 3;
const narx = 12000;

console.log(`${soni} ta lag'mon — ${soni * narx} so'm`);
// 3 ta lag'mon — 36000 so'm

${ } ichiga ifoda ham yozish mumkin — soni * narx hisoblandi va satrga joylandi. Template literal'ni alohida darsda to'liq o'rganamiz. Hozir bitta narsa muhim: ${ } ichidagi har qanday qiymat String() qoidasi bo'yicha satrga aylanadi.

const qiymat = null;

console.log(`Natija: ${qiymat}`); // Natija: null

null xato bermadi — xuddi String(null) kabi "null" bo'ldi.

3.5 Qaysi birini tanlash?

Begona kodda to'rtinchi usulni ham ko'rasiz: x + "". U ishlaydi, lekin bu yashirin o'zgartirish — bo'sh satr qo'shilgani uchun JavaScript o'zi aylantiradi. Nega va qanday — keyingi darsda.

Tekshirib ko'ring: const telefon = undefined; bo'lsa, String(telefon) va telefon.toString() nima beradi?

4. Mantiqiy qiymatga aylantirish: Boolean()

Boolean() va !! ni truthy/falsy darsida ko'rgan edik. Qisqa eslatma: 8 ta falsy qiymat false ga, qolgan hammasi true ga aylanadi.

Aylantirish mavzusida bitta tuzoq bor. Satrlarda Boolean() faqat bo'sh-bo'sh emasligiga qaraydi, ma'nosiga emas:

console.log(Boolean("false")); // true
console.log(Boolean("0")); // true
console.log(Boolean(" ")); // true
console.log(Boolean("")); // false

"false" — besh harfli, bo'sh bo'lmagan satr. Shuning uchun true. Bu real loyihalarda uchraydi: sozlamalar faylida yoki URL'da aktiv=false yozilgan bo'ladi, dasturga esa "false" satri keladi.

Satr ichidagi "true" / "false" so'zini mantiqiy qiymatga to'g'ri aylantirish uchun — taqqoslang:

const sozlama = "false"; // fayldan o'qilgan

const aktiv = sozlama === "true";
console.log(aktiv); // false

sozlama === "true" — faqat satr aynan "true" bo'lsa true beradi. Qolgan har qanday satrda false.

5. Umumiy jadval

Bo'sh joyni to'ldiring. Foydalanuvchi "15000" kiritdi. Number("15000") + 5000 natijasi [:20000] bo'ladi. String(15000) + 5000 esa [:150005000] satrini beradi.

6. Ko'p uchraydigan xatolar

6.1 Aylantirishni unutish

Eng ko'p uchraydigan xato. Formadan kelgan qiymatlar bilan to'g'ridan-to'g'ri hisoblash:

const birinchi = "40000";
const ikkinchi = "15000";

console.log(birinchi + ikkinchi); // 4000015000
console.log(Number(birinchi) + Number(ikkinchi)); // 55000

Xato xabari chiqmaydi — shunchaki noto'g'ri natija. Shuning uchun qoida: tashqaridan kelgan har qanday qiymatni ishlatishdan oldin kerakli turga aylantiring. Tashqaridan — ya'ni formadan, fayldan, URL'dan, serverdan.

6.2 Bo'sh satrni 0 deb qabul qilish

Yuqorida ko'rdik: Number("") — 0. Bo'sh maydonni alohida tekshirmasangiz, "kiritilmagan" qiymat jimgina nolga aylanadi.

6.3 null yoki undefined da .toString()

TypeError: Cannot read properties of null (reading 'toString'). Qiymat yo'q bo'lishi mumkin bo'lsa — String() ishlating. Yoki ?. operatori bilan: ism?.toString() xato o'rniga undefined qaytaradi.

6.4 Butun songa to'g'ridan-to'g'ri .toString()

console.log(5.toString());

SyntaxError: Invalid or unexpected token

Tarjimasi: "Noto'g'ri yoki kutilmagan belgi". JavaScript 5. ni ko'rib, "kasr son boshlandi" deb o'ylaydi — 5.5 kabi. Nuqtadan keyin raqam o'rniga toString harflari keladi va u adashadi. Yechim — sonni qavsga olish yoki o'zgaruvchiga yozish:

const son = 5;

console.log((5).toString()); // 5
console.log(son.toString()); // 5

6.5 Vergulli kasr va bo'sh joyli son

Number("12,5") va Number("1 000") — ikkalasi NaN. O'zbek foydalanuvchisi aynan shunday yozishi mumkin. Vergulni nuqtaga almashtirish va bo'sh joylarni olib tashlashni Matnni o'zgartirish darsida o'rganamiz. Hozircha shuni biling: natija NaN bo'lsa, avval satrdagi vergul va bo'sh joylarni tekshiring.

6.6 new Number() bilan aylantirish

Eski kodda new Number(5) yoki new String("salom") ni uchratishingiz mumkin. new — obyekt yaratadigan kalit so'z, uni keyinroq, klasslar mavzusida o'rganamiz. Muammo shundaki, natija son emas, obyekt bo'ladi:

console.log(typeof new Number(5)); // object
console.log(Boolean(new Number(0))); // true

Ikkinchi qatorga qarang: nol ham true bo'lib qoldi, chunki har qanday obyekt truthy. Qoida: aylantirish uchun new siz yozing — Number(x), String(x), Boolean(x).

7. Mashqlar

1-mashq (oson): Savatcha

Formadan ikkita qiymat keldi: const narx = "45000"; va const soni = "3";. Umumiy summani hisoblab, Jami: 135000 so'm deb chiqaring. Number() va template literal ishlating.

const narx = "45000";
const soni = "3";

const jami = Number(narx) * Number(soni);
console.log(`Jami: ${jami} so'm`); // Jami: 135000 so'm

2-mashq (o'rta): Natijani oldindan ayting

Har bir qator nima chiqarishini daftarga yozing, keyin ishga tushirib tekshiring.

console.log(Number("  9  "));
console.log(Number("9 ta"));
console.log(parseInt("9 ta", 10));
console.log(Number(null));
console.log(Number(undefined));
console.log(String(false));
console.log(Boolean("0"));
console.log(Boolean(0));

console.log(Number("  9  ")); // 9
console.log(Number("9 ta")); // NaN
console.log(parseInt("9 ta", 10)); // 9
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(String(false)); // false
console.log(Boolean("0")); // true
console.log(Boolean(0)); // false

3-mashq (qiyin): To'lov maydoni

Click'ga o'xshash to'lov sahifasi uchun kod yozing. kiritilgan o'zgaruvchisida foydalanuvchi yozgan satr bor. xabar o'zgaruvchisi quyidagicha bo'lsin:

• bo'sh satr bo'lsa — "Summa kiritilmagan";
• son bo'lmasa — "Noto'g'ri summa";
• aks holda — "To'lov: 25000 so'm" (kiritilgan son bilan).

kiritilgan ga "", "abc" va "25000" qiymatlarini berib sinab ko'ring.

Ishora: ternary zanjiri ishlating, har variant alohida qatorda. NaN ni Number.isNaN() bilan tekshiring. Bo'sh satrni birinchi tekshiring — nega?

const kiritilgan = "25000";
const summa = Number(kiritilgan);

const xabar =
  kiritilgan === "" ? "Summa kiritilmagan"
  : Number.isNaN(summa) ? "Noto'g'ri summa"
  : `To'lov: ${summa} so'm`;

console.log(xabar); // To'lov: 25000 so'm

8. Real ishda

• Formalar: brauzerdagi har qanday maydon qiymati — satr. Forma qiymatlarini o'qish darsida har safar Number() bilan aylantirasiz.
• Muhit o'zgaruvchilari: server sozlamalari (PORT=3000, DEBUG=false) ham doim satr bo'lib keladi. DEBUG ni Boolean() bilan emas, === "true" bilan tekshirish — backend'da ko'p uchraydigan tuzatish.
• Brauzer xotirasi va URL: sahifa manzilidagi ?sahifa=2 yoki brauzerda saqlangan qiymatlar ham satr.
• TypeScript (JavaScript'ning turlarni qat'iy tekshiradigan versiyasi, kursda alohida qism bor) "2" + 1 kabi aralashtirishlarni kod ishga tushmasdan oldin ushlaydi. Lekin tashqaridan kelgan ma'lumotni baribir o'zingiz aylantirasiz.
• Intervyu: "Number("") va parseInt("") farqi nima?" — tez-tez beriladigan savol. Javob: 0 va NaN.

Xulosa

• Tashqaridan (forma, fayl, URL, server) kelgan qiymat odatda satr — ishlatishdan oldin aylantiring.
• Number() — qat'iy: satr to'liq son bo'lmasa, NaN. Unar + ham xuddi shunday ishlaydi.
• Number("") — 0. Bo'sh satrni alohida tekshiring.
• parseInt(s, 10) / parseFloat(s) — satr boshidagi sonni oladi. Sanoq tizimi 10 ni har doim yozing.
• String(x) hech qachon xato bermaydi; x.toString() esa null / undefined da TypeError beradi.
• Boolean("false") — true. Satrdagi so'zni === "true" bilan tekshiring.

Keyingi dars: Yashirin coercion qoidalari ichidan — JavaScript turlarni o'zi qachon va qanday qoida bilan o'zgartirishini ko'ramiz, [] + {} kabi "sirli" natijalarni ham ochamiz.