WisarWisar
Dasturlash kitobi/2-QISM — JavaScript11 daqiqa

2.6-bob: String va Number metodlari

2-QISM — JavaScript (0 dan chuqurgacha) · 6-mavzu


1. Kirish va motivatsiya

this va prototype 2.5-bob dan keyin biroz "dam olamiz" — lekin nihoyatda amaliy bobda. Kundalik dasturlashning katta qismi — matn (string) va sonlar (number) bilan ishlash: foydalanuvchi ismini formatlash, narxni chiroyli ko'rsatish, email tekshirish, sanani ajratish, matnda qidirish.

JavaScript bizga tayyor metodlar beradi (2.5: ular String.prototype/Number.prototypeda yashaydi). Ularni bilsangiz — "g'ildirakni qaytadan ixtiro qilmaysiz" (0.6, 0.7), kodni qisqa va ishonchli yozasiz.

O'xshatish: string/number metodlari — oshxona pichoqlari to'plami. Har biri bitta ish uchun (kesish, archish, maydalash). Qaysi pichoq qaysi ishga — bilsangiz, tez va toza ishlaysiz. Bilmasangiz — qoshiq bilan non kesishga urinasiz.

Bu bob — ma'lumotni qayta ishlashning amaliy poydevori. Bu yerda eng ko'p ishlatiladigan metodlarni (har biriga izoh va misol bilan) o'rganamiz. Array metodlari 2.7-bob keyingi bobda — ular bu bobning g'oyasini massivlarga kengaytiradi.


2. Nazariya — chuqur tushuntirish

2.1. Muhim tushuncha: string — o'zgarmas (immutable)

String o'zgarmas (immutable) — metod stringni o'zgartirmaydi, balki yangi string qaytaradi (2.1: primitiv). Bu — eng muhim tushuncha:

js
let s = "salom";
s.toUpperCase();        // "SALOM" qaytaradi, LEKIN s o'zgarmaydi
console.log(s);         // "salom" (eski!)
s = s.toUpperCase();    // natijani QAYTA TAYINLASH kerak
console.log(s);         // "SALOM"

Eng ko'p uchraydigan xato: s.toUpperCase() deb yozib, natijani tayinlamaslik. String metodlari natijani qaytaradi — uni ushlash kerak.

2.2. String — indeks va uzunlik

String — belgilar ketma-ketligi; har belgining indeksi bor (0 dan boshlanadi — 0.1):

js
const s = "Salom";
s.length;       // 5 (uzunlik)
s[0];           // "S" (birinchi belgi)
s[s.length-1];  // "m" (oxirgi)
s.charAt(1);    // "a" (indeks bo'yicha)
s.at(-1);       // "m" (oxirgi — manfiy indeks, zamonaviy va qisqa)
s.at(-2);       // "o" (oxiridan ikkinchi)

at — qulay yangilik: s[s.length-1] o'rniga s.at(-1) oxirgi belgini olib beradi. s[-1] esa ishlamaydi (undefined qaytaradi — kvadrat qavs manfiyni qo'llamaydi), shuning uchun oxiridan sanashda at ishlating.

2.3. Asosiy String metodlari — qidirish va tekshirish

js
const s = "Salom, Dunyo!";

s.includes("Dunyo");     // true  — ichida bormi?
s.startsWith("Salom");   // true  — shu bilan boshlanadimi?
s.endsWith("!");         // true  — shu bilan tugaydimi?
s.indexOf("o");          // 4     — birinchi "o" indeksi (yo'q bo'lsa -1)
s.lastIndexOf("o");      // 10    — oxirgi "o"

2.4. Kesish va ajratish

js
const s = "Salom, Dunyo!";

s.slice(0, 5);      // "Salom"  — [boshlang'ich, oxir) — eng ko'p ishlatiladi
s.slice(-6);        // "Dunyo!" — manfiy = oxiridan
s.substring(7, 12); // "Dunyo"  — slice'ga o'xshash (manfiyni qo'llamaydi)
s.split(", ");      // ["Salom", "Dunyo!"] — ajratuvchi bo'yicha MASSIVga
s.split("");        // ["S","a","l",...] — har belgi
"a,b,c".split(","); // ["a","b","c"]

