1.8 Saytlarin Hazirlanmasi ve JavaScript Strings

1.8 Saytlarin Hazirlanmasi ve JavaScript Strings

Saytlarin hazirlanmasi prosesi təkcə vizual dizayndan ibarət deyil — funksionallıq və istifadəçi təcrübəsi baxımından da güclü olmalıdır. Bu mərhələdə frontend proqramlaşdırma dilləri, xüsusilə JavaScript, önəmli rol oynayır. JavaScript, saytın dinamik hissələrini idarə etməyə kömək edən əsas texnologiyalardan biridir və burada string (mətn) ilə işləmək, frontend developer üçün ən vacib bacarıqlardan biridir.

Bu bloqda JavaScript-də string primitiv tipini və onunla işləmə üsullarını öyrənəcəksiniz. Əgər siz də saytların hazırlanması ilə maraqlanır və frontend developer kimi bacarıqlarınızı inkişaf etdirmək istəyirsinizsə, bu məlumatlar sizin üçün faydalı olacaq.

JavaScript String-lərə Giriş

JavaScript-də string-lər primitiv dəyər sayılır və dəyişdirilə bilməz (immutable). Bu o deməkdir ki, bir string-i dəyişdirdikdə əslində yeni bir string yaranır, orijinal string dəyişməz qalır. Bu davranışı anlamaq, saytlarin hazirlanmasi zamanı mətn məlumatları ilə işləyərkən vacibdir.

