string মানে code unit-এর একটা সারি: পুরো ছবিটা

Maria-র স্কুলে নামের badge print হয়। Printer প্রতিটা character-এর জন্য একটা করে ছোট বাক্স দেয়, আর কয়টা বাক্স লাগবে সেটা program-কে জিজ্ঞেস করে: name.length। "Maria" পায় 5টা বাক্স, ঠিকই আছে। ওর বান্ধবী Mahi লেখে "মাহি", আর পায় 4টা বাক্স, অথচ চোখে পড়ে দুটো অক্ষর। Zara নামের পাশে একটা smiley বসায়, আর পায় একটা বাক্স বেশি। Printer নষ্ট না। ও কিছু একটা গোনে, আর এই lesson-এ আমরা ঠিক সেটাই খুঁজে বের করব।

String জিনিসটা কী

string হলো এমন একটা value যার ভেতরে text থাকে: একটা নাম, একটা message, input-এর একটা লাইন। Module 1-এ এটাকে সাতটা primitive type-এর একটা হিসেবে দেখেছ। Engine-এর ভেতরে একটা string হলো পরপর সাজানো ছোট ছোট বাক্সের একটা সারি।

প্রতিটা বাক্সে থাকে একটা code unit: 0 থেকে 65535-এর মধ্যে একটা সংখ্যা, যেটা text-এর এক টুকরোকে বোঝায়। বাক্সগুলোর নম্বর শুরু হয় 0 থেকে, আর একটা বাক্সের নম্বরকে বলে তার index। বাক্স মোট কয়টা, সেটাই string-এর length।

English অক্ষর, অঙ্ক আর রোজকার বেশিরভাগ character-এর বেলায় এক character মানে এক বাক্স। তিনটা নাম নিয়ে badge printer-এর প্রশ্নটাই করে দেখা যাক।

console.log("Maria".length);
console.log("মাহি".length);
console.log("Zara 😀".length);

5
4
7

"Maria" পাঁচটা বাক্স। বাকি দুটো উত্তর হলো badge printer-এর সেই চমক, আর এই lesson-এর শেষ অংশ দুটোরই কারণ দেখাবে। তাহলে length বাক্স গোনে, আর সাধারণ English text-এ একটা বাক্স মানে একটা অক্ষর।

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

Code-এ একটা string লেখা হয় quote-এর ভেতরে। JavaScript-এ quote তিন রকম, আর তিনটাই একই type-এর value বানায়।

const name = "Amara";
console.log("She said \"hi\"");
console.log('She said "hi"');
console.log(`Hello, ${name}! You have ${2 + 3} new messages.`);
console.log(`Line one
Line two`);
console.log(typeof `x`);

She said "hi"
She said "hi"
Hello, Amara! You have 5 new messages.
Line one
Line two
string

Double quote আর single quote একইভাবে কাজ করে। Double quote-এর ভেতরে একটা double quote বসাতে লেখো \"; backslash দিয়ে শুরু হয় একটা escape, মানে দুটো character মিলে একটার কাজ করে। \n হলো নতুন লাইন, আর \\ হলো একটা backslash।

Backtick দিয়ে হয় template literal। এর ভেতরে ${...} যেকোনো expression চালায়, আর তার value-টা text-এর ভেতরে বসিয়ে দেয়। Code-এ লাইন ভাঙলে string-এও লাইন ভাঙে। Template literal পুরোটা শেখাবে lesson 02।

এই track double quote লেখে, আর text-এর ভেতরে কোনো value বসাতে হলে backtick। তাহলে তিন রকম quote একই type-এর তিনটা বানান, আর text যেটায় সবচেয়ে সহজে পড়া যায়, সেটাই বেছে নাও।

"text"   'text'   `text with ${expression}`

s.length        বাক্সের সংখ্যা (code unit)
s[i]            index i-এর বাক্স, length 1-এর একটা string হিসেবে
s.at(i)         একই জিনিস, আর i negative হলে শেষ থেকে গোনে
s.method(...)   নতুন একটা string (বা number, boolean, array); s নিজে কখনো বদলায় না

বাক্সগুলো আর তাদের নম্বর

"Amara" string-টাকে বাক্সে এঁকে ফেলো। প্রতিটা বাক্সের ওপরে তার index, 0 থেকে 4। প্রথম বাক্স যেহেতু বাক্স 0, শেষ বাক্স সবসময় length - 1, এখানে 4।

