JavaScript'da satrni kesish, bo'lish va to'ldirish: slice, split, padStart

Qisqacha: matn.slice(boshi, oxiri) satrdan bo'lak kesib oladi; oxiri indeksidagi belgi kirmaydi, manfiy indeks esa oxiridan sanaladi. split(",") matnni ajratuvchi bo'yicha ro'yxatga (massivga) bo'ladi. padStart va padEnd satrni kerakli uzunlikkacha to'ldiradi ("7".padStart(2, "0") → "07"), repeat esa satrni takrorlaydi. Asl satr hech qachon o'zgarmaydi.

Bu darsda

• slice bilan satrdan istalgan bo'lakni, jumladan oxiridan, kesib ola olasiz.
• slice, substring va eskirgan substr farqini bilasiz.
• split bilan matnni bo'laklarga ajrata olasiz va natija nima ekanini tushunasiz.
• padStart, padEnd va repeat bilan matnni chiroyli formatlay olasiz.
• Telefon raqamini +998 90 123 45 67 ko'rinishiga keltira olasiz va karta raqamini yashira olasiz.

Oldin bilishingiz kerak: String asoslari, Template literals, Matn ichida qidirish.

1. Nega bu kerak?

Siz yetkazib berish xizmati uchun ilova yozyapsiz. Bazada mijoz telefoni shunday saqlangan: 998901234567. Ekranda esa odam o'qiy oladigan ko'rinish kerak: +998 90 123 45 67.

Yana bir nechta shunga o'xshash vazifa bor:

• To'lov sahifasida karta raqamini to'liq ko'rsatib bo'lmaydi. Faqat oxirgi 4 raqam: **** **** **** 1234.
• Buyurtma raqami doim olti xonali bo'lsin: 42 emas, 000042.
• Formadan "Aliyev Jasur" keldi. Familiya va ismni alohida saqlash kerak.

Hammasida bitta ish bor: matnni bo'laklarga ajratish yoki unga belgi qo'shish. Oldingi darsda bo'lak qayerda turganini topishni o'rgandik. Endi shu joydan kesamiz, bo'lamiz va to'ldiramiz.

2. slice — bo'lak kesib olish

2.1 Boshi va oxiri

slice (inglizcha "bo'lak", "tilim") satrning bir qismini yangi satr qilib qaytaradi. Ikki argument oladi: qaysi indeksdan boshlash va qaysi indeksda to'xtash.

const shahar = "Samarqand";

console.log(shahar.slice(0, 5)); // Samar
console.log(shahar.slice(5, 9)); // qand

Muhim qoida: oxiri kirmaydi. slice(0, 5) — 0, 1, 2, 3, 4-indekslar. 5-indeksdagi q ikkinchi bo'lakka o'tdi.

Buni eslab qolishning qulay usuli bor. Indeksni belgining o'zi emas, belgilar orasidagi chiziq deb tasavvur qiling. Xuddi non kesadigan pichoq izlari kabi:

| S | a | m | a | r | q | a | n | d |
0   1   2   3   4   5   6   7   8   9

slice(0, 5) — 0-chiziqdan 5-chiziqqacha kesish. Orasida aynan 5 ta belgi: Samar. Shu sabab foydali qoida chiqadi: bo'lak uzunligi = oxiri - boshi.

2.2 Oxirini yozmasangiz

Ikkinchi argument bo'lmasa, slice matn oxirigacha kesadi:

const shahar = "Samarqand";

console.log(shahar.slice(5)); // qand
console.log(shahar.slice(0)); // Samarqand

2.3 Manfiy indeks — oxiridan sanash

String asoslari darsida at(-1) oxirgi belgini berishini ko'rgandik. slice ham manfiy indeksni tushunadi: -1 — oxirgi belgi, -2 — undan oldingisi.

const karta = "8600123456781234";

console.log(karta.slice(-4)); // 1234
console.log(karta.slice(0, -4)); // 860012345678

slice(-4) — "oxirgi 4 ta belgi". Karta raqami 16 xonali bo'ladimi yoki 19 — farqi yo'q, doim oxirgi to'rttasi olinadi. slice(0, -4) esa teskarisi: "oxirgi 4 tadan tashqari hammasi".

Manfiy indekslarni chiziqlar ostiga yozsak:

