string, template literal আর বাংলা Unicode

১ · string আসলে কী — ১৬-বিটের টুকরোর এমন সারি, যা বদলায় না

বাস্তব প্রোগ্রামের বড় অংশই লেখা। গ্রাহকের নাম, মোবাইল নম্বর, ঠিকানা, bKash-এর SMS, পণ্যের নাম, ওয়েবসাইটের URL — সবই লেখা। JavaScript-এ লেখা রাখার টাইপ হলো string. পর্ব ০৬-এ দেখেছেন, string একটি primitive টাইপ। এবার ভেতরে ঢুকে দেখা যাক।

প্রথমে একটি মানসিক মডেল। একটি string হলো ছোট ছোট ঘরের একটি সারি — ট্রেনের বগির মতো। প্রতিটি ঘরে একটি সংখ্যা থাকে, আর ঘরগুলোর নম্বর শুরু হয় 0 থেকে। কিন্তু একটি গুরুত্বপূর্ণ কথা: প্রতিটি ঘর একটি “অক্ষর” নয়, বরং ১৬ বিটের একটি টুকরো — যার নাম code unit. String-কে এভাবে টুকরোয় সাজানোর নিয়মের নাম UTF-16.

ইংরেজি অক্ষরের জন্য একটি code unit = একটি অক্ষর, তাই ইংরেজিতে কাজ করলে পার্থক্যটা চোখেই পড়ে না: "Hello".length হলো 5. কিন্তু "বাংলা" লিখলে? চোখে আপনি দেখছেন দুটি গুচ্ছ — “বাং” আর “লা”। ভেতরে আছে পাঁচটি টুকরো: ব, া-কার, ং, ল, া-কার। তাই "বাংলা".length হলো 5. আর একটি 🙂 ইমোজি একাই 2. কেন — সেটি অংশ ৬-এ ধাপে ধাপে দেখবেন।

string লেখার তিন উপায়

'...' আর "..."-এর মধ্যে আচরণে কোনো পার্থক্য নেই — একটি প্রজেক্টে একটি বেছে নিয়ে সবখানে সেটি রাখুন (Prettier-এর মতো টুল নিজেই এক রকম করে দেয়, পর্ব ৪৬)। ভেতরে একই উদ্ধৃতিচিহ্ন বা বিশেষ অক্ষর লাগলে লিখতে হয় escape sequence — backslash \ দিয়ে শুরু হওয়া ছোট সংকেত:

Immutability — string কখনো বদলায় না

নিচের ডায়াগ্রামে দেখুন, toUpperCase() ডাকলে আসলে কী ঘটে, আর city[0] = "D" লিখলে কেন কিছুই বদলায় না। মনে রাখবেন: variable হলো নামফলক, string হলো মেমরিতে থাকা মান (পর্ব ০৭-এ binding-এর ধারণা দেখেছেন)।

1let city = "dhaka";2const upper = city.toUpperCase();3city[0] = "D";        // কিছুই হবে না4console.log(city, upper);5city = "Dhaka";       // নামফলক সরানো6console.log(city);

Strict mode-এ ঠিক কী বার্তা আসে? Chrome, Edge আর Node.js-এ (তিনটিই V8) এটি:

TypeError: Cannot assign to read only property '0' of string 'dhaka'

২ · Template literal — backtick দিয়ে লেখা গড়া