বাক্সগুলোর নিচের সারিটা গোনার দ্বিতীয় একটা উপায়, শেষ থেকে। এটা চলে s.at(i) দিয়ে, square bracket দিয়ে না। এবার দেখো, একই string নিয়ে ছয়টা প্রশ্নের উত্তর engine কীভাবে দেয়।

শেষ ধাপে slice-এর একটা ঝলক দেখলে, যেটা এক সারি বাক্স copy করে নতুন একটা string বানায়। বাকি সব method-এর সাথে এটাও শেখাবে lesson 02।

একটা বাক্স পড়া: s[i] আর s.at(i)

String-এর পরে square bracket দিলে একটা বাক্স পড়া যায়: s[0] হলো প্রথমটা। উত্তরটা নিজেও একটা string, এক বাক্স লম্বা। s.at(i)-ও একই কাজ করে, আর negative index-ও নেয়, তাই s.at(-1) মানে শেষ বাক্স।

const s = "Amara";
console.log(s[0], s[1], s[4]);
console.log(s[s.length - 1], s.at(-1), s.at(-2));
console.log(s[5], s[-1], s.at(5));
console.log(typeof s[0], s[0].length);

A m a
a a r
undefined undefined undefined
string 1

লাইন 2 শেষ বাক্সটা দুবার পড়ে: একবার index হিসাব করে, একবার at(-1) দিয়ে। লাইন 3 এমন বাক্স চায় যেগুলো নেই। কোনো error আসে না, আসে শুধু undefined, যাকে Module 1 বলেছিল "এখনো কোনো value নেই"।

s[-1]-টা খেয়াল করো: square bracket শেষ থেকে গোনে না। ও "-1" নামের একটা বাক্স খোঁজে, পায় না, আর দেয় undefined। তাই শেষ বাক্সের জন্য s.at(-1), আর index আগে থেকে জানা থাকলে s[i]।

String কখনো বদলায় না

বাক্স পড়া যায়, কিন্তু বদলানো যায় না। String immutable: একবার বানানো হলে যেমন আছে তেমনই থাকে। সাধারণ একটা program-এ বাক্সে লিখতে গেলে error হয় না। কিছুই হয় না, ব্যস।

let word = "kenji";
word[0] = "K";
console.log(word);

const upper = word.toUpperCase();
console.log(word, upper);

word = "K" + word.slice(1);
console.log(word);

kenji
kenji KENJI
Kenji

লাইন 2 বাক্স 0 বদলাতে চেয়েছিল, string সেটা পাত্তাই দেয়নি। toUpperCase()-ও word-কে বদলায়নি। ও নতুন একটা string বানিয়েছে, "KENJI", সেটা ফেরত দিয়েছে, আর program সেটা রেখেছে upper-এ।

শেষ পরিবর্তনটা কাজ করেছে, কারণ ওটা নতুন একটা string বানিয়ে word-এ রেখেছে। এটা চলে: word একটা let, তাই অন্য string রাখতে পারে। পুরোনো "kenji"-তে কেউ হাতই দেয়নি। তাহলে একটা নাম নতুন value-র দিকে তাকাতে পারবে কি না, সেটা ঠিক করে let আর const, আর immutable মানে string নিজে কখনো বদলায় না।

প্রতিটা string method এভাবেই কাজ করে: নতুন একটা value ফেরত দেয়, আসলটাকে যেমন ছিল তেমন রেখে দেয়। Strict mode হলো ভাষার একটু কড়া একটা setting, আর Module 11-এর module-গুলো এটা চালু করে দেয়। Strict mode-এ লাইন 2-এর ওই লেখাটা একটা TypeError দিয়ে program থামিয়ে দেয়, message-টা দেখাবে lesson 06।

যখন length মানে অক্ষরের সংখ্যা না

আবার badge printer-এ ফিরি। একটা বাক্সে থাকে 0 থেকে 65535-এর একটা সংখ্যা, আর দুনিয়ার বেশিরভাগ অক্ষর এক বাক্সেই এঁটে যায়। দুটো জিনিস পাঠক যেভাবে ভাবে সেভাবে চলে না।

