Mastering Strings

"More Than Just Text"

প্রোগ্রামিংয়ে আমাদের ৯০% সময় কাটে ডেটা ম্যানিপুলেশন করে, আর এই ডেটার বড় একটা অংশই হলো Text বা String। ইউজারের নাম, ইমেইল ভ্যালিডেশন, API রেসপন্স পার্স করা—সবই স্ট্রিংয়ের খেলা।

এই অধ্যায়ে আমরা শুধু টেক্সট জোড়া দেওয়া শিখব না, আমরা শিখব স্ট্রিংয়ের Immutability, Unicode Handling এবং Regex Power।

⭐ ১. String কী? (The Immutable Truth)

জাভাস্ক্রিপ্টে স্ট্রিং হলো Immutable (অপরিবর্তনীয়)। এর মানে হলো, একবার একটি স্ট্রিং তৈরি হলে, মেমোরিতে সেটা আর বদলানো যায় না।

⚠️ Immutability Visualized

let str = "Hello";
str[0] = "J"; 

console.log(str); // "Hello" (কোনো পরিবর্তন হয়নি!)

কেন? কারণ স্ট্রিং Read-Only। তুমি যদি বদলাতে চাও, জাভাস্ক্রিপ্ট পুরো পুরনো স্ট্রিং ফেলে দিয়ে নতুন একটি স্ট্রিং তৈরি করবে।

str = "Jello"; // এটা ঠিক আছে (কারণ ভেরিয়েবল এখন নতুন মেমোরি পয়েন্ট করছে)

⭐ ২. Modern Creation: Template Literals (` `)

জুনিয়ররা + দিয়ে স্ট্রিং যোগ করে। সিনিয়ররা Backticks ব্যবহার করে।

কেন এটা সেরা?

  • Multi-line Support: \n লেখার দরকার নেই
  • Expression Interpolation: ${} এর ভেতর জাভাস্ক্রিপ্ট কোড লেখা যায়
const item = "Coffee";
const price = 50;

// Senior Way
const message = `
  Receipt:
  Item: ${item}
  Total: ${price * 2} taka (Qty: 2)
`;

⭐ ৩. Extracting Parts: Slice vs The Rest

জাভাস্ক্রিপ্টে স্ট্রিং কাটার ৩টি মেথড আছে, কিন্তু সিনিয়র হিসেবে তোমার শুধু একটি মনে রাখলেই চলবে—slice()।

Method Status Feature
slice() ✅ Best Practice নেগেটিভ ইনডেক্স সাপোর্ট করে
substring() ⚠️ Avoid নেগেটিভ ইনডেক্স বোঝে না
substr() ❌ Deprecated বাতিল হয়ে যাচ্ছে, ব্যবহার করবে না 
const file = "photo.png";

// শেষ ৩ অক্ষর বের করো
console.log(file.slice(-3)); // "png"

⭐ ৪. Searching & Replacing

Searching

  • includes(): আছে কি নেই? (True/False)
  • startsWith() / endsWith(): ভ্যালিডেশনের জন্য সেরা
  • indexOf(): পজিশন জানার জন্য

Replacing (Trick: replace vs replaceAll)

const quote = "Money is money";

console.log(quote.replace("Money", "Time")); // "Time is money" (শুধু প্রথমটা বদলেছে)

// ✅ Modern Way (ES2021)
console.log(quote.replaceAll("money", "gold")); // "Money is gold" (Case sensitive)

// ✅ Regex Way (Old but Gold)
console.log(quote.replace(/money/gi, "gold")); // সব বদলাবে + Case insensitive

⭐ ৫. The "Split-Join" Combo (String ↔ Array)

ডেটা ম্যানিপুলেশনের সবচেয়ে শক্তিশালী অস্ত্র।

Scenario: একটি ট্যাগ লিস্ট html,css,js আছে, সেটাকে আলাদা করতে হবে।

const tags = "html,css,js";

// ১. String থেকে Array
const tagArray = tags.split(","); // ["html", "css", "js"]

// ২. Array থেকে String (Custom Separator দিয়ে)
const newTag = tagArray.join(" | "); // "html | css | js"

⭐ ৬. Unicode & Emoji Trap (Senior Must-Know) 🚨

