Template String ডিস্টিং ডিস্টিং
তুই স্ট্রিং জোড়া লাগাতে পারিস, জাস্ট প্লাস চিহ্ন দিয়ে এবং চাইলে দুইটা স্ট্রিংয়ের মাঝখানে হোয়াইট স্পেসসহ জোড়া দিতে পারস নিচের মতো করে—
const first = 'jaan';
const last = 'pakhi';
const name = first + ' ' + last + ' '+ 'potash potash';
console.log(name)
Output: jaan pakhi potash potashতবে কিছুদিন পরে বুঝতে পারবি, স্ট্রিংয়ের মধ্যে ভেরিয়েবল যোগ করতে গেলে অনেক প্যারা হয়। ধরে ধরে আলাদা আলাদাভাবে স্পেস যোগ করতে হয়। স্পেশাল ডাইনামিক ক্যালকুলেশন করা আরও ঝামেলার।
const a = 10;
const b = 20;
const result = 'The sum of ' + a + ' and ' + b + ' is ' + (a + b);
console.log(result);
Output: The sum of 10 and 20 is 30এই সমস্যাটাকে সহজ করার জন্য তোকে কি-বোর্ডের সাথে একটু পরিচিত হতে হবে। তোর কি-বোর্ডে ESC বাটনের নিচে একটা বাটন তুই দেখতে পাবি, সেটাকে বলা হয় backtick (`)। অর্থাৎ, এইরকম একটা সিম্বল তুই সেখানে দেখতে পাবি।
backtick দিয়েও তুই string ডিক্লেয়ার করতে পারবি, কিন্তু এইটার আরেকটা superpower আছে। সেই superpower হলো, তুই স্ট্রিংয়ের মধ্যে ভেরিয়েবলের মান সরাসরি ব্যবহার করতে পারবি।
১. সহজে ভেরিয়েবলের মান স্ট্রিং যোগ করা
নিচের দুইটা console log দেখলে বুঝতে পারবি। কীভাবে কনসোল লগে লেখা অনেক বেশি সহজ হয়ে গেছে। জাস্ট ব্যাকটিক দিয়ে স্ট্রিং শুরু করবি। তারপর মধ্যে ডলার চিহ্ন ($) দিয়ে সেকেন্ড ব্র্যাকেট ( { } ), এতে যেকোনো ভেরিয়েবল আর নাম লিখে ফেলতে পারবি। কোনো প্লাস চিহ্ন ইউজ করা লাগবে না। কী সহজ। কী মজা !
const name = "Rafiq";
const age = 30;
console.log("Name: " + name + ", Age: " + age);
console.log(`Name: ${name}, Age: ${age}`);
Output:
Name: Rafiq, Age: 30
Name: Rafiq, Age: 30২. এক্সপ্রেশন যোগ করা
ব্যাকটিক (`) দিয়ে স্ট্রিংয়ের মধ্যে যোগ-বিয়োগ, গুণ-ভাগ বা আরেকটু জটিল অঙ্ক করা যায়।
const a = 10;
const b = 20;
const math = `The sum of ${a} and ${b} is ${a + b}`;
console.log(math)
Output: The sum of 10 and 20 is 30৩. মাল্টি-লাইন স্ট্রিং
আরেকটা ব্যবহার হলো, তুই যখন single quotation দিয়ে কোনো বড় আর্টিকেল বা দুই-তিন লাইনের কিছু লিখতে যাবি, তখন তোকে \n ব্যবহার করে লাইন ব্রেক দিতে হবে। কিন্তু backtick দিয়ে সহজে multiline string লিখতে পারবি।
const email = `John Cena
cena naki ochena
mair khaile bachena`;এখানে \n ব্যবহার করার দরকার নাই। জাস্ট নরমালভাবে আলাদা আলাদা নতুন লাইনে লিখলেই কাজ হয়ে যায়।
৪. ফাংশন কল যোগ করা
অনেক সময় ফাংশনে কল করে তারপর সেটার আউটপুট একটা ভেরিয়েবলে রেখে সেটাকে দিয়ে কিছু করতে হয় বা কোনো স্টেটমেন্টে রাখতে হয়। এই কাজটা সহজেই স্ট্রিংয়ের মধ্যেই ফাংশনকেও কল করা যায় এবং ফাংশনের রিটার্ন যদি কোনো স্ট্রিং বা মান হয়, তাহলে সেটা সরাসরি স্ট্রিংয়ের মধ্যে বসে যাবে।
const getName = function(){
return "Nadia";
}
const message = `Na Bolle Sadia, ase amar ${getName()}!`;
console.log(message);
Output: Na Bolle Sadia, ase amar Nadia!৫. শর্ত যোগ করা
শর্টকাটে স্ট্রিংয়ের মধ্যে টার্নারি অপারেটর ইউজ করে শর্তসাপেক্ষে নতুন স্ট্রিং বা মান যোগ করা যায়।
const age = 20;
const status = `You are ${age >= 18 ? "Adult" : "Minor"}`;
console.log(status);
Output: You are Adult৬. স্ট্রিংয়ে অবজেক্ট প্রোপার্টি যোগ করা
অবজেক্ট থেকে সরাসরি কোনো প্রোপার্টির মান চাইলে ডাইরেক্ট যোগ করে ফেলা যায়।
const user = { name: "Tariq", age: 25 };
const info = `Name: ${user.name}, Age: ${user.age}`;
console.log(info);
Output: Name: Tariq, Age: 25৭. অ্যারের সাথে কাজ করা
স্ট্রিংয়ে সরাসরি array-এর কোনো ভ্যালু ব্যবহার করা যায়। আবার স্ট্রিং উপাদানওয়ালা একটা array-এর সব উপাদান join করে বড় স্ট্রিং বানিয়ে ব্যবহার করা যায়।
const fruits = ["Apple", "Banana", "Mango"];
const second= `My second favorite fruit is: ${fruits[1]}.`;
const list = `My favorite fruits are: ${fruits.join(", ")}.`;
console.log(list);
Output: My favorite fruits are: Apple, Banana, Mango.৮. টেমপ্লেট স্ট্রিংয়ের মাধ্যমে HTML টেমপ্লেট তৈরি করা
ডাইনামিক HTML তৈরি করার জন্য টেমপ্লেট স্ট্রিং খুবই পাওয়ারফুল একটা জিনিস।
const title = "Welcome";
const body = "This is a dynamic template.";
const html = `<div>
<h1>${title}</h1>
<p>${body}</p>
</div>`;
console.log(html);৯. স্ট্রিংয়ের মধ্যে হিসাবের জন্য ব্যবহার
মাঝেমধ্যে দরকার পড়লে টেমপ্লেট স্ট্রিংয়ের মধ্যে ছোটখাটো হিসাব করে সেটার ফল সরাসরি আউটপুট হিসেবে দেখানো যায়।
const radius = 5;
const area = `Circle area is ${Math.PI * radius ** 2}.`;
console.log(area);
Output: Circle area is 78.53981633974483.১০. যেখানে-সেখানে মিক্সড স্ট্রিং
ফাংশন থেকে স্ট্রিংওয়ালা কোনো ভ্যালু (সেটা আরেকটা স্ট্রিং হোক বা আরেকটা সংখ্যাওয়ালা ভেরিয়েবল হোক) সেটাকে রিটার্ন করা বা অন্য কোনো সিমিলার কাজ করা অনেক সহজ হয়ে গেছে।
const greet = function(name) {
return `Hello, ${name}`;
};
console.log(greet("Nadia"));
Output: Hello, NadiaPractice:
- টেমপ্লেট স্ট্রিংয়ের মাধ্যমে দুটি সংখ্যার বিয়োগফল দেখা। যেমন: The difference between 100 and 20 is 80।
- একটি অবজেক্ট employee তৈরি কর, যেখানে name, age এবং salary থাকবে। টেমপ্লেট স্ট্রিং দিয়ে তার নাম, বয়স এবং স্যালারি দেখা।
- fruits নামে একটি অ্যারে তৈরি কর। টেমপ্লেট স্ট্রিং ব্যবহার করে দেখা যে, তোর পছন্দের তৃতীয় ফলটি কী।
- const a = 50 এবং const b = 10 থাকলে টেমপ্লেট স্ট্রিং দিয়ে দেখা The division of a and b is 5।
- const person = { firstName: "Amit", lastName: "Kumar" }; টেমপ্লেট স্ট্রিং ব্যবহার করে দেখা Full Name: Amit Kumar।
- একটি অ্যারে animals = ["Cat", "Dog", "Elephant"] তৈরি কর এবং টেমপ্লেট স্ট্রিং ব্যবহার করে দেখা My favorite animals are Cat, Dog, Elephant।
- তোর কাছে স্টুডেন্ট নামে একটা অবজেক্ট আছে, সেই স্ট্রিংয়ের মধ্যে তার নাম আছে, তার বয়স আছে এবং তার তিনটা সাবজেক্টের মার্কস দেয়া আছে results নামক একটা প্রোপার্টির মধ্যে। যেটার মান একটা অ্যারে। এখন তোর কাজ হবে একটা টেমপ্লেট স্ট্রিং দিয়ে একটা স্ট্রিংয়ের মধ্যে এই স্টুডেন্টের নাম, তার তিনটা সাবজেক্টের রেজাল্টের গড় দেখানো। গড় দেখানোর জন্য তিনটা সাবজেক্টের মান যোগ করে তিন দিয়ে ভাগ করবি।