Satrli qiymatlar bilan ishlash

Nima o'rganamiz

Ushbu darsdan keyin siz:

• ikki yoki undan ortiq matnni bir-biriga ulay olasiz va + belgisi qachon qo'shishini, qachon ulashini bilasiz;
• matnning uzunligini bilib, undan ayrim harfni yoki bir bo'lakni ajratib ola olasiz;
• shablon satr yordamida o'zgaruvchilarni gap ichiga qo'yib, tayyor matn yasay olasiz.

O'tgan darsda "5" + "3" ning 8 emas, "53" chiqishini ko'rgan edik va "matn ulanadi" deb o'tib ketgandik. Bu darsda o'sha hodisaning to'liq sababini ko'ramiz — va shu bilan birga matn ustida yana uchta foydali ish qilishni o'rganamiz.

Dasturlashda matn satr deb ataladi (inglizcha string). Shuning uchun mavzu nomi ham "satrli qiymatlar".

Har bo'limda avval o'zingiz qilib ko'rasiz, keyin nima bo'lganini sxemada ko'rasiz, oxirida qoidasini o'qiysiz.

Kerakli narsalar

Bu darsda hech qanday yangi dastur o'rnatilmaydi. 3-bo'limda yangi papka yasaymiz, kodi to'liq beriladi.

Klaviaturada backtick tugmasi. 3-bo'limda ` belgisi kerak bo'ladi. U klaviaturaning chap yuqori burchagida, Esc tugmasining tagida, 1 raqamining chap tomonida turadi — ~ belgisi bilan bitta tugmada. Bosganingizda hech narsa chiqmasa, ketidan bo'sh joy qo'yib ko'ring: ba'zi klaviatura tillarida bu tugma keyingi harf bilan qo'shilib ketadi. Ishonchli yo'li — klaviatura tilini English (US) ga o'tkazib qo'yish.

1. Satr va ulash

Avval qilib ko'ring

1. Brauzerda istalgan sahifani oching va F12 bilan konsolni oching.

2. Console yorlig'ida ikkita o'zgaruvchi yarating:

   JavaScriptNusxa olish

   let ism = "Aziz";
   let familiya = "Bekmuratov";
   

3. Endi ularni ulang:

   JavaScriptNusxa olish

   console.log(ism + " " + familiya);
   

4. Shu yerda o'tgan darsdagi jumboqni ham qaytaraylik:

   JavaScriptNusxa olish

   console.log("5" + "3");
   console.log("5" - "3");
   

Skrinshot kutilmoqdaKonsolda ikki satrni ulash va qo'shish natijalari

Tekshirib ko'ring: uchinchi qadamda Aziz Bekmuratov chiqdi. To'rtinchi qadamda esa ikkita har xil javob: 53 va 2. Bitta + belgisi bilan - belgisi butunlay boshqacha ish qildi — pastda sababini ko'ramiz.

O'rtadagi " " — ichida bitta bo'sh joy turgan satr. Usiz natija AzizBekmuratov bo'lib chiqadi: brauzer o'zidan bo'sh joy qo'shmaydi.

Nima bo'ldi

+ belgisi ikki tomoniga qarab qaror qabul qiladi:

• ikkala tomon ham son bo'lsa — qo'shadi;
• kamida bittasi satr bo'lsa — qo'shmaydi, ulaydi.

Shuning uchun "5" + "3" da qo'shish umuman bo'lmaydi: ikkala tomon ham satr, brauzer ularni yonma-yon qo'yib "53" yasaydi. Bu xato emas — + belgisining ikkinchi vazifasi.

Qolgan amallar (-, *, /, %) esa bunday ikkinchi vazifaga ega emas. Ular faqat sonlar bilan ishlaydi, shuning uchun satr ko'rsa uni avval songa aylantiradi: "5" - "3" da brauzer "5" ni 5 ga, "3" ni 3 ga aylantirib, 2 ni qaytaradi.

Aynan shu sabab o'tgan darsda Number() yozgan edik: + bilan ishlayotganda satrni qo'lda songa aylantirmasak, u qo'shilmay ulanib ketadi.