জাভাস্ক্রিপ্ট ইন্টারভিউতে এটি একটি কমন ফাদে ফেলার প্রশ্ন। JS স্ট্রিং UTF-16 এনকোডিং ব্যবহার করে। ইমোজি বা বাংলা যুক্তবর্ণ মেমোরিতে 2 units (Surrogate Pair) জায়গা নেয়।

সমস্যা ১: ভুল Length

console.log("A".length); // 1
console.log("😀".length); // 2 😲 (কারণ ইমোজি ২ বাইট নেয়)

সমস্যা ২: স্ট্রিং উল্টানো (Reverse)

নরমাল split('').reverse() ইমোজি ভেঙে ফেলে।

// ❌ ভুল উপায়
console.log("Hi 😀".split("").reverse().join("")); 
// আউটপুট: " iH" (ইমোজি ভেঙে গার্বেজ হয়ে গেছে)

// ✅ সঠিক উপায় (Array.from)
// Array.from() ইমোজিকে সঠিকভাবে চেনে
console.log(Array.from("Hi 😀").reverse().join("")); 
// আউটপুট: "😀 iH" (পারফেক্ট!)

⭐ ৭. Padding (Formatting Data)

আইডি কার্ড বা ইনভয়েস নাম্বারের ফরম্যাটিংয়ের জন্য padStart এবং padEnd দারুণ। 

const invoiceId = "5";
console.log(invoiceId.padStart(4, "0")); // "0005"

এটা আগে ম্যানুয়ালি লুপ চালিয়ে করতে হতো, এখন এক লাইনেই সম্ভব।

⭐ ৮. Tagged Templates (Advanced Concept)

তুমি যদি React-এ Styled Components ব্যবহার করে থাকো, তবে তুমি এটা দেখেছ। এটি একটি স্পেশাল ফাংশন যা টেম্পলেট লিটারালকে প্রসেস করে। 

function highlight(strings, ...values) {
    // strings: ["You have ", " items"]
    // values: [5]
    return `${strings[0]} ${values[0]} ${strings[1]}`;
}

const count = 5;
const msg = highlight`You have ${count} items`;
console.log(msg); // "You have 5 items"

এটি ইউজারের ইনপুট স্যানিটাইজ করতে বা কাস্টম স্টাইলিংয়ে কাজে লাগে।

🧠 ৯. Senior Level Coding Challenges

🔥 Problem 1: Palindrome Check (Emoji Safe)

const isPalindrome = (str) => {
    // 1. Array.from দিয়ে সেফলি অ্যারে বানাও
    // 2. উল্টাও এবং স্ট্রিংয়ে ফেরত নাও
    const reversed = Array.from(str).reverse().join("");
    return str === reversed;
};
console.log(isPalindrome("madam")); // true

🔥 Problem 2: snake_case to camelCase

const snakeToCamel = (str) => {
    return str.replace(/_([a-z])/g, (match, letter) => letter.toUpperCase());
};
console.log(snakeToCamel("user_first_name")); // "userFirstName"

🔥 Problem 3: নাম্বার বের করা (Data Cleaning)

const input = "Price is 450 taka and Vat 15%";
const numbers = input.match(/\d+/g).map(Number);
console.log(numbers); // [450, 15]

🚀 অধ্যায় ৭ সারাংশ (Checklist)

আমরা শিখলাম:

  • ✓ Immutability: স্ট্রিং এডিট করা যায় না, নতুন বানাতে হয়
  • ✓ Methods: slice সেরা, substr মৃত। replaceAll নতুন সংযোজন
  • ✓ Unicode: ইমোজি বা বাংলা থাকলে length বা reverse কাজ করে না। সমাধান: Array.from()
  • ✓ Format: padStart ইনভয়েস বা আইডি ফরম্যাটিংয়ে সেরা
  • ✓ Conversion: split এবং join দিয়ে ডেটা ট্রান্সফর্মেশন

Next Step: আমাদের বেসিক ডেটা টাইপ শেখা শেষ। এখন আমরা জাভাস্ক্রিপ্টের "Asynchronous" জগতে প্রবেশ করব। যেখানে সময়ের খেলা চলে। পরের অধ্যায়: "Asynchronous JS Basics & Callback Hell"।

🔒 কপিরাইট সুরক্ষিত কন্টেন্ট 🔒

কপি, স্ক্রিনশট, প্রিন্ট করা সম্পূর্ণ নিষিদ্ধ।