এই আর্টিকেলে আপনি জানবেন—জাভাস্ক্রিপ্টে স্ট্রিং কী, কীভাবে তৈরি করবেন, কী কী মেথড আছে, এবং বাস্তব জীবনের উদাহরণসহ কিভাবে স্ট্রিং ম্যানিপুলেট করতে হয়। সমস্ত কোড স্যাম্পল <pre> ও <code> ব্লকে দেওয়া আছে যাতে সরাসরি কপি-পেস্ট করে আপনার সাইটে ব্যবহার করতে পারেন।
- জাভাস্ক্রিপ্টে স্ট্রিং কী?
- স্ট্রিং তৈরির পদ্ধতি
- স্ট্রিং প্রপার্টি (length ইত্যাদি)
- ইন্ডেক্সিং ও চরেক্টার এক্সেস
- প্রধান স্ট্রিং মেথডস (toUpperCase, trim...)
- অনুসন্ধান ও রূপান্তর (includes, replace)
- কনক্যাটেনেশন ও টেমপ্লেট লিটারাল
- মাল্টি-লাইন স্ট্রিং ও ইন্টারপোলেশন
- রেগুলার এক্সপ্রেশন (regex) সাথে স্ট্রিং
- পারফর্ম্যান্স টিপস এবং স্মৃতি (immutability)
- পাঠযোগ্যতা: বাইন্ডিং ও এনকোডিং
- প্রায়শই ব্যবহৃত ইউটিলিটি ফাংশন
- প্র্যাকটিক্যাল উদাহরণ: ফর্ম ভ্যালিডেশন, স্লাগ তৈরী
- টেবিল: স্ট্রিং মেথডস সংক্ষিপ্ত রেফারেন্স
- উপসংহার ও FAQ
জাভাস্ক্রিপ্টে স্ট্রিং কী?
স্ট্রিং বলতে জাভাস্ক্রিপ্টে টেক্সট বা অক্ষরের একটি সিরিজকে বোঝায়। এটি একটি প্রিমিটিভ ডাটা টাইপ (primitive) — অর্থাৎ স্ট্রিং অবজেক্ট নয়, তবে স্ট্রিং-প্রিমিটিভ-এ অস্থায়ীভাবে স্ট্রিং অবজেক্টে বর্ধিত করা হয় যখন মেথড কল করা হয়। প্রতিটি স্ট্রিং ক্যারেক্টার ইনডেক্সড হয় (0 থেকে শুরু) এবং স্ট্রিং ইমিউটেবল — মানে একটি স্ট্রিংকে সরাসরি পরিবর্তন করা যায় না, পরিবর্তে নতুন স্ট্রিং তৈরি করে ফলাফল পাই।
// স্ট্রিং ডিক্লিয়ারেশন
let a = "Hello";
let b = 'World';
let c = `Hello, ${b}!`; // template literalস্ট্রিং তৈরির পদ্ধতি
জাভাস্ক্রিপ্টে স্ট্রিং লেখার জন্য তিনটি প্রচলিত উপায় আছে:
- সিঙ্গেল কোট —
'...' - ডাবল কোট —
"..." - টেমপ্লেট লিটারেল — ব্যাকটিক
`...`(ইন্টারপোলেশন ও মাল্টি-লাইন সাপোর্ট)
// Examples:
let s1 = 'এটা একটি স্ট্রিং';
let s2 = "এটাও স্ট্রিং";
let name = "আহাদ";
let s3 = `হ্যালো ${name}, কেমন আছো?`;সাধারণত টেমপ্লেট লিটারেল ব্যবহার করলে কোড পরিষ্কার ও রিডেবল হয়, বিশেষত যখন ভ্যারিয়েবল ইনসার্ট করতে হয় বা নতুন লাইনে টেক্সট লিখতে হয়।
স্ট্রিং প্রপার্টি: length এবং আরও
প্রতিটি স্ট্রিং-প্রিমিটিভের একটি length প্রপার্টি আছে যা মোট ক্যারেক্টারের সংখ্যা বলে দেয়। মনে রাখবেন: UTF-16 surrogate pairs বা emoji ইত্যাদি ক্ষেত্রে একটা ভিজিবল glyph একাধিক code unit নিতে পারে — সোজা ক্ষেত্রে length যথাযথ, কিন্তু Unicode-সংশ্লিষ্ট স্পেশাল কেসে আলাদা হ্যান্ডলিং দরকার।
let text = "Javascript";
console.log(text.length); // 10প্র্যাকটিক্যাল টিপ: যখন বাংলা বা emoji হ্যান্ডলিং করা লাগে, তখন Array.from(str) কিংবা spread operator ব্যবহার করে ইউনিটগুলো আলাদাভাবে নেওয়া ভালো:
let s = "🙂👍 বাংলা";
console.log(s.length); // may count code units
console.log(Array.from(s).length); // counts actual characters/glyphsইনডেক্সিং ও চরেক্টার এক্সেস
স্ট্রিং-এ প্রতিটি ক্যারেক্টারকে আপনি ইনডেক্স দিয়ে অ্যাক্সেস করতে পারবেন:
let word = "Hello";
console.log(word[0]); // "H"
console.log(word.charAt(1)); // "e"নেগেটিভ ইনডেক্স সরাসরি সমর্থিত নয় (ES2022 পর্যন্ত)। শেষ থেকে নেবার জন্য আপনি slice(-1) বা at(-1) (নতুন) ব্যবহার করতে পারেন:
console.log(word.slice(-1)); // "o"
console.log(word.at(-1)); // "o" (নতুন ফিচার)প্রধান স্ট্রিং মেথডস (প্রশস্ত ব্যবহৃত)
নিচে জাভাস্ক্রিপ্টে সবচেয়ে বেশি ব্যবহৃত স্ট্রিং মেথডগুলোর তালিকা ও উদাহরণ দেয়া হলো:
| মেথড | বর্ণনা | উদাহরণ |
|---|---|---|
toUpperCase() | সকল অক্ষরকে বড় হাতের করে দেয় | "hi".toUpperCase() // "HI" |
toLowerCase() | সকল অক্ষরকে ছোট করে দেয় | "Hi".toLowerCase() // "hi" |
trim() | শুরু ও শেষে থাকা whitespace কেটে দেয় | " hi ".trim() // "hi" |
includes() | কোনো সাবস্ট্রিং আছে কি না চেক করে (boolean) | "hello".includes("ell") // true |
indexOf() | সাবস্ট্রিং এর প্রথম ইনডেক্স দেয়, না থাকলে -1 | "hello".indexOf("l") // 2 |
slice() | নির্দিষ্ট অংশ কেটে আনে | "hello".slice(1,4) // "ell" |
replace() | প্রথম ম্যাচ বা regex দিয়ে প্রতিস্থাপন করে | "abc".replace("b","B") // "aBc" |
split() | স্ট্রিংকে অ্যারে তে ভাগ করে | "a,b,c".split(",") // ["a","b","c"] |
let s = " Hello World! ";
console.log(s.trim().toUpperCase()); // "HELLO WORLD!"
console.log("banana".replace("a","A")); // "bAnana" (কেবল প্রথমটি বদলে)অনুসন্ধান ও রূপান্তর: includes, indexOf, replace এবং regex
স্ট্রিং-এ কোনো শব্দ আছে কি না, কোথায় আছে, কিংবা একাধিক স্থানে রূপান্তর করার জন্য আমরা includes(), indexOf(), replace() ও নিয়মিত অভিব্যক্তি (regular expressions) ব্যবহার করি।
// includes
console.log("I love JS".includes("love")); // true
// indexOf
console.log("hello hello".indexOf("hello")); // 0
// replace with regex (global)
console.log("foo foo".replace(/foo/g, "bar")); // "bar bar"নোট: replace এর ডিফল্ট আচরণ শুধু প্রথম ম্যাচ প্রতিস্থাপন করা। সবগুলো প্রতিস্থাপন করতে /pattern/g (global) ফ্ল্যাগ ব্যবহার করুন।
কনক্যাটেনেশন ও টেমপ্লেট লিটারাল
স্ট্রিং যোগ করার প্রচলিত উপায় হলো + অপারেটর। কিন্তু টেমপ্লেট লিটারাল (backticks) ব্যবহার করলে ভ্যারিয়েবল ইনসার্ট করা, একাধিক লাইন লেখা অনেকই পরিষ্কার হয়।
// concatenation
let a = "Good";
let b = "Morning";
console.log(a + " " + b); // "Good Morning"
// template literal
let name = "মিলি";
console.log(`হ্যালো ${name}, আজকের তারিখ ${new Date().toLocaleDateString()}`);মাল্টি-লাইন স্ট্রিং ও ইন্টারপোলেশন
পুরনো স্টাইল (অপেক্ষাকৃত কষ্টসাধ্য) অনুযায়ী মাল্টি-লাইন স্ট্রিং বানাতে আপনাকে newline escape করতে হতো। টেমপ্লেট লিটারেল দিয়ে সরাসরি মাল্টি-লাইন লেখা যায়:
let paragraph = `এটি একটি বহু-লাইন স্ট্রিং।
আপনি এখানে নতুন লাইন সরাসরি লিখতে পারবেন।
ইন্টারপোলেশনও সহজ: ${name}`;রেগুলার এক্সপ্রেশন (Regex) দিয়ে স্ট্রিং কন্ট্রোল
Regex খুব শক্তিশালী—প্যাটার্ন-ম্যাচিং, ভ্যালিডেশন, সাবস্ট্রিং এক্সট্র্যাকশন ইত্যাদিতে ব্যবহার হয়। উদাহরণ: ইমেল ভ্যালিডেশন বা নির্দিষ্ট ক্যারেক্টার সরানো।
// সহজ ইমেল ভ্যালিডেশন (বেসিক)
let re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(re.test("test@example.com")); // true
// সকল নন-অক্ষর সংখ্যা সরানো
let noisy = "Phone: +880-171-0000000";
let digitsOnly = noisy.replace(/\D/g, "");
console.log(digitsOnly); // "8801710000000"পারফর্ম্যান্স ও ইমিউটেবিলিটি (immutability)
স্ট্রিং ইমিউটেবল হওয়ায় প্রতিটি ছোট পরিবর্তন নতুন স্ট্রিং তৈরি করে—এটি যদি অত্যাধিক রিপ্লেস/কনক্যাট প্রয়োগ করা হয় তবে পারফর্ম্যান্স ইস্যু তৈরি হতে পারে। বড় টেক্সট ব্লকে বহুবার যোগ করতে চাইলে অ্যারে তে push করে শেষে join() ব্যবহার করা দ্রুততর হতে পারে:
// ঠিক না (বড় লুপে)
let s = "";
for(let i=0;i<10000;i++){ s += i + ","; }
// ভালো পদ্ধতি
let parts = [];
for(let i=0;i<10000;i++){ parts.push(i); }
let sFast = parts.join(",");পাঠযোগ্যতা: এনকোডিং এবং নিরাপত্তা
ওয়েব কনটেন্টে স্ট্রিং রেন্ডারিংয়ে এনকোডিং গুরুত্বপূর্ণ—সঠিকভাবে UTF-8 ব্যবহার করা নিশ্চিত করুন। ইউজার ইনপুট সরাসরি HTML-এ ইঞ্জেক্ট না করে অবশ্যই স্যানিটাইজ করুন, অন্যথায় XSS ঝুঁকি থাকতে পারে। সাধারণত টেমপ্লেটিং লাইব্রেরি বা textContent ব্যবহার করে HTML এ সরাসরি ইনজেকশন এড়ানো যায়।
// নিরাপদ রেন্ডারিং (DOM)
let div = document.createElement("div");
div.textContent = userInput; // স্যানিটাইজ করে দেয়জনপ্রিয় ইউটিলিটি ফাংশন (ছোট কিন্তু কাজে লাগে)
- capitalize() — প্রথম অক্ষর বড় করে দেওয়া
- slugify() — URL-friendly string তৈরি
- truncate() — লম্বা টেক্সট সংক্ষিপ্ত করা
// capitalize
function capitalize(s){ return s.charAt(0).toUpperCase() + s.slice(1); }
// slugify (সাধারণ)
function slugify(s){
return s.toString().toLowerCase().trim()
.replace(/\s+/g,'-') // whitespace -> dash
.replace(/[^\w\-]+/g,'') // non-word remove
.replace(/\-\-+/g,'-'); // multiple dashes -> single
}
// truncate
function truncate(s, n=100){ return s.length>n ? s.slice(0,n-1)+"…" : s; }প্র্যাকটিক্যাল উদাহরণসমূহ
ফর্ম ভ্যালিডেশন: নাম ও ফোন নাম্বার যাচাই
function validateName(name){
return !!name && name.trim().length >= 2;
}
function validatePhone(phone){
// বাংলাদেশ ফোন (সরল) : 11 সংখ্যার কোড
let digits = phone.replace(/\D/g,"");
return /^(\d{11})$/.test(digits);
}
console.log(validateName("আহাদ")); // true
console.log(validatePhone("+8801710000000")); // trueস্লাগ (slug) তৈরি করে ব্লগ URL বানানো
function makeSlug(title){
return title.toString().toLowerCase().trim()
.replace(/[^\u0e00-\uFFFF\w\s-]/g,'') // বাংলা/ইংরেজি অক্ষর রেখে অবাঞ্ছিত মুছে
.replace(/\s+/g,'-')
.replace(/\-+/g,'-');
}
console.log(makeSlug("জাভাস্ক্রিপ্ট স্ট্রিংস: কিভাবে কাজ করে?"));
// সম্ভবত -> "জাভাস্ক্রিপ্ট-স্ট্রিংস-কিভাবে-কাজ- করে"সামান্য টাস্ক: কিভাবে একটি বাক্যকে শব্দভিত্তিক অ্যারেতে রূপান্তর করবেন
let sentence = "আমি বাংলায় কোড লিখি।";
let words = sentence.split(/\s+/).filter(Boolean);
console.log(words); // ["আমি","বাংলায়","কোড","লিখি।"]স্ট্রিং মেথডস রেফারেন্স টেবিল (সংক্ষিপ্ত)
| মেথড | কী করে |
|---|---|
| charAt(i) | i-তম অক্ষর ফেরত |
| charCodeAt(i) | i-তম চর এর ইউনিকোড কোড |
| concat() | স্ট্রিং জোড়া |
| endsWith(substr) | কিছু দিয়ে শেষ হয় কি না |
| includes(substr) | সাবস্ট্রিং আছে কি না |
| match(regex) | regex-ম্যাচ রিটার্ন |
| padStart, padEnd | প্যাড করে স্ট্রিং |
| repeat(n) | স্ট্রিং n বার রিপিট করে |
| replace() | প্রতিস্থাপন |
| split() | অ্যারে তে ভাগ |
| startsWith(substr) | শুরু কি একইভাবে |
| substr(start, len) | বিশেষ অংশ ফেরত (deprecated) |
| substring(start, end) | part of string |
| toLowerCase(), toUpperCase() | কেস রূপান্তর |
| trim(), trimStart(), trimEnd() | whitespace কেটে দেয় |
উপসংহার
জাভাস্ক্রিপ্ট স্ট্রিং হলো ওয়েব ডেভেলপমেন্টে সবচেয়ে বেশি ব্যবহৃত ডাটা টাইপগুলোর মধ্যে একটি। সাধারণ ধারণা (ডিক্লেয়ারেশন), প্রধান মেথড (ইনক্লুডস, স্লাইস, রিপ্লেস), টেমপ্লেট লিটারাল, রেগেক্স-সহ স্ট্রিং ম্যানিপুলেশন শিখে আপনি দ্রুত শক্তিশালী টেক্সট প্রসেসিং লিখতে পারবেন। পারফর্ম্যান্সের দিক থেকে ইমিউটেবিলিটি মাথায় রেখে বড় টেক্সট ব্লকে বারবার কনক্যাট করা থেকে বিরত থাকুন। প্র্যাকটিক্যাল ইউটিলিটি ফাংশন ও উদাহরণগুলো আপনার প্রকল্পে সরাসরি প্রয়োগ করুন—সব কোড ব্লক কপি-পেস্টের জন্য প্রস্তুত আছে।
প্রশ্নোত্তর (FAQ)
১) স্ট্রিং ইমিউটেবল কি?
হ্যাঁ। স্ট্রিং ইমিউটেবল—অর্থাৎ একটি স্ট্রিং-প্রিমিটিভের কোনো অংশ সরাসরি পরিবর্তন করা যায় না। পরিবর্তিত মান পেতে নতুন স্ট্রিং তৈরি করা হয়।
২) Unicode বা emoji সঠিকভাবে গণনা করতে কী করবেন?
Unicode surrogate pairs বা emoji-এর সঠিক ক্যারেক্টার গণনার জন্য Array.from(str) বা spread operator ([...str]) ব্যবহার করুন। এগুলো ভিজিবল glyph-এ বিভক্ত করে।
৩) কনক্যাটেনেশনে দ্রুত উপায় কী?
বড় লুপে বারবার += ব্যবহার না করে অ্যারের মধ্যে অংশগুলো রেখে শেষে join() ব্যবহার করা দ্রুততর।
৪) HTML-এ ইউজার ইনপুট কিভাবে নিরাপদে দেখাবো?
সরাসরি innerHTML ব্যবহার না করে DOM এ টেক্সট 넣ার সময় textContent বা নিরাপদ টেমপ্লেটিং লাইব্রেরি ব্যবহার করুন যাতে XSS এড়ানো যায়।
৫) কখন Regex না ব্যবহার করাই ভালো?
সাধারণ টাস্ক যেমন সোজা substring check বা simple replace-এর জন্য Regex অতিরিক্ত জটিলতা বাড়াতে পারে। Regex-এ ভুল প্যাটার্ন পারফর্ম্যান্স সমস্যা বা ভুল ফল দিতে পারে—তাই প্রয়োজনে ব্যবহার করুন।