| S | a | m | a | r | q | a | n | d |
-9  -8  -7  -6  -5  -4  -3  -2  -1

2.4 indexOf bilan birga

slice ning eng kuchli tomoni — oldingi darsdagi qidirish metodlari bilan birga ishlashi. Indeksni topamiz, keyin shu joydan kesamiz:

const email = "jasur@gmail.com";
const at = email.indexOf("@");

console.log(email.slice(0, at)); // jasur
console.log(email.slice(at + 1)); // gmail.com

@ 5-indeksda. slice(0, 5) — undan oldingi qism, @ ning o'zi kirmaydi. slice(6) — @ dan keyingi qism. + 1 bo'lmasa, natija @gmail.com bo'lardi.

Fayl kengaytmasi ham xuddi shunday olinadi — oxirgi nuqta bo'yicha:

const fayl = "hisobot.2026.pdf";
const nuqta = fayl.lastIndexOf(".");

console.log(fayl.slice(nuqta + 1)); // pdf
console.log(fayl.slice(0, nuqta)); // hisobot.2026

2.5 Chegaradan chiqsa — xato yo'q

const ism = "Ali";

console.log(ism.slice(0, 100)); // Ali
console.log(ism.slice(10) === ""); // true

Satrda 100 ta belgi yo'q, lekin slice xato bermaydi — borini qaytaradi. Boshi matndan tashqarida bo'lsa, bo'sh satr "" qaytadi. Bu qulay, lekin xatoni yashirishi ham mumkin: indeksni noto'g'ri hisoblasangiz, JavaScript sizni ogohlantirmaydi.

Tekshirib ko'ring: const s = "Buxoro"; bo'lsa, s.slice(1, 4), s.slice(-2) va s.slice(2) nima qaytaradi?

3. Amaliyot: telefon raqamini formatlash

3.1 To'liq yechilgan misol

Bazadagi 998901234567 ni +998 90 123 45 67 ga aylantiramiz. Avval raqamni bo'laklarga bo'lib, har birining indekslarini aniqlaymiz:

Endi bo'laklarni template literal ichida yig'amiz:

const tel = "998901234567";

const chiroyli = `+${tel.slice(0, 3)} ${tel.slice(3, 5)} ${
  tel.slice(5, 8)} ${tel.slice(8, 10)} ${tel.slice(10)}`;

console.log(chiroyli); // +998 90 123 45 67

Har bir ${...} ichida bittadan slice. Ular orasidagi bo'sh joylar matnning o'ziga tushadi. Uzun qatorni telefon ekraniga sig'ishi uchun ${ dan keyin ikkiga bo'ldik — natija o'zgarmaydi.

E'tibor bering: har bir slice ning oxiri keyingisining boshi bilan bir xil (3, 5, 8, 10). Bu "oxiri kirmaydi" qoidasining foydasi: bo'laklar bir-biriga yopishib turadi, orada belgi yo'qolmaydi.

3.2 O'zingiz to'ldiring

Endi bazada raqam + bilan saqlangan: +998931112233. Uni 93 111 22 33 ko'rinishiga keltiring (davlat kodisiz). Indekslar bitta surildi, chunki boshida + bor:

const tel = "+998931112233";

const qisqa = `${tel.slice(4, )} ${tel.slice(6, 9)} ${
  tel.slice(, 11)} ${tel.slice()}`;

console.log(qisqa); // 93 111 22 33

const tel = "+998931112233";

const qisqa = `${tel.slice(4, 6)} ${tel.slice(6, 9)} ${
  tel.slice(9, 11)} ${tel.slice(11)}`;

console.log(qisqa); // 93 111 22 33

4. substring va eskirgan substr

4.1 substring — slice ning qarindoshi

Kodda substring ni ham uchratasiz. Musbat indekslarda u slice bilan bir xil ishlaydi:

const shahar = "Samarqand";

console.log(shahar.substring(0, 5)); // Samar
console.log(shahar.slice(0, 5)); // Samar

Farq ikki holatda ko'rinadi:

const s = "Salom";

console.log(s.slice(-3)); // lom
console.log(s.substring(-3)); // Salom
console.log(s.slice(3, 1) === ""); // true
console.log(s.substring(3, 1)); // al