• বাংলা কার-চিহ্ন নিজেই একটা বাক্স। মা মানে অক্ষর ম, তারপর আ-কার া। Unicode, যে standard দুনিয়ার প্রতিটা character-কে একটা নম্বর দেয়, কার-চিহ্নকে আলাদা character হিসেবে রাখে। পাঠক দেখে একটা অক্ষর, string-এ থাকে দুটো বাক্স।
• একটা emoji-র প্রায়ই দুটো বাক্স লাগে। Unicode এখন এত character-কে নম্বর দেয় যে 65535-এ আর কুলায় না। ওই সীমার ওপারের character, যেমন 😀, রাখা হয় দুটো বাক্সে, যাদের বলে surrogate pair। প্রতিটা অর্ধেক একা কোনো মানে বহন করে না।

JavaScript এই বাক্সগুলোতে text যে নিয়মে রাখে, তার নাম UTF-16। নিচের widget "মাহি 😀"-কে বাক্স ধরে ধরে দেখায়, আর তার নিচে আঁকা থাকে পাঠক কী দেখে।

প্রতিটা character-এর একটা Unicode নম্বর আছে, তার code point। Emoji-টা একটা code point, রাখা আছে দুটো বাক্সে। [...s] একটা string-কে তার code point-গুলোর একটা list-এ ছড়িয়ে দেয়, আর list-এর এই spread লেখার ধরনটা শেখাবে Module 7। তাই [...s].length emoji-টাকে একবারই গোনে।

const s = "মাহি 😀";
console.log(s.length);
console.log([...s].length);
console.log(JSON.stringify(s[5]), JSON.stringify(s.slice(5)));

7
6
"\ud83d" "😀"

JSON.stringify একটা value-কে code হিসেবে লেখে, তাই একা অর্ধেকটা ভাঙা চিহ্নের বদলে দেখা যায় তার নম্বর হিসেবে, \ud83d। তিন রকম গোনা, তিনটা উত্তর: 7টা বাক্স, 6টা code point, পাঠকের চোখে 4টা character।

এই track-এর problem-গুলোতে statement আলাদা কিছু না বললে length-এর গোনাটাই ধরা হয়। পাঠক যা দেখে তা গুনতে lesson 05-এর একটা tool লাগে। তাই string-এ বাংলা বা emoji থাকতে পারলে length-কে কখনো "অক্ষরের সংখ্যা" বলবে না।

const word = "Zara";
console.log(word.length);
console.log(word[0], word[3]);
console.log(word.at(-1), word.at(-4));
console.log(word[4]);

4
Z a
a Z
undefined

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

const name = next();
out.push(`Name:   ${name}`);
out.push(`Boxes:  ${name.length}`);
out.push(`First:  ${name[0]}`);
out.push(`Last:   ${name.at(-1)}`);
out.push(`Loud:   ${name.toUpperCase()}`);
out.push(`Still:  ${name}`);

console.log(out.join("\n"));

Name:   Amara
Boxes:  5
First:  A
Last:   a
Loud:   AMARA
Still:  Amara

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

const n = nextInt();
for (let i = 0; i < n; i++) {
  const name = next();
  const boxes = name.length;
  const points = [...name].length;
  let line = `${name}: ${boxes} boxes, ${points} code points`;
  if (boxes !== points) {
    line += ", check the badge";
  }
  out.push(line);
}

console.log(out.join("\n"));

Maria: 5 boxes, 5 code points
মাহি: 4 boxes, 4 code points
Zara😀: 6 boxes, 5 code points, check the badge
Kenji: 5 boxes, 5 code points

const name = "Bob";
console.log(name[name.length]);
console.log(name[name.length - 1]);

undefined
b

let title = "hello";
title[0] = "H";
console.log(title);

hello

let city = "dhaka";
city.toUpperCase();
console.log(city);

dhaka

const code = "BD-1207";
console.log(code[-1]);
console.log(code.at(-1));

undefined
7

console.log("Zara"[4]);
console.log("Zara".at(-5));
console.log("Zara".length - 1);

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const lines = input.split("\n");
let at = 0;
const next = () => lines[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out
// Read n, then n lines. Per line: code units, then code points.

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

এরপর lesson 02 প্রতিটা string method একটা একটা করে নেবে, তার output আর খরচসহ, আর দেখাবে character code-এর পুরো table।