Lesson ৩৬ মিনিট পড়া

স্ট্রিং এবং টেমপ্লেট লিটারেলস (Strings & Template Literals)

টেক্সট বা লেখা নিয়ে কাজ করার শিল্প — সাধারণ কোটেশন থেকে শুরু করে শক্তিশালী টেমপ্লেট পর্যন্ত

স্ট্রিং — জাভাস্ক্রিপ্টে টেক্সট (Strings — Text in JavaScript)

একটি স্ট্রিং হলো মূলত অক্ষরের একটি ধারাবাহিকতা — অক্ষর, সংখ্যা, স্পেস, ইমোজি, অর্থাৎ আপনি টাইপ করতে পারেন এমন যেকোনো কিছু। আপনি সিঙ্গেল কোট (' '), ডাবল কোট (" "), বা ব্যাকটিক (` `) ব্যবহার করে স্ট্রিং তৈরি করতে পারেন। সিঙ্গেল এবং ডাবল কোট প্রায় একইভাবে কাজ করে, তবে ব্যাকটিকগুলো কিছু নতুন সুপারপাওয়ার খুলে দেয়।

স্ট্রিংগুলোকে অনেকটা মালার পুঁতির মতো চিন্তা করুন। প্রতিটি পুঁতি হলো একেকটি ক্যারেক্টার বা অক্ষর, এবং আপনি চাইলেই সেগুলোকে গুনতে পারেন, নতুন করে সাজাতে পারেন, একটি নির্দিষ্ট অংশ কেটে নিতে পারেন, অথবা মালায় কোনো নির্দিষ্ট পুঁতি আছে কি না তা যাচাই করতে পারেন।

জাভাস্ক্রিপ্টে স্ট্রিংগুলো হলো ইমিউটেবল (immutable) বা অপরিবর্তনীয় — আপনি চাইলে আলাদা আলাদা অক্ষর বা ক্যারেক্টার বদলাতে পারবেন না। এর পরিবর্তে, স্ট্রিং মেথডগুলো সব সময় একটি নতুন স্ট্রিং রিটার্ন করে।

স্ট্রিং তৈরি করা এবং সাধারণ প্রপার্টিগুলো (Creating Strings & Basic Properties)

let single = 'Hello';
let double = "World";
let backtick = `Hello World`;


// .length tells you how many characters
console.log("JavaScript".length); // 10


// Access individual characters by index (starts at 0)
let word = "Pixel";
console.log(word[0]);  // "P"
console.log(word[4]);  // "l"
console.log(word[-1]); // undefined (use .at(-1) instead!)
console.log(word.at(-1)); // "l" — .at() supports negative indexes!
Output
10
P
l
undefined
l

টেমপ্লেট লিটারেলস — সুপারপাওয়ারযুক্ত স্ট্রিং (Template Literals — Strings with Superpowers)