• substring manfiy indeksni tushunmaydi — uni 0 deb oladi. Shuning uchun substring(-3) butun satrni qaytardi.
• substring da boshi oxiridan katta bo'lsa, u ikkalasini o'rnini almashtiradi: substring(3, 1) = substring(1, 3). slice esa bunday holatda bo'sh satr beradi.

Qaysi birini ishlatish kerak? slice ni. U manfiy indeksni tushunadi va boshqa joylarda ham xuddi shunday ishlaydi — massivlarda ham slice bor. substring ni esa boshqalarning kodida tanib olsangiz yetarli.

4.2 substr — ishlatmang

Eski kodda substr ham uchraydi. Uning ikkinchi argumenti — oxirgi indeks emas, nechta belgi olish:

console.log("Salom".substr(1, 3)); // alo

substr rasmiy standartda eskirgan (deprecated) deb belgilangan. U hali ishlaydi, lekin yangi kodda yozilmaydi. VS Code uni ustidan chizib ko'rsatadi. Ko'rsangiz — slice ga almashtiring: substr(1, 3) = slice(1, 1 + 3).

Tekshirib ko'ring: "Toshkent".slice(-4) va "Toshkent".substring(-4) nima qaytaradi?

5. split — matnni bo'laklarga bo'lish

5.1 Ajratuvchi bo'yicha bo'lish

slice bitta bo'lak kesadi. Ba'zan esa matnni birdaniga ko'p bo'lakka ajratish kerak. Masalan, formadan to'liq ism keldi: "Aliyev Jasur". split (inglizcha "bo'lmoq") matnni berilgan ajratuvchi (separator) belgi bo'yicha bo'ladi:

const toliq = "Aliyev Jasur";

console.log(toliq.split(" ")); // [ 'Aliyev', 'Jasur' ]

Ajratuvchi — bo'sh joy " ". split matnni har bir bo'sh joyda "kesdi", bo'sh joylarning o'zi esa tashlab yuborildi.

Boshqa ajratuvchilar bilan:

const sana = "2026-09-27";
const bozor = "olma, nok, uzum";

console.log(sana.split("-")); // [ '2026', '09', '27' ]
console.log(bozor.split(", ")); // [ 'olma', 'nok', 'uzum' ]

Ikkinchi misolda ajratuvchi ikki belgidan iborat: vergul va bo'sh joy. Ajratuvchi istalgan uzunlikda bo'lishi mumkin.

5.2 Natija — massiv

Natija yangi ko'rinishda chiqdi: kvadrat qavslar ichida, vergul bilan ajratilgan satrlar. Bu massiv (array) — qiymatlar ro'yxati. Xuddi bozorga olib boriladigan xaridlar ro'yxati kabi: bir varaqda bir nechta narsa, tartib bilan yozilgan.

Massiv — satr emas, alohida tur. Uni Massiv: yaratish va elementga murojaat darsida batafsil o'rganamiz. Hozircha uch narsani bilsangiz yetarli:

• split doim massiv qaytaradi — hatto bitta bo'lak chiqsa ham.
• Massivda satr metodlari yo'q. Ro'yxatning har bir bo'lagi bilan ishlashni massiv darslarida ko'ramiz.
• typeof massiv uchun "object" beradi — buni typeof darsida ko'rgandik.

const qismlar = "Aliyev Jasur".split(" ");

console.log(typeof qismlar); // object

Brauzer konsoli massivni biroz boshqacha ko'rsatadi: (2) ['Aliyev', 'Jasur']. Qavs ichidagi 2 — bo'laklar soni. Ma'nosi Node'dagi [ 'Aliyev', 'Jasur' ] bilan bir xil.

5.3 Har bir belgiga bo'lish

Ajratuvchi bo'sh satr "" bo'lsa, matn alohida belgilarga bo'linadi:

console.log("salom".split("")); // [ 's', 'a', 'l', 'o', 'm' ]

Diqqat: Emoji bilan split("") noto'g'ri ishlaydi — bitta emoji ikki "yarim belgi"ga bo'linib ketadi. Nega shunday bo'lishini Unicode va emoji darsida ko'ramiz.

5.4 Chekka holatlar

console.log("Salom".split("-")); // [ 'Salom' ]
console.log("olma,,nok".split(",")); // [ 'olma', '', 'nok' ]
console.log("a b c d".split(" ", 2)); // [ 'a', 'b' ]