Qoida

Satr — tirnoq ichiga olingan matn. Uch xil tirnoq ishlaydi:

let a = "Nukus";   // ikki tirnoq (qo'shtirnoq)
let b = 'Nukus';   // bir tirnoq (apostrof)
let c = `Nukus`;   // backtick

Uchalasi ham bir xil satr yasaydi. Farqi — ichida qaysi belgi ishlatilishi mumkinligida:

Shuning uchun biz doim ikki tirnoq ishlatamiz. Bizning joy nomlarimizda apostrof ko'p — Qo'ng'irot, Ellikqal'a, Oqmang'it — va bir tirnoq ichida ularning hech biri yozilmaydi.

Boshlanish va tugash tirnog'i bir xil bo'lishi shart: "Nukus' deb yozsangiz, brauzer satrning oxirini topolmaydi.

Endi + ning ikkinchi vazifasi:

"Aziz" + " " + "Bekmuratov"   // "Aziz Bekmuratov"
"Salom" + 5                   // "Salom5"
5 + "Salom"                   // "5Salom"

Ikkinchi va uchinchi qatorga e'tibor bering: bir tomoni son bo'lsa ham, ikkinchi tomoni satr bo'lgani uchun natija satr chiqadi. Son avtomatik ravishda satrga aylantiriladi.

Bu qoida chapdan o'ngga ishlaydi va aynan shu joyda eng ko'p xato qilinadi:

"Yosh: " + 15 + 1     // "Yosh: 151"
"Yosh: " + (15 + 1)   // "Yosh: 16"

Birinchi qatorda avval "Yosh: " ga 15 ulandi ("Yosh: 15"), keyin o'sha natijaga 1 ulandi. Ikkinchisida esa qavs 15 + 1 ni birinchi hisoblashga majbur qildi. Bu — o'tgan darsdagi amallar tartibi qoidasining aynan o'zi, faqat bu safar satr ustida.

Teskari yo'l ham bor. Number() satrni songa aylantirsa, String() sonni satrga aylantiradi:

String(25)                  // "25"
String(25) + String(3)      // "253"
Number("25") + Number("3")  // 28

Qiymat qaysi turda ekanini bilish uchun typeof degan so'z bor:

typeof "5"   // "string"  — satr
typeof 5     // "number"  — son

Konsolda ham farqi ko'rinadi: satr tirnoq bilan ("53"), son esa tirnoqsiz (2) chiqadi. Shubha bo'lsa, tirnoqqa qarang.

2. Uzunlik va bo'lak

Satrni yaratish va ulashni bildik. Endi uning ichiga kiramiz: nechta harf borligini sanaymiz va kerakli bo'lagini ajratib olamiz.

Avval qilib ko'ring

1. Sahifani F5 bilan yangilang va bitta o'zgaruvchi yarating:

   JavaScriptNusxa olish

   let shahar = "Nukus";
   

2. Uzunligini so'rang — qavs yozilmaydi:

   JavaScriptNusxa olish

   console.log(shahar.length);
   

3. Ayrim harflarni oling:

   JavaScriptNusxa olish

   console.log(shahar[0]);
   console.log(shahar[4]);
   

4. Bir bo'lakni kesib oling va katta harfga o'tkazing:

   JavaScriptNusxa olish

   console.log(shahar.slice(0, 3));
   console.log(shahar.toUpperCase());
   

Skrinshot kutilmoqdaKonsolda uzunlik, indeks va bo'lak natijalari

Tekshirib ko'ring: ketma-ket 5, N, s, Nuk va NUKUS chiqdi. Ya'ni so'zda 5 ta harf bor, birinchisi N, beshinchisi s.

Nima bo'ldi

Satrni yonma-yon terilgan kataklar deb tasavvur qiling. Har katakda bitta harf turadi va har katakning o'z raqami — indeksi — bor.

Eng muhim narsa: indeks 0 dan boshlanadi.