টেমপ্লেট লিটারেলস (Template literals) কোটেশনের বদলে ব্যাকটিক (`) ব্যবহার করে, এবং তারা আপনাকে দারুণ দুটি কাজ করার সুযোগ দেয়:

  • ${expression} দিয়ে স্ট্রিং ইন্টারপোলেশন (String interpolation) — যেকোনো জাভাস্ক্রিপ্ট এক্সপ্রেশনকে সরাসরি আপনার স্ট্রিংয়ের ভেতরে বসিয়ে দিন। পুরোনো আমলের বিরক্তিকর কনক্যাটেনেশনকে (concatenation) বিদায়!
  • মাল্টি-লাইন স্ট্রিং (Multi-line strings) — ব্যাকটিকের ভেতরে কেবল Enter চাপুন, আর লাইন ব্রেকগুলো সরাসরি আউটুটে দেখা যাবে। কোনো \n বা নিউ লাইনের প্রয়োজন নেই।

একবার আপনি টেমপ্লেট লিটারেলস ব্যবহার শুরু করলে, স্ট্রিং তৈরি করার জন্য আপনি আর কখনোই + ব্যবহার করতে চাইবেন না।

টেমপ্লেট লিটারেলস এর ব্যবহার (Template Literals in Action)

let name = "Kaisar";
let level = 7;


// Old way (concatenation)
console.log("Player " + name + " is level " + level + "!");


// New way (template literal) — so much cleaner!
console.log(`Player ${name} is level ${level}!`);


// You can put ANY expression inside ${}
console.log(`Next level: ${level + 1}`);
console.log(`Is high level? ${level > 5 ? "Yes!" : "Not yet"}`);


// Multi-line strings
let poem = `Roses are red,
Violets are blue,
JavaScript is weird,
And so are you.`;
console.log(poem);
Output
Player Kaisar is level 7!
Player Kaisar is level 7!
Next level: 8
Is high level? Yes!
Roses are red,
Violets are blue,
JavaScript is weird,
And so are you.

প্রয়োজনীয় স্ট্রিং মেথডগুলো (Essential String Methods)

স্ট্রিংগুলোর সাথে আগে থেকেই বেশ কিছু দারুণ ও উপকারী মেথড থাকে। মনে রাখবেন, এই মেথডগুলো কখনোই আসল বা অরিজিনাল স্ট্রিংকে পরিবর্তন করে না — এগুলো সব সময় একটি নতুন স্ট্রিং রিটার্ন করে।

  • .toUpperCase() / .toLowerCase() — কেস (case) বা বড় হাতের/ছোট হাতের অক্ষর পরিবর্তন করে
  • .trim() — দুই পাশ থেকে সব স্পেস বা হোয়াইটস্পেস সরিয়ে ফেলে (ব্যবহারকারীর ইনপুট নেওয়া ও তা সাজানোর জন্য দারুণ কাজ করে!)
  • .includes(text) — কোনো নির্দিষ্ট সাবস্ট্রিং আছে কি না যাচাই করে (true/false রিটার্ন করে)
  • .indexOf(text) — কোনো নির্দিষ্ট সাবস্ট্রিংয়ের অবস্থান বা পজিশন খুঁজে বের করে (না পাওয়া গেলে -1 রিটার্ন করে)
  • .slice(start, end) — স্ট্রিংয়ের একটি নির্দিষ্ট অংশ কেটে বের করে আনে
  • .split(separator) — স্ট্রিংটিকে টুকরো টুকরো করে একটি অ্যারেতে পরিণত করে
  • .replace(old, new) — কেবল প্রথমবার পাওয়া সাবস্ট্রিংটিকে পরিবর্তন করে; সবগুলোকে পরিবর্তন করতে .replaceAll() ব্যবহার করতে পারেন
  • .startsWith(text) / .endsWith(text) — স্ট্রিংয়ের শুরু বা শেষ যাচাই করে

স্ট্রিং মেথড প্লেগ্রাউন্ড (String Methods Playground)

let message = "  Hello, JavaScript World!  ";


console.log(message.trim());                  // "Hello, JavaScript World!"
console.log(message.trim().toUpperCase());    // "HELLO, JAVASCRIPT WORLD!"
console.log(message.includes("JavaScript")); // true
console.log(message.indexOf("JavaScript"));  // 9


// .slice(start, end) — end is exclusive
let greeting = "Good Morning";
console.log(greeting.slice(0, 4));   // "Good"
console.log(greeting.slice(5));      // "Morning"
console.log(greeting.slice(-7));     // "Morning" (negative = from end)


// .split() — turn a string into an array
let csv = "আম,জাম,কাঁঠাল";
let fruits = csv.split(",");
console.log(fruits);          // ["আম", "জাম", "কাঁঠাল"]
console.log(fruits.length);   // 3


// .replace() and .replaceAll()
let phrase = "I love cats, cats are great";
console.log(phrase.replace("cats", "dogs"));      // "I love dogs, cats are great"
console.log(phrase.replaceAll("cats", "dogs"));   // "I love dogs, dogs are great"
Output
Hello, JavaScript World!
HELLO, JAVASCRIPT WORLD!
true
9
Good
Morning
Morning
Morning
["আম", "জাম", "কাঁঠাল"]
3
I love dogs, cats are great
I love dogs, dogs are great
Note: প্রো টিপ (Pro tip): ফর্মের ইনপুট হ্যান্ডল করার ক্ষেত্রে .trim() হলো আপনার সবচেয়ে বড় ভরসা বা বন্ধু। ইউজাররা অনেক সময়ই ভুল করে শেষে বাড়তি কিছু স্পেস যোগ করে দেয়। কম্পেয়ার (compare) বা সেভ করার আগে সবসময় ইনপুটটিকে ট্রিম (trim) করে নিন: if (input.trim() === '') { /* empty! */ }
চ্যালেঞ্জ

ছোট কুইজ

`Hello ${1 + 2}` এর মান কত দেখাবে?

পড়া চালিয়ে যান

← Operators & ExpressionsConditionals →