JavaScript String and Events: string types; string functions (concat(), split(), indexOf(), lastIndexOf(), substring(), trim(), slice(), replace(), charAt())

📖 Theory

' aditi ' એ 'Aditi' નથી

એક student FestConnect માં પોતાનું નામ " aditi " તરીકે લખે છે, રખડતી જગ્યાઓ અને નાના અક્ષરો સાથે. તમને સ્વચ્છ "Aditi" જોઈએ છે, તમને "Aditi Shah" ને પહેલા અને છેલ્લા નામમાં વહેંચવું છે, અને તમારે ખાતરી કરવી છે કે email માં ખરેખર @ છે.

આ બધું string નું કામ છે. JavaScript ની strings પદ્ધતિઓની ઓજારપેટી સાથે આવે છે, પણ એ બધી એક નિયમ વહેંચે છે જે બધાને પછાડે છે: string ને ક્યારેય જગ્યા પર જ બદલી શકાતી નથી. દરેક પદ્ધતિ તમને નવી string આપે છે.

✏️ Formula

Strings બદલાતી નથી

તમે string ને સુધારી શકતા નથી; તમે ફક્ત એમાંથી નવી બનાવી શકો છો.

name.trim() એ name ને સાફ કરતું નથી. એ સાફ કરેલી નકલ પાછી આપે છે અને name ને અડ્યા વગર છોડે છે. તમારે એને પકડવી પડે:

name = name.trim();

સોંપવાનું ભૂલી જાઓ અને એવું લાગે છે કે પદ્ધતિએ 'કશું કર્યું જ નહીં'. આ એક નિયમ string ના મોટા ભાગના bugs સમજાવે છે. નીચેની દરેક પદ્ધતિ એવું મૂલ્ય પાછું આપે છે જે તમારે વાપરવું પડે.

📊 At a glance

String ની ઓજારપેટી

⌨️ Practical

FestConnect નામ સાફ કરે છે અને email તપાસે છે

let raw = "  aditi shah ";
let name = raw.trim();          // "aditi shah" (captured!)
console.log(raw);               // still "  aditi shah " (unchanged)

let parts = name.split(" ");    // ["aditi", "shah"]
console.log(parts[0], parts[1]);

let email = "aditi@x.com";
console.log(email.indexOf("@"));   // 5  (found)
console.log(email.indexOf("?"));   // -1 (not found)

console.log(email.slice(0, 5));    // "aditi"
console.log(email.charAt(0));      // "a"
console.log("a b c".replace(" ", "_")); // "a_b c" (first only)

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

નામ ગંદું કેમ રહી ગયું?

એક student પોતાની લીટીમાં name.trim(); લખે છે, પછી name submit કરે છે અને એમાં હજી જગ્યાઓ છે. એ શું ભૂલી ગયો, અને સુધારેલી લીટી કઈ છે?

🧩 Quiz

Email માં @ છે કે નહીં એ જોવા તમે `if (email.indexOf("@") )` તપાસો છો. આ કેમ ખોટું હોઈ શકે?

1. જો @ સ્થાન 0 પર હોય, તો indexOf 0 પાછું આપે છે, જે ખોટા જેવું ગણાય છે, એટલે માન્ય કિસ્સો નકારાય છે
2. indexOf true કે false પાછું આપે છે, આંકડો નહીં
3. indexOf એ @ ના ચિહ્નને શોધી શકતું નથી
4. કશું ખોટું નથી; આ હંમેશા બરાબર ચાલે છે

⚠️ Watch out

String ના ફાંદા

1. પરિણામ ન પકડવું: s.trim(), s.replace(...), s.toUpperCase() બધાં નકલો પાછી આપે છે. એમને સોંપો.

2. indexOf ને boolean તરીકે તપાસવું: એ સ્થાન કે -1 પાછું આપે છે. હંમેશા !== -1 સાથે સરખાવો, ક્યારેય સાચા/ખોટા જેવા ગણવા પર આધાર ન રાખો (0 એ માન્ય સ્થાન છે પણ ખોટા જેવું ગણાય છે).

3. slice સામે substring: બંને કાઢે છે, પણ slice(-3) છેડેથી ગણે છે જ્યારે substring ઋણ આંકડાને 0 ગણે છે. 'છેલ્લા N અક્ષર' જોઈએ ત્યારે slice તરફ હાથ લંબાવો.

📖 Theory

Validation નું આ જ હૃદય છે

Unit 5 માં તમે email ને એમાં @ છે અને એની પછી . છે એ તપાસીને validate કરશો, અને mobile નંબરને જગ્યાઓ કાઢીને લંબાઈ તપાસીને, અને એ બધું અહીંની પદ્ધતિઓથી. trim, indexOf, split, અને slice એ form ના validation નાં રોજિંદાં ઓજાર છે. હવે પછીનો પાઠ આ પ્રતિભાવોને events થી વાપરનારની ક્રિયાઓ સાથે જોડે છે.

✅ Summary

Key takeaways

• Strings બદલાતી નથી: દરેક પદ્ધતિ નવી string પાછી આપે છે, એટલે એને પકડો (name = name.trim()).
• concat કે + થી જોડો; split(sep) એ string ને array માં તોડે છે.
• indexOf / lastIndexOf સ્થાન કે ન મળે તો -1 આપે છે: !== -1 થી કસો, ક્યારેય boolean તરીકે નહીં.
• slice, substring, charAt ભાગ કાઢે છે; 'છેડેથી' માટે slice ઋણ આંકડા સ્વીકારે છે.
• trim() કિનારીની જગ્યાઓ કાઢે છે; replace() પહેલો મેળ બદલે છે (બધા માટે replaceAll).
• Memory hook: string ની પદ્ધતિઓ નકલ પાછી આપે છે, એટલે એને સંઘરો.