Shuning uchun shahar[0] — birinchi harf, shahar[1] — ikkinchisi. .length esa haqiqiy sonni qaytaradi: "Nukus" da 5 ta harf bor, demak shahar.length → 5. Lekin oxirgi harfning indeksi 5 emas, 4. Bu — eng ko'p adashtiradigan joy:

shahar[5]                   // undefined — bunday katak yo'q
shahar[shahar.length - 1]   // "s" — oxirgi harf

Oxirgi harf uchun shuning uchun doim length - 1 yoziladi.

slice esa shu kataklar ustida oyna ochadi: qayerdan boshlab, qayergacha. Boshlanish kiradi, tugash esa kirmaydi:

shahar.slice(0, 3)   // "Nuk" — 0, 1, 2-kataklar; 3-katak kirmaydi

Shuning uchun olingan harflar soni oddiy ayirma bilan chiqadi: 3 - 0 = 3 ta harf.

Qoida

Satrdan ma'lumot olishning ikki xil yozuvi bor va ularni aralashtirmaslik kerak:

Xossa va metodning farqi. .length — satrning tayyor xususiyati, shuning uchun qavs yozilmaydi. .toUpperCase() esa bajariladigan ish, ya'ni metod, shuning uchun qavs shart. Aralashtirsangiz:

shahar.length()      // TypeError: shahar.length is not a function
shahar.toUpperCase   // ƒ toUpperCase() — bajarilmadi, o'zi qaytdi

Birinchisi xato beradi, ikkinchisi xato bermaydi-yu, natija ham bermaydi — konsolda ƒ belgisi bilan g'alati javob chiqadi. Ko'rsangiz — qavs unutilgan.

slice ni uch xil ishlatish mumkin:

shahar.slice(2)      // "kus"  — 2-katakdan oxirigacha
shahar.slice(1, 3)   // "uk"   — 1 va 2-kataklar
shahar.slice(-2)     // "us"   — oxiridan 2 ta harf

indexOf topilmasa -1 qaytaradi, 0 emas: "Nukus".indexOf("z") → -1. Nol — bu "birinchi katakda topildi" degani, shuning uchun "topilmadi" uchun boshqa son kerak bo'lgan.

trim() — chetdagi bo'sh joylarni olib tashlaydi. Foydalanuvchi javob yozayotganda tasodifan probel bosib yuboradi, natijada " Nukus " keladi. Uning uzunligi 9, chunki bo'sh joylar ham sanaladi. .trim() shuni tozalaydi — "Nukus", uzunligi 5. Bu 3-bo'limda kerak bo'ladi.

Metodlar satrning o'zini o'zgartirmaydi. Bu juda muhim: metod yangi satr qaytaradi, eskisi joyida qolaveradi.

let s = "Nukus";
s.toUpperCase();   // "NUKUS" — natija qaytdi
s;                 // "Nukus" — s o'zgarmadi!

s = s.toUpperCase();
s;                 // "NUKUS" — endi o'zgardi

Natijani saqlab qolish kerak bo'lsa, uni o'zgaruvchiga qayta yozing. Shu sababdan harfni o'rniga qo'yib ham bo'lmaydi:

let s = "Nukus";
s[0] = "M";
s;           // "Nukus" — o'zgarmadi, xato ham chiqmadi

Bunday holatda brauzer indamay o'tib ketadi — eng yoqimsiz xato turi. Harfni almashtirish kerak bo'lsa, bo'laklardan yangi satr yig'iladi:

"M" + s.slice(1);   // "Mukus"

Birinchi harfni katta qilish ham shu usul bilan bajariladi — bu ish tez-tez kerak bo'ladi, shuning uchun yodda tursin:

let soz = "nukus";
soz.slice(0, 1).toUpperCase() + soz.slice(1);   // "Nukus"

Bu yerda ikkita metod ketma-ket qo'llandi: avval birinchi harf ajratildi, keyin u katta harfga o'tkazildi va qolgan bo'lak ulandi. Metodlarni shunday zanjir qilib yozish mumkin — chapdan o'ngga bajariladi.

3. Shablon satr