ES2015 (ES6)-এর আগে একটি SMS বার্তা বানাতে লিখতে হতো এমন জোড়াতালি: "প্রিয় " + name + ", আপনার " + amount + " টাকা জমা হয়েছে।" — একটি space বাদ পড়লেই বার্তা বিশ্রী। Template literal এই ঝামেলা মিটিয়েছে। Backtick (`, কি-বোর্ডে সাধারণত Esc-এর নিচে) দিয়ে লেখা string-এর ভেতরে ${...} লিখলে সেখানে যেকোনো expression-এর মান বসে যায় — একে বলে interpolation.

const name = "রাফি", amount = 1250;

// পুরোনো পথ
const a = "প্রিয় " + name + ", আপনার " + amount + " টাকা জমা হয়েছে।";

// template literal
const b = `প্রিয় ${name}, আপনার ${amount} টাকা জমা হয়েছে।`;

// একাধিক লাইন — \n লাগে না
const receipt = `ABCL Store
পণ্য: ${3} টি
মোট: ${3 * 25} টাকা`;

${...}-এর ভেতরে শুধু variable নয়, যেকোনো expression বসে — হিসাব, function কল, ternary. JavaScript সেগুলো বাম থেকে ডানে একে একে হিসাব করে, প্রতিটি ফলকে string-এ রূপান্তর করে, তারপর সব টুকরো জুড়ে একটি নতুন string বানায়। ধাপে ধাপে দেখুন:

Tagged template আর String.raw — সংক্ষেপে

Backtick-এর ঠিক আগে একটি function-এর নাম লিখলে (tag`...`) সেটি হয় tagged template: JavaScript নিজে string জোড়া না দিয়ে স্থির টুকরোগুলোর array আর ${}-এর মানগুলো সেই function-এর হাতে তুলে দেয়। function ঠিক করে কী ফেরত দেবে। লাইব্রেরিগুলো এটি দিয়ে নিরাপদে HTML বা SQL বানায় — মানগুলো আলাদা হাতে আসে বলে সেগুলো escape করা সহজ।

ভাষার সাথেই আসে একটি tag: String.raw. এটি escape sequence-কে escape হিসেবে না ধরে হুবহু রেখে দেয়: String.raw`C:\new\table` দেয় C:\new\table — ঠিক যেমন লিখেছেন। `a\tb`.length হলো 3 (মাঝে একটি tab), কিন্তু String.raw`a\tb`.length হলো 4. Regex লেখার সময় এটি খুব কাজে লাগে, পর্ব ৩০-এ দেখবেন।

৩ · অংশ বের করা — index, at(), slice আর substring

একটি string-এর যেকোনো ঘর পড়া যায় index দিয়ে: "Dhaka"[0] হলো "D". শেষ ঘর চাইলে আগে লিখতে হতো s[s.length - 1]. ES2022-এ যুক্ত at() এটি সহজ করেছে: "Dhaka".at(-1) দেয় "a". ঋণাত্মক index মানে “শেষ থেকে গোনা”। সাবধান: "Dhaka"[-1] কিন্তু undefined — বন্ধনীর ভেতরে ঋণাত্মক সংখ্যা চলে না, শুধু at()-এ চলে।

একাধিক ঘর একসাথে কাটতে slice(start, end). নিয়ম দুটি: start-এর ঘর থাকে, end-এর ঘর বাদ যায়; আর ঋণাত্মক সংখ্যা মানে length থেকে বিয়োগ। "Bangladesh"-এর ঘরগুলো এমন:

  B   a   n   g   l   a   d   e   s   h
  0   1   2   3   4   5   6   7   8   9
-10  -9  -8  -7  -6  -5  -4  -3  -2  -1

৪ · খোঁজা, বদলানো, পরিষ্কার করা — রোজকার method-এর বাক্স

string-এর সাথে আসে অনেকগুলো built-in method. সবগুলো মুখস্থ করার দরকার নেই — কোন কাজের জন্য কোনটি আছে, সেটুকু জানলেই চলে। মনে রাখুন, এদের কোনোটিই মূল string বদলায় না; ফল চাইলে নতুন variable-এ রাখুন।

কয়েকটি সূক্ষ্ম বিষয়, যেগুলো নিয়ে ভুল সবচেয়ে বেশি হয়:

• replace শুধু প্রথমটি বদলায়। string দিয়ে খুঁজলে replace কেবল প্রথম মিলটি বদলায়। সবগুলো বদলাতে ES2021-এ যুক্ত replaceAll. আগে এর জন্য regex-এর /g flag বা split(x).join(y) কৌশল লাগত — regex নিয়ে বিস্তারিত পর্ব ৩০-এ।
• toLocaleUpperCase. কিছু ভাষায় বড় হাতের নিয়ম আলাদা। তুর্কি ভাষায় "i".toLocaleUpperCase("tr") দেয় ফোঁটাওয়ালা "İ", সাধারণ toUpperCase দেয় "I". আবার জার্মান "ß".toUpperCase() হয় "SS" — দৈর্ঘ্যই বদলে যায়! বাংলা লিপিতে বড়-ছোট হাতের ধারণা নেই, তাই এগুলো বাংলা লেখাকে ছোঁয় না।
• +, concat আর template literal. তিনটিই নতুন string বানায়। "a".concat("b", 1) → "ab1". কিন্তু +-এর ফাঁদ মনে রাখুন: "x" + 1 + 2 হলো "x12", আর 1 + 2 + "x" হলো "3x" — বাম থেকে ডানে হিসাব হয়। লেখা গড়তে template literal সবচেয়ে পরিষ্কার।
• String(x) বনাম x.toString(). দুটোই string বানায়, কিন্তু null বা undefined-এ পার্থক্য: String(null) দেয় "null", আর null.toString() দেয় TypeError: Cannot read properties of null (reading 'toString') (V8-এর বার্তা)। মান কী হবে নিশ্চিত না হলে String() নিরাপদ।

এবার চারটি বাস্তব কাজ একসাথে — ফোন নম্বর পরিষ্কার, SMS বার্তা, রসিদের লাইন আর কার্ড নম্বর ঢাকা। চালিয়ে দেখুন:

// ১) ফর্মে টাইপ করা ফোন নম্বর পরিষ্কার করা
const raw = "  +880 1712-345678 ";
const phone = raw.trim().replaceAll(" ", "").replaceAll("-", "");
console.log(phone, phone.startsWith("+880"), phone.length);

// ২) template literal দিয়ে SMS বার্তা
const name = "রাফি", amount = 1250;
console.log(`প্রিয় ${name}, আপনার ${amount} টাকা জমা হয়েছে।`);

// ৩) রসিদের লাইন — padEnd আর padStart
const items = [["Tea", 20], ["Singara", 15], ["চা", 20]];
for (const [item, price] of items) {
  console.log(item.padEnd(10, ".") + String(price).padStart(5));
}

// ৪) কার্ড নম্বরের শেষ ৪টি অঙ্ক ছাড়া সব ঢাকা
const card = "4111 1111 1111 1234".replaceAll(" ", "");
console.log(card.slice(-4).padStart(card.length, "*"));

console.log(JSON.stringify(raw));   // মূল string অক্ষত

৫ · string তুলনা — ===, < আর localeCompare

=== দুটি string-এর প্রতিটি code unit হুবহু মেলায়। একটি space বেশি, একটি অক্ষর বড় হাতের, বা — বাংলায় যা খুব সাধারণ — একই দেখতে কিন্তু ভিন্ন code point (অংশ ৭) হলেই false.

< আর > string-এর ক্ষেত্রে code unit-এর সংখ্যা ধরে তুলনা করে — অভিধানের নিয়মে নয়। ইংরেজিতে এর প্রথম ফাঁদ: সব বড় হাতের অক্ষরের সংখ্যা ছোট হাতের আগে। তাই "Zara" < "anik" হলো true, আর ["rahim", "Karim", "anik", "Zara"].sort() দেয় ["Karim", "Zara", "anik", "rahim"] — কোনো মানুষ এভাবে নাম সাজায় না।

বাংলায় Unicode-এর ঘরগুলো মোটামুটি বর্ণমালার ক্রমে সাজানো (অ, আ, ই… ক, খ…), তাই সাধারণ শব্দে < প্রায়ই ঠিক ফল দেয় — আর সেজন্যই বিপদটা চোখে পড়ে না। কিন্তু কয়েকটি অক্ষরের ঘর বর্ণমালার জায়গায় নেই। আমরা Node.js 20 আর Edge-এ চালিয়ে দেখেছি:

মানুষের ভাষার নিয়মে সাজাতে ব্যবহার করুন a.localeCompare(b, "bn") — এটি a আগে হলে ঋণাত্মক, পরে হলে ধনাত্মক, সমান হলে 0 দেয়, তাই সরাসরি sort-এ বসে: names.sort((a, b) => a.localeCompare(b, "bn")). অনেক বড় তালিকা হলে একবার const coll = new Intl.Collator("bn") বানিয়ে names.sort(coll.compare) লিখুন — প্রতিবার নতুন করে নিয়ম লোড করতে হয় না। ইংরেজি নামেও localeCompare দেয় ["anik", "Karim", "rahim", "Zara"]. বাংলা কোন অক্ষর ঠিক কোথায় বসবে, তা নির্ভর করে ব্রাউজারের ভেতরের ভাষা-তথ্যের (CLDR/ICU) ওপর — তাই খুব সূক্ষ্ম ক্ষেত্রে ব্রাউজারভেদে ফল সামান্য আলাদা হতে পারে। উপরের ফলগুলো আমাদের যাচাই করা দুই পরিবেশের।

৬ · বাংলা Unicode গভীরে — code unit, code point আর grapheme

এবার এই পর্বের সবচেয়ে গুরুত্বপূর্ণ অংশ। “একটি অক্ষর” বলতে আসলে তিনটি আলাদা জিনিস বোঝানো যায়, আর JavaScript-এর আলাদা টুল আলাদা জিনিস গোনে।

Intl.Segmenter — চোখের অক্ষর গোনা

ES2022-এর Intl অংশে (ECMA-402) যুক্ত Intl.Segmenter লেখাকে grapheme, শব্দ বা বাক্যে ভাগ করে। Chrome-এ এটি ২০২০ সাল থেকে আছে; Firefox-এ এসেছে অনেক পরে, ২০২৪ সালে। চালিয়ে দেখুন — সাথে উল্টানো, ইমোজি আর normalization-এর পরীক্ষাও আছে:

const seg = new Intl.Segmenter("bn", { granularity: "grapheme" });
const graphemes = s => [...seg.segment(s)].map(x => x.segment);

const text = "বাংলা🙂";
console.log("code unit:", text.length);
console.log("code point:", [...text].length);
console.log("grapheme:", graphemes(text).length, graphemes(text));
console.log("ক্ষমা:", "ক্ষমা".length, graphemes("ক্ষমা"));

// উল্টানো: ভুল পথ বনাম grapheme ধরে
console.log("split(''):", "বাংলা".split("").reverse().join(""));
console.log("grapheme:", graphemes("বাংলা").reverse().join(""));

// ইমোজি = surrogate pair
const smile = "🙂";
console.log(smile.length, smile.codePointAt(0).toString(16), String.fromCodePoint(0x1F642));

// একই দেখতে, ভিন্ন code point
const y1 = "\u09DF", y2 = "\u09AF\u09BC";   // য় একক বনাম য + ়
console.log(y1 === y2, y1.normalize("NFC") === y2.normalize("NFC"));

বাস্তব উদাহরণ: বাংলা SMS-এর অক্ষর-সীমা

মোবাইলের SMS-এ ইংরেজি (GSM 7-bit) বার্তায় একবারে ১৬০ অক্ষর যায়, কিন্তু বাংলা থাকলে বার্তা যায় ১৬-বিটের UCS-2 encoding-এ — একবারে ৭০টি ঘর, আর লম্বা বার্তা ভাগ হলে প্রতি ভাগে ৬৭টি। এখানে মজার ব্যাপার: SMS gateway গোনে ১৬-বিটের ঘর — অর্থাৎ ঠিক .length-এর মতো! তাই “কয়টি SMS লাগবে” হিসাবের জন্য .length সঠিক টুল (একটি ইমোজি ২টি ঘর খায়)। কিন্তু ব্যবহারকারীকে “আর কত অক্ষর লিখতে পারবেন” দেখাতে চাইলে মানুষ ভাবেন grapheme-এ। ভালো ফর্ম দুটোই দেখায়: “১২টি অক্ষর · ৩১/৭০ ঘর”।

codePointAt আর fromCodePoint

"অ".codePointAt(0) দেয় 2437 (hex-এ 985, অর্থাৎ U+0985); উল্টো দিকে String.fromCodePoint(0x1F642) দেয় 🙂. পুরোনো charCodeAt আর String.fromCharCode কাজ করে code unit নিয়ে: "😀".charCodeAt(0) দেয় শুধু প্রথম অর্ধেক, 55357. ES2015-এ code point-ভিত্তিক নতুন method দুটি যুক্ত হয়েছে ঠিক এই সমস্যা মেটাতে।

৭ · Normalization আর বাংলা অঙ্ক

আগের কোডের শেষ লাইনে y1 === y2 ছিল false, অথচ দুটোই পর্দায় হুবহু “য়”। কারণ Unicode-এ য় লেখার দুটি উপায় আছে: একটি একক code point U+09DF, আর য (U+09AF) + নুক্তা ় (U+09BC). বাংলায় ড় (U+09DC) আর ঢ় (U+09DD)-এরও একই অবস্থা। কি-বোর্ড, ফোন বা পুরোনো কনভার্টার ভেদে আলাদা রূপ আসতে পারে। ফলে ডেটাবেসে খুঁজলে “ময়না” পাওয়া যায় না, যদিও সেটি আছে!

সমাধান normalization: s.normalize("NFC") একই অর্থের সব রূপকে একটি নির্দিষ্ট রূপে আনে। তুলনা, খোঁজা বা ডেটাবেসে রাখার আগে ব্যবহারকারীর লেখা normalize করে নিন।

বাংলা অঙ্ক ↔ ইংরেজি অঙ্ক

বাংলাদেশি ফর্মে মানুষ প্রায়ই বাংলা অঙ্কে ফোন নম্বর লেখেন: “০১৭১২৩৪৫৬৭৮”। কিন্তু JavaScript বাংলা অঙ্ক সংখ্যা হিসেবে চেনে না — Number("১২৩") দেয় NaN. বাংলা অঙ্ক ০–৯ Unicode-এ পরপর সাজানো (U+09E6 থেকে U+09EF), তাই একটি ছোট সাহায্যকারী function যথেষ্ট:

const BN = "০১২৩৪৫৬৭৮৯";
const toLatin = s => s.replace(/[০-৯]/g, d => BN.indexOf(d));
const toBangla = s => String(s).replace(/[0-9]/g, d => BN[d]);

toLatin("০১৭১২৩৪৫৬৭৮");   // "01712345678"
toBangla(2026);            // "২০২৬"

// দেখানোর জন্য Intl (পর্ব ২০-এ বিস্তারিত)
new Intl.NumberFormat("bn-BD").format(1234567);   // "১২,৩৪,৫৬৭"

৮ · AI-এর যুগে — বাংলা লেখায় AI-এর চেনা ভুল

AI মডেলগুলো যে বিপুল কোড থেকে শিখেছে, তার প্রায় সবটাই ইংরেজি লেখা নিয়ে। ইংরেজিতে code unit = অক্ষর, তাই সেখানে যে কোড নিখুঁত, বাংলায় সেটিই চুপচাপ ভুল করে। কোনো error আসে না — শুধু ভুল সংখ্যা, ভাঙা লেখা, ভুল ক্রম।

AI-এর string কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• কোডটি বাংলা যুক্তাক্ষর (“ক্ষমা”), কার-চিহ্ন আর একটি ইমোজি দিয়ে নিজে চালিয়ে দেখেছি
• “দৈর্ঘ্য” কোন অর্থে — code unit, code point না grapheme — কাজের সাথে মিলিয়ে নিয়েছি
• substr, split(''), সাধারণ sort() খুঁজে বদলেছি
• ব্যবহারকারীর লেখা তুলনা বা সংরক্ষণের আগে trim আর normalize("NFC") আছে
• লম্বা লেখা কাটার জায়গায় ইমোজির মাঝখানে কাটা পড়ছে না — isWellFormed() দিয়ে পরীক্ষা করেছি