String yaratmaq üçün tək dırnaq (') və ya cüt dırnaq (") istifadə edə bilərsiniz: 

let str = 'Hi';
let greeting = "Hello";

ES6 ilə birlikdə template literals anlayışı daxil edildi. Bu zaman string-lər backtick (`) simvolları ilə yazılır:

let name = `John`;

Template literals ilə string daxilində həm tək, həm də cüt dırnaqdan istifadə etmək mümkündür:

let mesage = `"I'm good". She said`;

Həmçinin, template literal içində dəyişənlər və ifadələrdən istifadə edə bilərsiniz. JavaScript bu dəyişənləri onların dəyərləri ilə əvəz edir. Bu proses string interpolation adlanır:

let name = 'John';
let message = `Hi, I'm ${name}.`;

console.log(message);

Output: Hi, I'm John.

Bu nümunədə, name dəyişəni template literal içərisində öz dəyəri ilə əvəz olunub.

Xüsusi Simvolların Escape Edilməsi

Frontend developer kimi form məlumatlarını emal etdiyiniz zaman, xüsusi simvollarla işləmək zəruridir. Xüsusi simvolları string-də istifadə etmək üçün \ (backslash) istifadə olunur:

  1. Windows sətir sonu: '\r\n'
  2. Unix sətir sonu: '\n'
  3. Tab boşluğu: '\t'
  4. Backslash simvolu: '\\'

let str = 'I\'m a string!';

String-in Uzunluğunu Əldə Etmək

length xüsusiyyəti string-in uzunluğunu qaytarır:

let str = "Good Morning!";
console.log(str.length);  // 13

Qeyd: JavaScript-də String (böyük S ilə) tipi var, bu da primitiv string tipinin wrapper növüdür. Bu səbəblə, string primitivlərinə String obyektinin bütün xüsusiyyət və metodları tətbiq edilə bilər.

Accessing characters

Bir string-dəki simvollara çıxmaq üçün [ ] indekslə istifadə olunur. İndeksləmə 0-dan başlayır:

let str = "Hello";
console.log(str[0]); // "H"

Sonuncu simvola çıxmaq üçün isə length - 1 istifadə edilir:

let str = "Hello";
console.log(str[str.length - 1]); // "o"

String-ləri + Operatoru ilə Birləşdirmək

İki və ya daha çox string-i birləşdirmək üçün + operatorundan istifadə edilir:

let name = 'John';
let str = 'Hello ' + name;

console.log(str); // "Hello John"

String-i hissə-hissə yığmaq üçün += operatoru istifadə edilə bilər:

let className = 'btn';
className += ' btn-primary'
className += ' none';

console.log(className);

Dəyərləri String-ə Çevirmək

Saytlarin hazirlanmasi zamanı müxtəlif məlumat tipləri ilə işləyirsiniz və bəzən onları string-ə çevirməlisiniz. String olmayan bir dəyəri string-ə çevirmək üçün aşağıdakı üsullardan istifadə edə bilərsiniz:

  1. String(n)
  2. "" + n
  3. n.toString()

Qeyd: toString() metodu undefined və null üçün işləməz.

Bir string-i boolean-ə çevirsəniz, onu geri qaytarmaq mümkün olmaya bilər.

let status = false;
let str = status.toString(); // "false"
let back = Boolean(str); // true

İzah:

  1. status dəyişəni false ilə başlanır.
  2. Bu dəyişən toString() metodu ilə string-ə çevrilir → "false"
  3. Daha sonra Boolean() funksiyası ilə string yenidən boolean-ə çevrilir. Amma "false" string-i boş olmadığı üçün nəticə true olur.

Qeyd: Boolean() funksiyası yalnız boş string ('') üçün false qaytarır.

String-lərin müqayisəsi

İki string-i müqayisə etmək üçün >, >=, <, <=, == kimi müqayisə operatorlarından istifadə olunur.

Bu operatorlar simvolların rəqəmsal dəyərlərinə(numeric values of the characters) əsasən müqayisə aparır və bu, lüğət sıralamasından fərqli nəticə verə bilər:

let result = 'a' < 'b';
console.log(result); // true

let result = 'a' < 'B';
console.log(result); // false

Nəticə

Saytlarin hazirlanmasi prosesində JavaScript bilikləri önəmlidir və string tipi ilə işləmə bacarığı hər bir frontend developer üçün vacib təməldir. Bu bloqda string-lərin yaradılması, birləşdirilməsi, interpolasiyası, uzunluğunun öyrənilməsi, xüsusi simvolların işlənməsi və müqayisəsi kimi əsas mövzular izah olundu. Əgər siz də frontend proqramlaşdırma bacarıqlarınızı inkişaf etdirmək və daha funksional sayt yaratmaq istəyirsinizsə, bu biliklərə yiyələnmək vacibdir.

Frontend Müsahibə Sualları

JavaScript-də string-lər immutable-dır. Bu nə deməkdir və bu xüsusiyyət necə işləyir?

JavaScript-də string-lər immutable (dəyişməz) tipdir. Bu o deməkdir ki, mövcud string üzərində dəyişiklik aparmaq mümkün deyil – əgər dəyişiklik edirsinizsə, əslində yeni bir string yaranır. Məsələn:

let str = "Hello";
str[0] = "h"; // bu dəyişiklik qəbul olunmur
console.log(str); // "Hello"

Template literal nədir və onu nə zaman istifadə etmək məsləhətdir?

Template literal ES6 ilə gəlmiş bir xüsusiyyətdir və string-ləri daha rahat və oxunaqlı şəkildə yaratmağa imkan verir. Backtick ( ) simvolu ilə yazılır və ${} içində dəyişənləri interpolasiya etməyə imkan verir:

let name = "Aysel";
let msg = `Salam, mənim adım ${name}`;

JavaScript-də string-ləri necə müqayisə edirik və bu müqayisədə nəyi nəzərə almaq lazımdır?

JavaScript-də string-lər ==, ===, <, > və s. operatorlarla müqayisə olunur. Müqayisə zamanı simvolların Unicode dəyərləri əsas götürülür. Məsələn:

console.log('a' < 'b'); // true
console.log('A' < 'a'); // true
console.log('abc' > 'ab'); // true

Qeyd etmək vacibdir ki, böyük və kiçik hərflər arasında fərq var. Əgər case-insensitive müqayisə istəyirsinizsə, string-ləri toLowerCase() və ya toUpperCase() ilə uyğunlaşdırmaq lazımdır.