• Ajratuvchi topilmasa — butun matn bitta bo'lak bo'lib qaytadi.
• Ikki ajratuvchi yonma-yon kelsa — orasida bo'sh satr '' paydo bo'ladi. Foydalanuvchi tasodifan ikki marta vergul qo'ysa, ro'yxatda bo'sh bo'lak chiqadi.
• Ikkinchi argument — nechta bo'lak kerakligi. Qolganlari tashlab yuboriladi.

Tekshirib ko'ring: "Toshkent;Buxoro;Xiva".split(";") nima qaytaradi? "Toshkent".split(";") chi?

6. repeat — takrorlash

repeat satrni berilgan marta takrorlab, yangi satr qaytaradi. Konsolda chiziq chizish uchun juda qulay:

console.log("-".repeat(20)); // --------------------
console.log("ab".repeat(3)); // ababab

20 ta tireni qo'lda sanab yozish shart emas. Chiziq uzunligini o'zgartirmoqchi bo'lsangiz, faqat bitta raqamni o'zgartirasiz.

Chek sarlavhasini yasaymiz:

const chiziq = "=".repeat(24);

console.log(chiziq);
console.log("    CHOYXONA «BAHOR»");
console.log(chiziq);

Konsolda:

========================
    CHOYXONA «BAHOR»
========================

Bir nechta qoida:

• repeat(0) — bo'sh satr "".
• Kasr son pastga yaxlitlanadi: "=".repeat(2.9) — "==".
• Manfiy son xato beradi. Bu haqda "Ko'p uchraydigan xatolar" bo'limida.

7. padStart va padEnd — to'ldirish

7.1 padStart — boshidan to'ldirish

Soat 9 dan 5 daqiqa o'tdi. Ekranda 9:5 emas, 09:05 ko'rinishi kerak. padStart satrni kerakli uzunlikkacha boshidan to'ldiradi:

const soat = "9";
const daqiqa = "5";

const vaqt = `${soat.padStart(2, "0")}:${daqiqa.padStart(2, "0")}`;

console.log(vaqt); // 09:05

padStart(2, "0") — "uzunlik 2 bo'lguncha boshiga 0 qo'sh". "9" bir belgili — bitta 0 qo'shildi. Birinchi argument — yakuniy uzunlik, qo'shiladigan belgilar soni emas.

Buyurtma raqami ham xuddi shunday:

console.log("42".padStart(6, "0")); // 000042
console.log("12345".padStart(6, "0")); // 012345
console.log("1234567".padStart(6, "0")); // 1234567

Oxirgi qatorga qarang: satr allaqachon 6 dan uzun. padStart uni qisqartirmaydi — o'zgarishsiz qaytaradi.

7.2 Karta raqamini yashirish

To'lov sahifasida karta raqamining faqat oxirgi 4 raqami ko'rinadi. slice va padStart ni birlashtiramiz:

const karta = "8600123456781234";
const oxirgi = karta.slice(-4);

console.log(oxirgi.padStart(karta.length, "*")); // ************1234
console.log(`**** **** **** ${oxirgi}`); // **** **** **** 1234

Birinchi usulda yulduzchalar soni karta uzunligiga moslashadi: 16 xonali Uzcard ham, 19 xonali karta ham to'g'ri yashiriladi. Ikkinchi usul — Click va Payme ilovalaridagi tanish ko'rinish.

repeat bilan ham bo'ladi: "*".repeat(12) + oxirgi. Lekin bunda 12 ni o'zingiz hisoblashingiz kerak.

Diqqat: Karta raqamini ekranda yashirish — faqat ko'rinish uchun. To'liq raqam baribir dastur ichida turibdi. Real to'lov tizimlarida to'liq karta raqami odatda sizning serveringizga umuman kelmaydi — uni to'lov xizmati (Click, Payme) saqlaydi. Bu haqda to'lov darslarida gaplashamiz.

7.3 padEnd — oxiridan to'ldirish

padEnd xuddi shunday ishlaydi, faqat belgilarni oxiriga qo'shadi. Chekda nomlar va narxlarni ustun qilib tekislash uchun ideal:

console.log("Non".padEnd(12, ".") + "4 000 so'm");
console.log("Choy".padEnd(12, ".") + "6 000 so'm");
console.log("Lag'mon".padEnd(12, ".") + "35 000 so'm");

Konsolda:

Non.........4 000 so'm
Choy........6 000 so'm
Lag'mon.....35 000 so'm

Har bir nom 12 belgigacha nuqta bilan to'ldirildi. Shuning uchun narxlar bir xil ustundan boshlanadi.

7.4 To'ldirish qoidalari

console.log("5".padStart(3) === "  5"); // true
console.log("5".padStart(4, "ab")); // aba5

• Ikkinchi argumentni yozmasangiz, bo'sh joy bilan to'ldiriladi.
• To'ldiruvchi bir necha belgili bo'lsa, u takrorlanadi va ortiqchasi kesib tashlanadi: aba + 5.
• Satr allaqachon yetarli uzun bo'lsa — hech narsa o'zgarmaydi.

Tekshirib ko'ring: "7".padStart(3, "0") va "7".padEnd(3, "0") nima qaytaradi?

8. Ko'p uchraydigan xatolar

8.1 "Oxiri ham kiradi" deb o'ylash

const ism = "Malika";

console.log(ism.slice(0, 3)); // Mal

Ko'pchilik slice(0, 3) to'rt belgi — 0, 1, 2, 3 — beradi deb kutadi. Aslida 3-indeks kirmaydi. Adashsangiz, chiziqlar rasmini eslang yoki qoidani qo'llang: uzunlik = oxiri - boshi = 3.

8.2 Natijani saqlamaslik

let ism = "Malikaxon";
ism.slice(0, 6);

console.log(ism); // Malikaxon

slice asl satrni o'zgartirmaydi — satrlar o'zgarmas. U yangi satr qaytardi, lekin biz uni hech qayerga saqlamadik va natija yo'qolib ketdi. To'g'risi — natijani o'zgaruvchiga yozish:

let ism = "Malikaxon";
ism = ism.slice(0, 6);

console.log(ism); // Malika

Bu qoida bu darsdagi barcha metodlarga tegishli: split, padStart, padEnd, repeat ham faqat yangi qiymat qaytaradi.

8.3 Songa padStart

const soat = 9;
console.log(soat.padStart(2, "0"));

TypeError: soat.padStart is not a function

