জাভাস্ক্রিপ্ট ইএস ৬(ES6): টেমপ্লেট লিটারেল(Template Literal) ও স্ট্রিং মেথড

Zonayed Ahmed
Jul 3, 2018 · 4 min read

আমাদের জাভাস্ক্রিপ্ট এ একটা স্ট্রিং কয়েকটা ভ্যারিয়েবলসহ প্রিন্ট করাতে চাইলে আমাদের সেই ভ্যারিয়েবলগুলোকে কনক্যাট করে নিতে হয় + চিহ্নের সাহায্যে। ব্যাপারটা আসলেই একটু বিরক্তকর ছিলো। অনেক বড় স্ট্রিং এর ক্ষেত্রে খুব সহজেই হারিয়ে যাওয়ার মতো অবস্থা ছিলো। যেমন নিচের এই উদাহরনে আমি আমার কিছু ইনফরমেশন কয়েকটা ভ্যারিয়েবল থেকে নিয়ে প্রিন্ট করাতে চাচ্ছিঃ

var name = 'Zonayed Ahmed',
age = 21,
work= 'Student';
console.log('My name is ' + name + ' and I\'m ' + age + 'years old! Currently I\'m a ' + work);

এটা এক্সিকিউট করলে এভাবে আউটপুট আসবেঃ

এখানে আমাদের প্লাস + চিহ্ন দিয়ে ভ্যারিয়েবলগুলোকে আমার স্ট্রিংগুলোর সাথে কনক্যাট করতে হয়েছে। এটাও ঠিক আছে, কিন্তু বার বার এভাবে দিয়ে স্ট্রিং গুলোকে বেধে দিয়ে + দিয়ে এভাবে ভ্যারিয়েবলগুলোকে অ্যাক্সেস করা ঝামেলাপূর্ণ। অনেকসময় দেখা যায় বড় স্ট্রিং এর ক্ষেত্রে দুই একটা মিস হয়ে গেছে। আবার দেখুন এখানে I’m লেখার জন্যে এসকেপ ক্যারেক্টার \ ইউজ করতে হয়েছে। ওভারল এটা একটা মেস হয়ে গেছে।

আর এইজন্যেই ইএস এ এসেছে টেমপ্লেট লিটারেল। এর প্রধান কাজ হচ্ছে এই স্ট্রিং কনক্যাটিনেশনের কমপ্লেক্সিটি কমানো। টেমপ্লেট লিটারেলে আমরা এই চিহ্ন ` (ব্যাকটিক, ট্যাব tab কীর উপরে) ইউজ করে পুরো স্ট্রিং টাকে বেঁধে ফেলি, তারপর ভিতরে কোনো ভ্যারিয়েবল বা সিম্পল ক্যাল্কুলেশন করতে চাইলে ${} এর ভিতরে রাখি। সেইম জিনিসটাই টেমপ্লেট লিটারেল দিয়ে প্রিন্ট করলেঃ

const name6 = 'Zonayed Ahmed',
age6 = 21,
work6 = 'Student';
console.log(`My name is ${name6} and I\'m ${age6}years old! Currently I\'m a ${work6}`);

এটার আউটপুট আসবে এরকমভাবেঃ

এখানে আমি const দিয়ে ভ্যারিয়েবল ডিক্লেয়ার করলেও আপনি চাইলে var বা letও ইউস করতে পারবেন। আমি জাস্ট যেহেতু ইএস ৬ এ কোড লিখছি, তাই পুরোটাই ইএস ৬ এ লিখলাম।

এই কোডটা অবশ্যই আগেরটার চাইতে ঝামেলা কম এবং দেখতে অনেকটা ক্লিন দেখাচ্ছে। সেই সাথে ভিতরে আপনি যেকোনো ক্যারেক্টারই ইউজ করতে পারবেন এসকেপ না করে। স্মার্ট!

আরো কিছু উদাহরন টেমপ্লেট লিটারেল নিয়েঃ

function calculateAge(dob) {
return `I'm ${2018 - dob} years old!`;
}
calculateAge(1996);

এভাবেই ইএস ৬ এর টেমপ্লেট লিটারেল ইউজ করে আরো ক্লিন এবং সহজভাবে, সুন্দর করে কোড লিখতে পারবেন কোনো ঝামেলা ছাড়াই।