split — juda muhim: matnni massivga aylantiradi (keyin Array metodlari — 2.7 bilan ishlash mumkin). join 2.7-bob — teskarisi (massivni matnga).

2.5. O'zgartirish va tozalash

js
const s = "  Salom Dunyo  ";

s.trim();                 // "Salom Dunyo" — chetdagi bo'shliqlarni olib tashlaydi
s.toUpperCase();          // "  SALOM DUNYO  "
s.toLowerCase();          // "  salom dunyo  "
s.replace("Salom", "Hi"); // birinchi "Salom"ni almashtiradi
s.replaceAll("o", "0");   // BARCHA "o"ni almashtiradi
s.repeat(3);              // matnni 3 marta
"5".padStart(3, "0");     // "005" — chapni to'ldirib (0.1: binary ko'rsatish)
"5".padEnd(3, "0");       // "500"

2.6. Number — asosiy metodlar

js
const n = 3.14159;

n.toFixed(2);             // "3.14" — kasr qismni 2 xonaga (MATN qaytaradi!)
n.toFixed(0);             // "3"
(1234.5).toLocaleString("uz"); // "1 234,5" — mahalliy format (ajratuvchi bilan)
(255).toString(16);       // "ff" — boshqa sanoq sistemaga (0.1!)
(255).toString(2);        // "11111111" — binary (0.1)

toFixed MATN qaytaradi: 3.14-bob.toFixed(1) "3.1" (string!). Yana son kerak bo'lsa — Number(n.toFixed(2)) yoki +n.toFixed(2) (2.1: coercion).

Intl.NumberFormat — professional raqam/valyuta formatlash

toLocaleString qulay, lekin bir xil formatni ko'p marta ishlatganda (masalan ro'yxatdagi har bir narx) yangi formatlovchi obyektni bir marta yaratib, qayta-qayta format chaqirgan tezroq va aniqroq. Intl.NumberFormat — shu maqsad uchun standart vosita (ichida toLocaleString ham aynan shuni ishlatadi):

js
// Oddiy raqam — ming ajratuvchi bilan
const raqam = new Intl.NumberFormat("uz-UZ");
raqam.format(1990000);            // "1 990 000"

// Valyuta — belgi/kod bilan (style: "currency")
const som = new Intl.NumberFormat("uz-UZ", { style: "currency", currency: "UZS" });
som.format(19990);                // "19 990 UZS" (lokalga qarab belgi joylashuvi)

const dollar = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
dollar.format(1234.5);            // "$1,234.50"

// Foiz (style: "percent" — qiymat 0..1 oralig'ida beriladi)
new Intl.NumberFormat("uz-UZ", { style: "percent" }).format(0.25);  // "25%"

// Kasr xonalarini cheklash
new Intl.NumberFormat("uz-UZ", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
}).format(3.14159);               // "3,14"

Qachon nima: bir martalik formatlash uchun toLocaleString qisqa va yetarli; bir xil formatni takror ishlatganda (sikl, jadval) Intl.NumberFormat obyektini bir marta yarating va formatni qayta-qayta chaqiring.

2.7. Matnni songa, sonni matnga aylantirish

js
// Matn  son (2.1: kirish odatda string)
Number("42");        // 42
Number("3.14");      // 3.14
Number("abc");       // NaN (0.1)
parseInt("42px");    // 42    — boshidagi butun sonni oladi
parseFloat("3.14m"); // 3.14  — kasr bilan
+"42";               // 42    — qisqa yo'l (unary +)

// Son  matn
String(42);          // "42"
(42).toString();     // "42"
`${42}`;             // "42" (template literal — 2.1)

2.8. Number va Math — tekshirish va hisob

js
Number.isInteger(5);     // true
Number.isNaN(NaN);       // true  — NaN'ni tekshirish (0.1, 2.1)
Number.isFinite(Infinity); // false
Number.MAX_SAFE_INTEGER; // eng katta xavfsiz butun (0.1: BigInt chegarasi)