Tarjimasi: "soat.padStart — funksiya emas". soat — son, padStart esa faqat satrlarda bor. Soat va daqiqa ko'pincha son bo'lib keladi, shuning uchun bu xato tez-tez uchraydi. Avval satrga aylantiring: String(soat).padStart(2, "0") (Turlarni o'zgartirish).

8.4 Manfiy repeat

console.log("-".repeat(-1));

RangeError: Invalid count value: -1

Tarjimasi: "Takrorlash soni noto'g'ri: -1". RangeError — "qiymat ruxsat etilgan oraliqdan tashqarida" degan xato turi. Satrni minus bir marta takrorlab bo'lmaydi. Bu ko'pincha son hisoblab chiqarilganda bo'ladi, masalan "-".repeat(20 - nom.length) da nom 20 belgidan uzun bo'lsa. Shunday joylarda padEnd xavfsizroq: u hech qachon xato bermaydi.

8.5 split natijasini satr deb o'ylash

const qismlar = "Aliyev Jasur".split(" ");
console.log(qismlar.startsWith("Aliyev"));

TypeError: qismlar.startsWith is not a function

qismlar — satr emas, massiv. Massivda startsWith yo'q. split dan keyin satr bilan emas, ro'yxat bilan ishlayotganingizni unutmang. Ro'yxat bo'laklarini olishni massiv darsida o'rganamiz.

9. Mashqlar

1-mashq (oson): Natijani oldindan ayting

const s = "Namangan"; bo'lsa, har bir ifoda nima qaytaradi?

• s.slice(0, 4) →
• s.slice(-3) →
• s.slice(2, -2) →
• "5".padStart(3, "0") →
• "ha".repeat(3) →

const s = "Namangan";

console.log(s.slice(0, 4)); // Nama
console.log(s.slice(-3)); // gan
console.log(s.slice(2, -2)); // mang
console.log("5".padStart(3, "0")); // 005
console.log("ha".repeat(3)); // hahaha

2-mashq (o'rta): Taksi cheki

Taksi safari 7 soat 4 daqiqada boshlandi va 25 000 so'm turadi. Quyidagicha chek chiqaring:

------------------------------
Boshlanish...............07:04
Narx...............25 000 so'm
------------------------------

Talablar:

• Chiziq — "-".repeat(30) bilan.
• Soat va daqiqa const soat = "7";, const daqiqa = "4"; o'zgaruvchilarida. Ularni padStart(2, "0") bilan ikki xonali qiling.
• "Boshlanish" va "Narx" so'zlari padEnd bilan nuqta qo'shib to'ldirilsin. Ishora: har qatorning umumiy uzunligi 30 bo'lishi uchun nom va qiymatni alohida o'ylang: "Narx".padEnd(19, ".") + "25 000 so'm" (11 belgi).

const soat = "7";
const daqiqa = "4";
const vaqt = `${soat.padStart(2, "0")}:${daqiqa.padStart(2, "0")}`;
const chiziq = "-".repeat(30);

console.log(chiziq);
console.log("Boshlanish".padEnd(25, ".") + vaqt);
console.log("Narx".padEnd(19, ".") + "25 000 so'm");
console.log(chiziq);

------------------------------
Boshlanish...............07:04
Narx...............25 000 so'm
------------------------------

3-mashq (qiyin): Mijoz kartochkasi

Bazadan mijoz haqida shunday ma'lumot keldi:

const tel = "998971234567";
const karta = "9860123412345678";
const fayl = "pasport_nusxa.jpg";

Konsolga chiqaring:

1. Telefon: +998 97 123 45 67 ko'rinishida ("Telefon raqamini formatlash" bo'limidagi usul).
2. Karta: **** **** **** 5678 ko'rinishida. Ishora: slice(-4) va template literal.
3. Fayl kengaytmasi: jpg. Ishora: lastIndexOf(".") va slice.
4. Fayl nomi kengaytmasiz: pasport_nusxa.

const tel = "998971234567";
const karta = "9860123412345678";
const fayl = "pasport_nusxa.jpg";

const chiroyliTel = `+${tel.slice(0, 3)} ${tel.slice(3, 5)} ${
  tel.slice(5, 8)} ${tel.slice(8, 10)} ${tel.slice(10)}`;
const yashirinKarta = `**** **** **** ${karta.slice(-4)}`;
const nuqta = fayl.lastIndexOf(".");

console.log(chiroyliTel); // +998 97 123 45 67
console.log(yashirinKarta); // **** **** **** 5678
console.log(fayl.slice(nuqta + 1)); // jpg
console.log(fayl.slice(0, nuqta)); // pasport_nusxa

10. Real ishda

• Formatlash. Telefon, karta, hisob raqami, sana — hammasi bazada "xom" saqlanadi va ekranga chiqishdan oldin slice va padStart bilan bezatiladi.
• Fayllar. Yuklangan fayl nomidan kengaytma ajratiladi: rasmmi, hujjatmi.
• CSV fayllar. Excel'dan eksport qilingan jadval qatorlari split(",") bilan ustunlarga bo'linadi.
• Terminal dasturlari. padEnd va repeat bilan konsolda chiroyli jadval va chiziqlar chiziladi.

Intervyuda "slice va substring farqi nima?" savoli tez-tez beriladi. Endi javobingiz tayyor: manfiy indeks va argumentlar tartibi.

Xulosa

• slice(boshi, oxiri) — bo'lak kesadi, oxiri kirmaydi. Manfiy indeks oxiridan sanaydi: slice(-4) — oxirgi 4 belgi.
• substring manfiy indeksni 0 deb oladi. substr eskirgan — yangi kodda slice ishlating.
• split(ajratuvchi) matnni bo'laklarga bo'ladi va massiv qaytaradi.
• padStart va padEnd satrni berilgan uzunlikkacha to'ldiradi; repeat takrorlaydi.
• Bu metodlarning hech biri asl satrni o'zgartirmaydi — natijani o'zgaruvchiga saqlang.

Keyingi dars: Matnni o'zgartirish va tozalash — katta-kichik harfga o'tkazish, ortiqcha bo'sh joylarni olib tashlash va matn ichidagi so'zlarni almashtirishni o'rganamiz.