টেমপ্লেট লিটারেল(Template Literal) ইন জাভাস্ক্রিপ্ট ইএস৬(ES6)
জাভাস্ক্রিপ্ট ইএস ৬(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) স্টাইল লিখতে পারি । টেমপ্লেট ট্যাগ এখনই আপনার বুঝতে হবে নাহ সময় হইলে এমনিই বুঝে যাবেন আপাতত ধারণা থাকলো একটু, কি মজা!
ধন্যবাদ সবাইকে ।