// Math — matematik funksiyalar
Math.round(4.6);   // 5    yaxlitlash
Math.floor(4.9);   // 4    pastga
Math.ceil(4.1);    // 5    yuqoriga
Math.max(1, 5, 3); // 5
Math.min(1, 5, 3); // 1
Math.abs(-7);      // 7    modul
Math.random();     // 0..1 oralig'ida tasodifiy (0.6: tasodif)
Math.sqrt(16);     // 4    ildiz
Math.pow(2, 10);   // 1024 (yoki 2 ** 10 — 2.1)

Tasodifiy butun son (juda ko'p kerak bo'ladi):

js
// min..max oralig'ida tasodifiy butun
Math.floor(Math.random() * (max - min + 1)) + min;

3. Sintaksis — tez ma'lumotnoma

js
// STRING (o'zgarmas — natijani tayinla!)
s.length  s[i]  s.charAt(i)  s.at(-1)
s.includes(x)  s.startsWith(x)  s.endsWith(x)  s.indexOf(x)
s.slice(a, b)  s.substring(a, b)  s.split(sep)
s.trim()  s.toUpperCase()  s.toLowerCase()
s.replace(a, b)  s.replaceAll(a, b)  s.repeat(n)  s.padStart(n, ch)

// NUMBER
n.toFixed(d)  n.toString(asos)  n.toLocaleString()
Number(s)  parseInt(s)  parseFloat(s)  +s
Number.isInteger(n)  Number.isNaN(n)
new Intl.NumberFormat(locale, opts).format(n)   // takroriy/valyuta format

// MATH
Math.round/floor/ceil/abs/max/min/random/sqrt/pow

4. Batafsil kod namunalari

Misol 1 — Matnni tozalash va formatlash

js
let ism = "  aLi  vALIYEV  ";

// Tozalash zanjiri (chaining — metodlar ketma-ket)
ism = ism.trim().toLowerCase();           // "ali  valiyev"
console.log(ism);

// Har so'zning birinchi harfini katta qilish
const formatlangan = ism
  .split(/\s+/)                            // bo'shliqlar bo'yicha massivga (2.4)
  .map(soz => soz[0].toUpperCase() + soz.slice(1))  // har so'z (2.7: map)
  .join(" ");                              // qayta birlashtirish (2.7)
console.log(formatlangan);                 // "Ali Valiyev"

Misol 2 — Narxni chiroyli formatlash (0.1: pul)

js
function narxFormat(tiyin) {
  const som = tiyin / 100;                  // tiyin  so'm (0.1: pulni butun saqlash)
  return som.toLocaleString("uz-UZ") + " so'm";
}
console.log(narxFormat(1999000));           // "19 990 so'm"

// toFixed — kasrni qat'iy 2 xona (lekin MATN — 2.6)
const ulush = 1 / 3;
console.log(ulush.toFixed(2));              // "0.33"

Misol 3 — Email/telefonni tekshirish va ajratish

js
const email = "Ali.Valiyev@Gmail.COM";

// Normalizatsiya (2.5)
const toza = email.trim().toLowerCase();    // "ali.valiyev@gmail.com"

// Oddiy tekshirish (RegEx — 2.13-bobda chuqur)
const togriMi = toza.includes("@") && toza.includes(".");
console.log(togriMi);                       // true

// Domen va foydalanuvchini ajratish (2.4)
const [foydalanuvchi, domen] = toza.split("@");  // destructuring (2.8)
console.log(foydalanuvchi);                 // "ali.valiyev"
console.log(domen);                         // "gmail.com"

Misol 4 — Sonlar bilan ishlash

js
// Foydalanuvchi kiritgan "son" — string (2.7)
const kiritilgan = "42px";
const son = parseInt(kiritilgan);           // 42 (px tushib qoladi)
console.log(Number.isNaN(son) ? "Xato" : son * 2);  // 84

// Tasodifiy butun son (1..6 — zar) (2.8)
const zar = Math.floor(Math.random() * 6) + 1;
console.log(`Zar: ${zar}`);

// Yaxlitlash va format
const ortacha = (85 + 92 + 78) / 3;
console.log(ortacha.toFixed(1));            // "85.0"
console.log(Math.round(ortacha));           // 85

5. To'g'ri va noto'g'ri holatlar

1) String metod natijasini tayinlamaslik

