Tagged Template Literals ES6 (ECMAScript 2015) এর একটি শক্তিশালী ফিচার যা template literals এর সাথে একটি ফাংশন যুক্ত করতে সক্ষম। এর মাধ্যমে, আপনি একটি template literal এর মান প্রসেস করতে পারেন, যেমন স্ট্রিং ফরম্যাটিং বা ডাইনামিক ডেটা প্রক্রিয়া করা। সাধারণভাবে, template literals স্ট্রিং ইন্টারপোলেশন (string interpolation) বা মাল্টিলাইন স্ট্রিং তৈরিতে ব্যবহৃত হয়, তবে tagged templates এর মাধ্যমে এগুলির সাথে আরও কাস্টম লজিক বা প্রক্রিয়া প্রয়োগ করা সম্ভব হয়।
Tagged Template Literals এর সিনট্যাক্স
Tagged Template Literals এর সিনট্যাক্স কিছুটা এরকম:
function tagFunction(strings, ...values) {
// strings: template literal এর স্ট্যাটিক অংশ
// values: template literal এর ডাইনামিক অংশ
}
const result = tagFunction`Hello, ${name}! You have ${count} new messages.`;
এখানে tagFunction হল একটি tagged template ফাংশন যা template literal এর স্ট্যাটিক অংশ এবং ডাইনামিক অংশগুলিকে আলাদা করে প্রক্রিয়া করতে সক্ষম।
Tagged Template Literals এর কাজ কীভাবে করে?
Tagged template literals দুটি অংশে বিভক্ত:
- স্ট্যাটিক অংশ (Static Parts): টেমপ্লেট লিটারালের সেই অংশ যেগুলি পরিবর্তনশীল নয়, বা যেগুলির মধ্যে কোনো ভেরিয়েবল ব্যবহার করা হয়নি।
- ডাইনামিক অংশ (Dynamic Parts): টেমপ্লেট লিটারালের সেই অংশ যেখানে এক বা একাধিক ভেরিয়েবল বা এক্সপ্রেশন ব্যবহার করা হয়।
Tagged template function এই দুটি অংশ গ্রহণ করে এবং তাদের উপর কাস্টম লজিক প্রয়োগ করতে পারে।
Tagged Template Function উদাহরণ
ধরা যাক, আমাদের একটি টেমপ্লেট লিটারাল আছে এবং আমরা চাই টেমপ্লেটের ডাইনামিক অংশগুলোর সাথে কিছু বিশেষ প্রসেসিং বা কাস্টম ফর্ম্যাটিং করতে। নিচে একটি উদাহরণ দেওয়া হলো:
function highlight(strings, ...values) {
let result = strings[0];
values.forEach((value, index) => {
result += `<b>${value}</b>${strings[index + 1]}`;
});
return result;
}
const name = "John";
const age = 30;
const message = highlight`Hello, my name is ${name} and I am ${age} years old.`;
console.log(message);
// "Hello, my name is <b>John</b> and I am <b>30</b> years old."
এখানে, highlight ফাংশন tagged template function হিসেবে কাজ করছে। এটি টেমপ্লেট লিটারালকে প্রসেস করে ডাইনামিক অংশগুলিকে <b> ট্যাগ দিয়ে বোল্ড করে ফেরত দেয়।
Tagged Template Literals এর ব্যবহার
Tagged Template Literals এর মাধ্যমে আপনি অনেক ধরনের কাস্টম প্রক্রিয়া করতে পারেন, যেমন:
- স্ট্রিং ফরম্যাটিং: আপনি টেমপ্লেট লিটারালস ব্যবহার করে স্ট্রিং কাস্টম ফরম্যাটে রিটার্ন করতে পারেন।
- অথেনটিকেশন বা সিকিউরিটি: যদি টেমপ্লেটে ইনপুট ভ্যালু থাকে, তবে আপনি ইনপুট ভ্যালুগুলি স্যানিটাইজ করে SQL ইনজেকশন বা XSS (Cross-Site Scripting) এর মতো আক্রমণ থেকে রক্ষা করতে পারেন।
- অনুবাদ (Translation): অ্যাপ্লিকেশনের বিভিন্ন ভাষায় স্ট্রিং অনুবাদ করার জন্য tagged templates ব্যবহার করা যেতে পারে।
আরেকটি উদাহরণ: Tagged Template with SQL Injection Protection
ধরা যাক, আমরা একটি SQL কুয়েরি তৈরি করছি এবং চাই যে ইউজারের ইনপুটকে স্যানিটাইজ করতে:
function sql(strings, ...values) {
let query = strings[0];
values.forEach((value, index) => {
query += `'${value.replace(/'/g, "''")}'${strings[index + 1]}`;
});
return query;
}
const userInput = "O'Reilly";
const query = sql`SELECT * FROM users WHERE name = ${userInput}`;
console.log(query);
// "SELECT * FROM users WHERE name = 'O''Reilly'"
এখানে, sql tagged function ব্যবহার করা হয়েছে, যা ইউজারের ইনপুট স্যানিটাইজ করে SQL ইনজেকশন থেকে রক্ষা করছে।
Tagged Template Literals এর সুবিধা
- কাস্টম প্রসেসিং: আপনি টেমপ্লেট লিটারালের স্ট্যাটিক ও ডাইনামিক অংশগুলোর উপর কাস্টম প্রক্রিয়া প্রয়োগ করতে পারেন।
- সিকিউরিটি: ইউজারের ইনপুট স্যানিটাইজ করে বিভিন্ন নিরাপত্তা সমস্যা যেমন SQL ইনজেকশন, XSS আক্রমণ প্রতিরোধ করা যায়।
- বহুমুখী ব্যবহার: স্ট্রিং ফরম্যাটিং, লজিক্যাল প্রসেসিং, এবং অন্য অনেক কাস্টম প্রয়োগ Tagged Template এর মাধ্যমে সহজেই করা সম্ভব।
সারাংশ
Tagged Template Literals ES6 এর একটি শক্তিশালী ফিচার যা স্ট্রিং লিটারালগুলোর সাথে একটি ফাংশন যুক্ত করে, এবং এটি কাস্টম লজিক প্রয়োগ করতে সাহায্য করে। এটি কোডকে আরও শক্তিশালী ও ফ্লেক্সিবল করে তোলে এবং বিভিন্ন ধরনের ডেটা প্রসেসিং বা নিরাপত্তা উন্নতির জন্য ব্যবহৃত হতে পারে।