Endi ikkala bo'limni birlashtiramiz: foydalanuvchidan matn so'rab, undan tayyor gap yasaymiz.

Avval qilib ko'ring

tabrik degan yangi papka yarating va ichida ikkita fayl yasang.

tabrik.html:

<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="UTF-8">
    <title>Tabriknoma</title>
  </head>
  <body>
    <h1>Tabriknoma</h1>
    <script src="kod.js"></script>
  </body>
</html>

kod.js — xuddi shu papkada:

let ism = prompt("Ismingizni kiriting:");
let familiya = prompt("Familiyangizni kiriting:");

ism = ism.trim();
familiya = familiya.trim();

alert(`Salom, ${ism} ${familiya}! Ismingizda ${ism.length} ta harf bor.`);

Endi tabrik.html ni brauzerda oching va ikkita savolga javob bering.

Skrinshot kutilmoqdaAlert oynasida shablon satr bilan yasalgan gap

Tekshirib ko'ring: ketma-ket ikkita savol chiqdi, oxirida Salom, Aziz Bekmuratov! Ismingizda 4 ta harf bor. degan oyna paydo bo'ldi. Ismingiz boshqa bo'lsa, harflar soni ham boshqacha chiqadi.

Faylni saqlashda ehtiyot bo'ling. Bloknotdan foydalanayotgan bo'lsangiz, saqlash oynasida Save as type ni All files qilib qo'ying va nomni kod.js deb to'liq yozing — aks holda Windows kod.js.txt yasab qo'yadi va brauzer faylni topolmaydi.

Nima bo'ldi

Backtick ichidagi satr — qolip. Uning ichida ${ } belgilari bilan "bu yerga qiymat qo'yiladi" deb joy ochib qo'yiladi.

Sahifa ishga tushganda brauzer:

1. qolipdagi oddiy matnni o'zgarishsiz oladi;
2. har bir ${ } ni ochib, ichidagini hisoblaydi;
3. natijani o'sha joyga qo'yadi.

${ism.length} da avval ism.length hisoblanadi (4), keyin 4 o'sha joyga yoziladi. Ya'ni ${ } ichiga istalgan ifoda yozilaveradi: o'zgaruvchi, metod, arifmetik amal.

Xuddi shu gapni + bilan ham yasash mumkin edi — lekin solishtiring:

alert("Salom, " + ism + " " + familiya + "! Ismingizda " + ism.length + " ta harf bor.");
alert(`Salom, ${ism} ${familiya}! Ismingizda ${ism.length} ta harf bor.`);

Ikkalasi bir xil natija beradi. Birinchisida esa oltita + va sakkizta tirnoq bor — bo'sh joylarni tirnoq ichiga qo'yishni unutish juda oson. Shuning uchun matn ichiga qiymat qo'yish kerak bo'lganda shablon satr ishlatiladi.

Qoida

`Salom, ${ism}!`

${ } ichiga nima yozilishi mumkin:

`Salom, ${ism}!`                    // o'zgaruvchi
`Uzunligi: ${ism.length}`           // xossa
`${ism.toUpperCase()} — salom!`     // metod chaqiruvi
`Jami: ${narx * soni} so'm`         // arifmetik amal

Eng ko'p qilinadigan xato — tirnoqni adashtirish. ${ } faqat backtick ichida ishlaydi:

`Salom, ${ism}!`    // "Salom, Aziz!"
"Salom, ${ism}!"    // "Salom, ${ism}!"  — matnning o'zi chiqdi
'Salom, ${ism}!'    // "Salom, ${ism}!"  — matnning o'zi chiqdi

Oxirgi ikkitasi xato bermaydi — shunchaki ${ism} yozuvi harfma-harf ekranga chiqadi. Oynada ${ism} ko'rsangiz, sabab ana shu: tirnoq noto'g'ri.

Qavs shakli ham muhim: ${ism} — figurali qavs. $(ism) deb yozsangiz natija $(ism) bo'lib chiqadi, {ism} deb yozsangiz — {ism}.

Backtick uzun matnni bir necha qatorda yozishga ham ruxsat beradi. Oddiy tirnoqda buni qilib bo'lmaydi:

`birinchi
ikkinchi`

Bu — ikki qatorli bitta satr. Xuddi shuni " bilan yozsangiz, SyntaxError: Invalid or unexpected token chiqadi, chunki oddiy tirnoq satrni qator oxirida tugagan deb hisoblaydi.

prompt javobi har doim satr bo'lib keladi — bu o'tgan darsdan tanish. Shuning uchun ism.length, ism.toUpperCase() kabi barcha satr metodlari prompt javobiga darrov qo'llanaveradi, Number() kerak emas. Number() faqat hisoblash kerak bo'lganda yoziladi.

trim() ni nega yozdik. Foydalanuvchi javobni bo'sh joy bilan yozib yuborishi mumkin. U holda ism.length bo'sh joylarni ham sanaydi va gap ham qiyshiq chiqadi. trim() shuning oldini oladi:

ism = ism.trim();

O'ng tomon avval hisoblanadi (tozalangan satr), keyin natija yana ism qutisiga qaytadi — o'tgan darsdagi narx = narx + 1000 bilan bir xil yozuv.

Tez-tez uchraydigan xatolar

Qisqacha

• Satr — tirnoq ichidagi matn; uch xil tirnoq: "...", '...', `...`
• Bizda doim ikki tirnoq — joy nomlaridagi apostrof uchun
• + sonlarni qo'shadi, satrlarni ulaydi; bir tomoni satr bo'lsa — ulaydi
• - * / % satrni avval songa aylantiradi
• String() sonni satrga, Number() satrni songa aylantiradi
• typeof qiymat turini aytadi: "string" yoki "number"
• .length — harflar soni, qavssiz
• Indeks 0 dan boshlanadi, oxirgi harf — [length - 1]
• .slice(a, b) — a dan b gacha, b kirmaydi
• .toUpperCase(), .toLowerCase(), .trim(), .indexOf() — metodlar, qavs bilan
• Metod satrni o'zgartirmaydi — natijani qayta yozib oling
• `matn ${ifoda}` — shablon satr, faqat backtick ichida ishlaydi

Uy vazifasi

Bu darsda ikki topshiriq bor, ikkalasi ham shu qo'llanmadagi materialdan chiqadi:

1. Konsolda so'z tahlili (≈12 daqiqa) — 1 va 2-bo'lim: so'zni o'zgaruvchiga yozib, uzunligini, bitta harfini, bir bo'lagini va katta yoki kichik harfli ko'rinishini chiqarish, oxirida o'z ismingiz bilan ulash.
2. Tabriknoma sahifasi (≈18 daqiqa) — 3-bo'lim: prompt bilan ikkita javob olib, shablon satr yordamida bitta gap yasash.

Topshiriq matni shu sahifaning pastida — jurnaldagi raqamingizni tanlaganingizdan keyin chiqadi. Har kimda o'z so'zi, o'z bo'lagi va o'z savoli bo'ladi.

Skrinshot qanday olinadi? Win + Shift + S bosing, kerakli qismni belgilang, so'ng Word yoki Paint'ga Ctrl + V bilan qo'ying. Kod skrinshotida fayl nomi ham ko'rinib tursin.

Ikkinchi topshiriqda backtick belgisini tekshiring: agar oynada ${...} yozuvining o'zi chiqsa, demak tirnoq oddiy qo'shtirnoqqa almashib qolgan. Eng ko'p vaqt aynan shu yerda yo'qoladi.

Keyingi darsda

Endi matnni o'lchay olamiz va undan bo'lak ajrata olamiz. Lekin dasturimiz hali qaror qabul qila olmaydi: foydalanuvchi javobni bo'sh qoldirsa ham, ism o'rniga son yozsa ham, u bir xil gapni chiqaraveradi.

Keyingi darsda shart operatorlari bilan tanishamiz: dastur qiymatni tekshirib, holatga qarab boshqa-boshqa javob bera boshlaydi — masalan bo'sh javobga "Ismingizni yozmadingiz" deb aytadi.