js
//  string o'zgarmas — natija yo'qoladi (2.1)
let s = "salom";
s.toUpperCase();
console.log(s);   // "salom" (o'zgarmadi!)

//  natijani tayinla
s = s.toUpperCase();

2) toFixed natijasini son deb ishlatish

js
//  toFixed MATN qaytaradi (2.6)
const jami = (5.5).toFixed(2) + 1;   // "5.501" (matn birlashtirish!)

//  qayta songa
const jami = Number((5.5).toFixed(2)) + 1;  // 6.5

3) == bilan son/matn taqqoslash (coercion)

js
//  "5" string sifatida keladi (2.1)
if (kiritilgan == 5) { }

//  aniq aylantir, keyin ===
if (Number(kiritilgan) === 5) { }

4) NaNni === bilan tekshirish

js
//  NaN === NaN  false (!!) — JS xususiyati
if (x === NaN) { }   // hech qachon true bo'lmaydi

// 
if (Number.isNaN(x)) { }

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — Cannot read properties of undefined (reading 'toUpperCase')

Sababi: undefined/nullda string metod chaqirildi. Yechimi: avval tekshiring (if (s) yoki s?.toUpperCase() — 2.1 optional chaining).

Xato 2 — NaN natija

Sababi: noto'g'ri matn songa aylantirildi (Number("abc") — 0.1). Yechimi: Number.isNaN() bilan tekshiring; parseInt/parseFloat ehtiyotkorlik bilan.

Xato 3 — toFixed floating point xatosi

js
(1.005).toFixed(2);   // "1.00" (kutilgan "1.01") — 0.1 floating point!

Sababi: binary floating point (0.1-bob). Yechimi: pul uchun tiyin/butun son sifatida saqlang 0.1-bob; aniq kerak bo'lsa maxsus kutubxona.

Xato 4 — slice vs splice chalkashligi

Sababi: slice (string/array — nusxa, o'zgartirmaydi) va splice (faqat array — o'zgartiradi, 2.7) aralash. Yechimi: string uchun slice; massivni o'zgartirmaslik uchun ham slice.

Xato 5 — Bo'shliq/registr tufayli taqqoslash xatosi

js
"Ali" === "ali "   // false (registr + bo'shliq)

Sababi: taqqoslashdan oldin normalizatsiya yo'q. Yechimi: .trim().toLowerCase() bilan normalizatsiya (Misol 3).


7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

  • Array metodlari 2.7-bob: split massiv .map/.filter join (Misol 1).
  • RegEx 2.13-bob: murakkab matn qidirish/almashtirish (replace regex bilan).
  • DOM 2.16-bob: foydalanuvchi kiritgan matnni tozalash/formatlash.
  • Validatsiya 5.9-bob: email/telefon tekshirish (Misol 3).
  • Backend (5): so'rov ma'lumotini (string) qayta ishlash, songa aylantirish.
  • Sana 2.9-bob: sanani matnga formatlash; toLocaleString.
  • Pul/format 0.1-bob: toLocaleString, toFixed, tiyin sifatida saqlash.

