Template Literal in Javascript - জাভাস্ক্রিপ্টে টেমপ্লেট লিটারেল

 

জাভাস্ক্রিপ্ট ইএস ৬(ES6) এ নতুনভাবে স্ট্রিং ডিক্লেয়ার এবং কিছু মজার কাজ করার জন্যই এসেছে টেমপ্লেট লিটারেল(Template Literal) যাকে টেমপ্লেট স্ট্রিং (Template String) ও বলা হয়।

হ্যালো সুন্দর মানুষজন, 

আজকের এই নতুন আরটিকেলে আপনাকে স্বাগতম । আজকে আলোচনার বিষয় হচ্ছে টেমপ্লেট লিটারেল(Template Literal)। 

আজকে আমরা যা যা শিখবো :-

১। টেমপ্লেট লিটারেল(Template Literal) সম্পর্কে

২। মাল্টিলাইন স্ট্রিং

৩। ভ্যারিয়েবল, কনক্যাটানেশন ও এক্সপ্রেশন

৪। টেমপ্লেট ট্যাগ

১। টেমপ্লেট লিটারেল(Template Literal) সম্পর্কে -

আগেই বলেছি, জাভাস্ক্রিপ্ট ইএস ৬(ES6) এ এই স্মার্ট ফিচারটি এসেছে । এটি ব্যাবহার করা খুবই সহজ, আমরা যখন কোনো স্ট্রিং নিই তখন সিঙ্গেল('') বা ডাবল কোটেশন("") ইউস করে নিই তাই নাহ ? হুম একদম তাই ।

তো টেমপ্লেট স্ট্রিং (Template String) ইউস করে কোনো স্ট্রিং নিতে হলে সিঙ্গেল বা ডাবল কোটেশনের পরিবর্তে - ব্যাকটিক (``) ইউস করতে হয় । ব্যাকটিক যদি আপনি খুজে না পান তাহলে আপনার কীবোর্ড এর ট্যাব tab কীর উপরে লক্ষ্য করেন।

সিনট্যাক্স :-

const Name = `Shakil Babu`

এই ফিচারটি আমাদের কি কি সুবিধা দেয় ?

 ১। এই ফিচারটির মাধ্যমে খুব সহজেই মাল্টিলাইন লাইন স্ট্রিং নেওয়া যায় । 

২। স্ট্রিং এর ভেতর ডাইনামিক ভ্যারিয়েবল ও এক্সপ্রেশন নিয়ে কাজ করা যায় । 

৩। এবং টেমপ্লেট ট্যাগ DSL(Domain Specific Language) নিয়েও কাজ করা যায়, যেমন - React.js এর Styled Component ।

২। মাল্টিলাইন স্ট্রিং :-

আমাদের অনেক সময় একের অধিক অর্থাৎ মাল্টিলাইন স্ট্রিং নিয়ে কাজ করার দরকার পরে । তো, আমরা জাভাস্ক্রিপ্ট ইএস৫(ES5) এ মাল্টিলাইন স্ট্রিং নেওয়ার সময় কিন্তু এস্কেপ(Escape) ক্যারেক্টারের সাহায্যে নিয়ে থাকি :-

const sentence = " I am first line \
I am second line "

আমরা কিন্তু মাল্টিলাইন স্ট্রিং নিয়েছি এখন যদি এইটার আউটপুট দেখি :-

console.log(sentence);
// output : I am first line I am second line

দেখছেন ? আউটপুট কিন্তু এক লাইনেই পেলাম । কারণ হলো আমরা শুধু \ ব্যাবহার করেছি সেইজন্য মাল্টিলাইন স্ট্রিং লিখতে পারছি আউটপুট মাল্টিলাইন পাচ্ছি নাহ ।

আউটপুটও যদি মাল্টিলাইন পেতে চাই তাহলে \n ব্যাবহার করে নিউ লাইন নিতে হবে ।

const sentence = " I am first line \n \
I am second line "

console.log(sentence);
/*
output:  
    I am first line
    I am second line
*/

এখন আমরা মাল্টিলাইন অর্থাৎ দুই লাইনে আউটপুটও পেয়েছি ।

উপরোক্ত কাজগুলো জাভাস্ক্রিপ্ট ইএস ৬(ES6) এর টেমপ্লেট লিটারেল(Template Literal) দিয়ে করা যাক :-

const sentence = `I am first line
I am second line `

console.log(sentence);
/*
output:  
    I am first line
    I am second line
*/

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

৩। ভ্যারিয়েবল, কনক্যাটানেশন ও এক্সপ্রেশন :-

আমরা একের অধিক ভ্যারিয়েবলকে এবং স্ট্রিং কে একসঙ্গে জোড়া লাগাতে ইএস৫ এ (+) সাইনের দ্বারা করে থাকি যেমন :-

const Name = 'Shakil Babu';
const town = 'Bogura';

console.log('I am ' + Name + ' from ' + town);
// output;
// I am Shakil Babu from Bogura

আমরা দুইটা ভ্যারিয়েবল নিয়েছি Name এবং town নামে । তারপর লগ করেছি স্ট্রিং এবং ভ্যারিয়েবল গুলো (+) সাইনের দ্বারা কনকেট করে। এখন একই কাজ যদি আমরা ইএস৬ এর টেমপ্লেট লিটারেলে করি :-

const Name = 'Shakil Babu';
const town = 'Bogura';

console.log(`I am ${Name} from ${town}`);
// output;
// I am Shakil Babu from Bogura

আগের তুলনায় অনেক সহজে আমরা কাজটা করতে পারলাম । একটা জিনিস মনে রাখবেন যেকোনো ভ্যারিয়েবল বা এক্সপ্রেশনই ইউস করেন নাহ কেন ${} এই সিনট্যাক্স এর ভেতরে করতে হবে ।

টেমপ্লেট লিটারেলের আরও কিছু ব্যাবহার দেখা যাক :-

আমরা চাইলে ছোট-খাটো এক্সপ্রেশনও ইউস করতে পারি :-

const number = 10;
console.log(`Number is ${number > 20 ? 'greator than 20':'less than 20'}`) 
// output:
// Number is less than 20

আরও একটি :-

const num = 10;
console.log(`Sum = ${num + 20 + 20}`);
// output:
// Sum = 50

৪। টেমপ্লেট ট্যাগ :-

টেমপ্লেট ট্যাগ জিনিসটা ইউস হয় সাধারণত বিভিন্ন লাইব্রেরির সাথে যেমন- Styled Component, Apollo and GraphQl ইত্যাদি । যদিও এই জিনিসটা আমাদের এখনই যে শিখতে হবে তা নাহ তাও হালকা ধারণা থাকা ভালো :-

এখন আমরা দেখবো Styled Component এর সাথে টেমপ্লেট স্ট্রিং কিভাবে ব্যাবহার হয় । Styled Component মূলত React.js এর একটা লাইব্রেরি যা কাস্টম স্টাইলসহ অনেক কাজেই ব্যাবহার হয় ।

Styled Component এ টেমপ্লেট স্ট্রিং ব্যাবহার করা হয় CSS লিখতে যেমন :-

const p = Styled.p`

font-size : 20px ; 
background-color: blue;
color: white 

উপরোক্ত ভাবে আমরা যেকোনো (div,h1-h6,span, button, section and etc) স্টাইল লিখতে পারি ।

টেমপ্লেট ট্যাগ এখনই আপনার বুঝতে হবে নাহ সময় হইলে এমনিই বুঝে যাবেন আপাতত ধারণা থাকলো একটু, কি মজা!

ধন্যবাদ সবাইকে । 

# template literals in es6

# template strings

# es6 template literals