ইএস৬ এর সাথে আরো কিছু নতুন স্ট্রিং মেথড এসেছে। তারমধ্যে এখানে আমি খুবই ইউজফুল কিছু মেথড নিয়ে ডিসকাস করবো।

  • একটা স্ট্রিং কোনো স্পেসেফিক ক্যারেক্টার/স্ট্রিং দিয়ে শুরু হয়েছে কিনা সেটার জন্যে startsWith মেথড
  • একটা স্ট্রিং কোনো স্পেসেফিক ক্যারেক্টার/স্ট্রিং দিয়ে শেষ হয়েছে কিনা সেটার জন্যে endsWith মেথড
  • একটা স্ট্রিং কোনো স্পেসেফিক ক্যারেক্টার/স্ট্রিং আছে কিনা সেটার জন্যে includes মেথড
  • একটা স্ট্রিং স্পেসেফিক অ্যামাউন্টে রিপিট করানোর জন্যে repeat মেথড

startsWith মেথডঃ

আপনার কাঙ্ক্ষিত স্ট্রিং নির্দিষ্ট কোনো ক্যারেক্টার বা ক্যারেক্টার সেট দিয়ে শুরু হয়েছে কিনা সেটা দেখতেই এই মেথড ইউজ হয়। এটা সবসময় Boolean ভ্যালু true অথবা false রিটার্ন করেঃ

const start = 'My name is Khan';
start.startsWith('My');

endsWith মেথডঃ

আপনার কাঙ্ক্ষিত স্ট্রিং নির্দিষ্ট কোনো ক্যারেক্টার বা ক্যারেক্টার সেট দিয়ে শেষ হয়েছে কিনা সেটা দেখতেই এই মেথড ইউজ হয়। এটাও সবসময় Boolean ভ্যালু true অথবা false রিটার্ন করেঃ

const end = 'I love programming';
end.endsWith('My');

includes মেথডঃ

আপনার কাঙ্ক্ষিত স্ট্রিং নির্দিষ্ট কোনো ক্যারেক্টার বা ক্যারেক্টার সেট আছে কিনা সেটা দেখতেই এই মেথড ইউজ হয়। এটাও সবসময় Boolean ভ্যালু true অথবা false রিটার্ন করেঃ

const inc = 'I love programming with JavaScript';
inc.includes('with');

repeat মেথডঃ

একটা স্ট্রিংকে কয়েকবার রিপিট করতে চাইলে এই মেথড ইউজ করা হয়ঃ

const rpt = 'Hello World ';
rpt.repeat(5);

আরো কিছুঃ

console.log(`I always want to say ${'Alhamdulillah '.repeat(5)}!`);

মনে রাখবেন এটা স্ট্রিং এর মেথড, একমাত্র স্ট্রিং এর সাথেও কাজ করবে, নাম্বার বা অন্যকোনোকিছুর সাথে কাজ করবে না।

এখানে উদাহরনগুলোয় আমি const ইউজ করলেও আপনি var ও ইউজ করতে পারবেন। আমি শুধুমাত্র ইএস৬ এ কোড লেখায় যতটুকু সম্ভব সবগুলোই ইএস৬ এ রাখতে চেয়েছি… এটা ভালো প্র্যাকটিস।


আমার এই লেখা পূর্বে আমার ব্লগে প্রকাশিত হয়েছে। চাইলে আমার ব্লগ থেকে ঘুরে আসতে পারেন। ব্লগ থেকে সাবস্ক্রাইব করলে আমি নিজে থেকেই আমার নতুন লেখাগুলো আপনার ইমেইলে প্রতি শুক্রবার সকালে পাঠিয়ে দিবো। ভালো থাকবেন। হ্যাপী প্রোগ্রামিং!

প্রোগ্রামিং পাতা

সহজ বাংলায় প্রোগ্রামিং জ্ঞান ছড়িয়ে দেয়ার প্রত্যয়ে

Zonayed Ahmed

Written by

Front End Engineer — Passionate Programmer — ❤ JavaScript — Skill is My Weapon, Perfection is My Habit — 🌍https://www.zonayed.me

প্রোগ্রামিং পাতা

সহজ বাংলায় প্রোগ্রামিং জ্ঞান ছড়িয়ে দেয়ার প্রত্যয়ে

Zonayed Ahmed

Written by

Front End Engineer — Passionate Programmer — ❤ JavaScript — Skill is My Weapon, Perfection is My Habit — 🌍https://www.zonayed.me

প্রোগ্রামিং পাতা

সহজ বাংলায় প্রোগ্রামিং জ্ঞান ছড়িয়ে দেয়ার প্রত্যয়ে

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store