8. Eng yaxshi amaliyotlar (best practices)

  • String o'zgarmas — natijani tayinlang 2.1-bob. Metodlarni zanjirlang (.trim().toLowerCase()).
  • Taqqoslashdan oldin normalizatsiya (.trim().toLowerCase()) — registr/bo'shliq bug'lari.
  • toFixed MATN qaytaradi — son kerak bo'lsa Number() 2.6-bob.
  • Number.isNaN() bilan tekshiring (=== NaN ishlamaydi — 6-bo'lim).
  • Pulni tiyin (butun son) sifatida saqlang, toFixedga tayanmang 0.1-bob.
  • split/join bilan stringmassiv o'rtasida erkin o'ting 2.7-bob.
  • ?. bilan undefinedda metod chaqirishdan himoyalaning 2.1-bob.
  • Mahalliy format uchun toLocaleString (sana, pul, son); takror/valyuta uchun Intl.NumberFormatni bir marta yarating 2.6-bob.
  • Oxirgi belgi uchun s.at(-1)s[s.length-1]dan qisqa va o'qiluvchanroq 2.2-bob.

9. Amaliy loyiha: "Matn va Son Utility To'plami"

String/number metodlarini amalda mustahkamlovchi foydali funksiyalar.

Maqsad

String va number metodlarini birlashtirib, real matn/son qayta ishlash vazifalarini hal qiluvchi toza funksiyalar yozish.

Talablar (requirements)

  1. sarlavhaFormat(matn) — har so'zning birinchi harfini katta qiladi (Title Case — Misol 1).
  2. slug(matn) — matnni URL-do'st qiladi: kichik harf, bo'shliqlar -, chetdagi bo'shliq olib tashlanadi (masalan "Salom Dunyo" "salom-dunyo").
  3. narxFormat(tiyin) — tiyinni "19 990 so'm" ko'rinishida (Misol 2, 0.1).
  4. telefonFormat(raqam)"998901234567" "+998 90 123 45 67" (slice/+ bilan).
  5. qisqartir(matn, uzunlik) — matn uzun bo'lsa kesib "..." qo'shadi (masalan "Juda uzun matn", 8 "Juda uz...").
  6. tasodifiyParol(uzunlik) — berilgan uzunlikda tasodifiy parol (harf+raqam — Math.random, 2.8).
  7. sonAjrat(matn)"Narx: 42 000 so'm" dan faqat sonni ajratib oladi (parseInt/replace).
  8. Har funksiyani chegaraviy holat (bo'sh matn, undefined) bilan sinang 0.6-bob.

Maslahatlar (hint)

  • Title Case: split map (2.7) join (Misol 1).
  • Slug: .trim().toLowerCase().replaceAll(" ", "-") 2.5-bob.
  • Telefon: slice bilan bo'laklarni oling, template literal bilan birlashtiring 2.1-bob.
  • Tasodifiy parol: belgilar stringidan Math.floor(Math.random() * len) indeks bilan tanlang 2.8-bob.
  • undefineddan himoya: s?.trim() yoki boshida if (!matn) return "".

"Tayyor" mezonlari (acceptance criteria)

  • Barcha 7 funksiya to'g'ri ishlaydi.
  • narxFormat ming ajratuvchi bilan (toLocaleString).
  • slug to'g'ri URL-do'st natija beradi.
  • telefonFormat to'g'ri bo'laklaydi.
  • qisqartir faqat kerakli holatda kesadi.
  • tasodifiyParol har safar har xil natija beradi.
  • Chegaraviy holatlar (bo'sh/undefined) qulamaydi.
  • String metod natijalari to'g'ri tayinlangan 2.1-bob.

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.


10. Xulosa va keyingi bobga ko'prik

Bu bobda matn va sonlarni qayta ishlashning amaliy qurolini o'rgandik:

  • String — o'zgarmas (immutable): metod yangi qiymat qaytaradi — natijani tayinlang.
  • Qidirish: includes, indexOf, startsWith/endsWith; kesish: slice, split; tozalash: trim, toUpperCase, replace/replaceAll, padStart.
  • Number: toFixed (matn qaytaradi!), toString(asos) 0.1-bob, toLocaleString/Intl.NumberFormat (valyuta/raqam format); aylantirish: Number(), parseInt, +.
  • Number.isNaN (=== NaN emas), Math (round/floor/random/max...).
  • Tuzoqlar: natijani tayinlamaslik, toFixed matn, == coercion, floating point 0.1-bob.

Keyingi bob — 2.7-bob: Array va barcha metodlari (map, filter, reduce, find, ...). Stringni massivga aylantirdik (split); endi massivlarni chuqur o'rganamiz. Array metodlari — .map, .filter, .reduce — zamonaviy JS va React (11) ning eng ko'p ishlatiladigan vositasi. Bu — funksional dasturlashning amaliy yuragi.


Foydalanilgan rasmiy/ishonchli manbalar

  • MDN Web Docs — String (prototype metodlari), string immutability
  • MDN Web Docs — Number, Number.prototype.toFixed, parseInt/parseFloat
  • MDN Web Docs — Math, Number.isNaN/isInteger
  • MDN Web Docs — String.prototype.at, Intl.NumberFormat

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
2.6-bob: String va Number metodlari — Wisar