JavaScript-এ স্ট্রিংয়ের ব্যবহার আগে সীমিত ছিল, Python বা Ruby-র মতো ল্যাঙ্গুয়েজ থেকে আসা ব্যবহারকারীরা যে ধরনের সুবিধা আশা করেন তা এতে পাওয়া যেত না। ES6 টেমপ্লেট স্ট্রিং (Chrome 41+ ভার্সনে উপলভ্য) এই বিষয়টি সম্পূর্ণভাবে পরিবর্তন করে দেয়। এগুলি ডোমেন-নির্দিষ্ট ভাষা (DSL) সহ স্ট্রিং সংজ্ঞায়িত করার একটি উপায় প্রবর্তন করে, যা আরও ভাল:
- স্ট্রিং ইন্টারপোলেশন
- এম্বেড করা এক্সপ্রেশন
- হ্যাক ছাড়াই একাধিক লাইন সহ স্ট্রিং
- স্ট্রিং ফর্ম্যাটিং
- নিরাপদ HTML এস্কেপিং, লোকালাইজেশন ও আরও অনেক কিছুর জন্য স্ট্রিং ট্যাগিং।
আজ আমরা যেভাবে String ব্যবহার করি, তার মধ্যে আরও একটি ফিচার যোগ করার পরিবর্তে, Template String এই সমস্যাগুলি সমাধান করার জন্য সম্পূর্ণ আলাদা একটি উপায় নিয়ে আসে।
সিন্ট্যাক্স
টেমপ্লেট স্ট্রিংয়ে ব্যাক-টিক (``) ব্যবহার করা হয়, সাধারণ স্ট্রিংয়ে আমরা অভ্যস্ত সিঙ্গেল বা ডবল কোট ব্যবহার করা হয় না। তাই, টেমপ্লেট স্ট্রিং নিম্নলিখিতভাবে লেখা যেতে পারে:
var greeting = `Yo World!`;
এখনও পর্যন্ত, টেমপ্লেট স্ট্রিং আমাদের সাধারণ স্ট্রিংয়ের থেকে বেশি কিছু দেয়নি। আসুন, এটি পরিবর্তন করি।
স্ট্রিং সাবস্টিটিউশন
তাদের প্রথম বাস্তব সুবিধাগুলির মধ্যে একটি হল স্ট্রিং সাবস্টিটিউশন। সাবস্টিটিউশন আমাদের যেকোনও সঠিক জাভাস্ক্রিপ্ট এক্সপ্রেশন (যেমন, ভেরিয়েবেল যোগ করা) নিতে দেয় এবং টেমপ্লেট লিটারেলের মধ্যে, ফলাফল একই স্ট্রিংয়ের অংশ হিসেবে আউটপুট করা হবে।
নিচে দেখানো উদাহরণ অনুযায়ী, টেমপ্লেট স্ট্রিংয়ে ${ } সিনট্যাক্স ব্যবহার করে স্ট্রিং সাবস্টিটিউশনের জন্য প্লেসহোল্ডার থাকতে পারে:
// Simple string substitution
var name = "Brendan";
console.log(`Yo, ${name}!`);
// => "Yo, Brendan!"
টেমপ্লেট স্ট্রিংয়ে সব স্ট্রিং সাবস্টিটিউশন হল JavaScript এক্সপ্রেশন, তাই আমরা ভেরিয়েবলের নামের চেয়ে অনেক বেশি কিছু সাবস্টিটিউট করতে পারি। যেমন, নিচে আমরা কিছু পাঠযোগ্য ইনলাইন গণিত এম্বেড করার জন্য এক্সপ্রেশন ইন্টারপোলেশন ব্যবহার করতে পারি:
var a = 10;
var b = 10;
console.log(`JavaScript first appeared ${a+b} years ago. Wow!`);
//=> JavaScript first appeared 20 years ago. Wow!
console.log(`The number of JS MVC frameworks is ${2 * (a + b)} and not ${10 * (a + b)}.`);
//=> The number of JS frameworks is 40 and not 200.
এছাড়াও, এগুলি এক্সপ্রেশনের মধ্যে ফাংশনের জন্য খুব উপযোগী:
function fn() { return "I am a result. Rarr"; }
console.log(`foo ${fn()} bar`);
//=> foo I am a result. Rarr bar.
${} যেকোনও ধরনের এক্সপ্রেশনের সাথে ভালোভাবে কাজ করে, এর মধ্যে মেম্বার এক্সপ্রেশন ও মেথড কল অন্তর্ভুক্ত:
var user = {name: 'Caitlin Potter'};
console.log(`Thanks for getting this into V8, ${user.name.toUpperCase()}.`);
// => "Thanks for getting this into V8, CAITLIN POTTER";
// And another example
var thing = 'template strings';
console.log(`Say hello to ${thing}.`);
// => Say hello to template strings
আপনার স্ট্রিংয়ের মধ্যে ব্যাকটিকের প্রয়োজন হলে, ব্যাকস্ল্যাশ \ ব্যবহার করে তা এড়িয়ে যাওয়া যেতে পারে, যেমন:
var greeting = `\`Yo\` World!`;
একাধিক লাইনের স্ট্রিং
জাভাস্ক্রিপ্টে মাল্টিলাইন স্ট্রিংয়ের জন্য কিছু সময়ের জন্য প্রয়োজনীয় হ্যাকি ওয়ার্কঅ্যারাউন্ড আছে। এগুলির বর্তমান সমাধানের জন্য স্ট্রিংগুলিকে হয় একটি লাইনে থাকতে হবে অথবা প্রতিটি নিউলাইনের আগে \ (ব্যাকস্ল্যাশ) ব্যবহার করে মাল্টিলাইন স্ট্রিংয়ে ভাগ করতে হবে। যেমন:
var greeting = "Yo \
World";
যদিও এটি বেশিরভাগ আধুনিক জাভাস্ক্রিপ্ট ইঞ্জিনে ভালভাবে কাজ করা উচিত, তবে আচরণটি এখনও কিছুটা হ্যাক। এছাড়াও, মাল্টিলাইন সাপোর্ট নকল করার জন্য স্ট্রিং কনক্যাটেনেশন ব্যবহার করা যেতে পারে, কিন্তু এটিও সমানভাবে কিছু অভাব রেখে যায়:
var greeting = "Yo " +
"World";
টেমপ্লেট স্ট্রিং একাধিক লাইন বিশিষ্ট স্ট্রিংকে অনেক সহজ করে দেয়। যেখানে প্রয়োজন সেখানে নিউলাইন যোগ করলেই হল। একটা উদাহরণ দেওয়া হল:
ব্যাকটিক সিনট্যাক্সের মধ্যে থাকা যেকোনও হোয়াইটস্পেসকেও স্ট্রিংয়ের অংশ হিসেবে বিবেচনা করা হবে।
console.log(`string text line 1
string text line 2`);
ট্যাগ করা টেমপ্লেট
এতক্ষণ আমরা স্ট্রিং সাবস্টিটিউশন ও মাল্টিলাইন স্ট্রিং তৈরি করার জন্য টেমপ্লেট স্ট্রিং ব্যবহার করার বিষয়টি দেখেছি। তারা আরেকটি শক্তিশালী ফিচার নিয়ে আসে, সেটি হল ট্যাগ করা টেমপ্লেট। ট্যাগ করা টেমপ্লেট, টেমপ্লেট স্ট্রিংয়ের আগে ফাংশনের নাম বসিয়ে টেমপ্লেট স্ট্রিংকে ট্রান্সফর্ম করে। যেমন:
fn`Hello ${you}! You're looking ${adjective} today!`
ট্যাগ করা টেমপ্লেট স্ট্রিংয়ের সিম্যান্টিক্স সাধারণ স্ট্রিংয়ের থেকে অনেক আলাদা হয়। মোটকথা, এগুলি হল বিশেষ ধরনের ফাংশন কল: উপরের "desugars" থেকে
fn(["Hello ", "! You're looking ", " today!"], you, adjective);
লক্ষ্য করুন যে (n + 1)তম আর্গুমেন্টটি স্ট্রিং অ্যারের nতম এবং (n + 1)তম এন্ট্রির মধ্যে হওয়া সাবস্টিটিউশনের সাথে সম্পর্কিত। এটি বিভিন্ন ধরনের কাজের জন্য সহায়ক হতে পারে, তবে সবচেয়ে সহজ হল কোনও ইন্টারপোলেটেড ভেরিয়েবল অটোমেটিক এস্কেপ করা।
যেমন, আপনি এমন একটি HTML-এস্কেপিং ফাংশন লিখতে পারেন যা..
html`<p title="${title}">Hello ${you}!</p>`
সঠিক ভেরিয়েবেল প্রতিস্থাপন করা একটি স্ট্রিং রিটার্ন করে, তবে সব HTML-এর জন্য নিরাপদ নয় এমন অক্ষর প্রতিস্থাপন করা হয়। আসুন, এটি করা যাক। আমাদের HTML-এ এস্কেপ করার ফাংশন দুটি আর্গুমেন্ট নেবে: একটি ইউজারনেম ও একটি কমেন্ট। দু'টিতেই HTML-এর জন্য অনুপযুক্ত অক্ষর (যেমন ', ", <, > এবং &) থাকতে পারে। যেমন, ব্যবহারকারীর নাম "Domenic Denicola" এবং কমেন্ট "& is a fun tag" হলে, আমাদের আউটপুট এমন হওয়া উচিত:
<b>Domenic Denicola says:</b> "& is a fun tag"
আমাদের ট্যাগ করা টেমপ্লেট সমাধানটি এইভাবে লেখা যেতে পারে:
// HTML Escape helper utility
var util = (function () {
// Thanks to Andrea Giammarchi
var
reEscape = /[&<>'"]/g,
reUnescape = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g,
oEscape = {
'&': '&',
'<': '<',
'>': '>',
"'": ''',
'"': '"'
},
oUnescape = {
'&': '&',
'&': '&',
'<': '<',
'<': '<',
'>': '>',
'>': '>',
''': "'",
''': "'",
'"': '"',
'"': '"'
},
fnEscape = function (m) {
return oEscape[m];
},
fnUnescape = function (m) {
return oUnescape[m];
},
replace = String.prototype.replace
;
return (Object.freeze || Object)({
escape: function escape(s) {
return replace.call(s, reEscape, fnEscape);
},
unescape: function unescape(s) {
return replace.call(s, reUnescape, fnUnescape);
}
});
}());
// Tagged template function
function html(pieces) {
var result = pieces[0];
var substitutions = [].slice.call(arguments, 1);
for (var i = 0; i < substitutions.length; ++i) {
result += util.escape(substitutions[i]) + pieces[i + 1];
}
return result;
}
var username = "Domenic Denicola";
var tag = "& is a fun tag";
console.log(html`<b>${username} says</b>: "${tag}"`);
//=> <b>Domenic Denicola says</b>: "& is a fun tag"
অন্যান্য সম্ভাব্য ব্যবহারের মধ্যে রয়েছে অটো-এস্কেপিং, ফর্ম্যাটিং, লোকালাইজেশন এবং সাধারণভাবে, আরও জটিল সাবস্টিটিউশন:
// Contextual auto-escaping
qsa`.${className}`;
safehtml`<a href="${url}?q=${query}" onclick="alert('${message}')" style="color: ${color}">${message}</a>`;
// Localization and formatting
l10n`Hello ${name}; you are visitor number ${visitor}:n! You have ${money}:c in your account!`
// Embedded HTML/XML
jsx`<a href="${url}">${text}</a>` // becomes React.DOM.a({ href: url }, text)
// DSLs for code execution
var childProcess = sh`ps ax | grep ${pid}`;
সারাংশ
টেমপ্লেট স্ট্রিং Chrome 41 beta+, IE Tech Preview, Firefox 35+ এবং io.js-এ আছে। ব্যবহারিক দিক থেকে বলতে গেলে, আপনি যদি আজ প্রোডাকশনে এগুলি ব্যবহার করতে চান, তাহলে Traceur এবং 6to5 সহ প্রধান ES6 ট্রান্সপাইলারগুলিতে এগুলি কাজ করে। আপনি যদি সেগুলি ব্যবহার করে দেখতে চান, তাহলে Chrome স্যাম্পেল রেপোতে আমাদের টেমপ্লেট স্ট্রিং স্যাম্পেল দেখুন। এছাড়াও, আপনি ES5-এ ES6 সমতুল্য সম্পর্কে আগ্রহী হতে পারেন, যা দেখায় যে কীভাবে আজ ES5 ব্যবহার করে কিছু সিনট্যাক্টিক সুগার টেমপ্লেট স্ট্রিং পাওয়া যায়।
টেমপ্লেট স্ট্রিং জাভাস্ক্রিপ্টে অনেক গুরুত্বপূর্ণ ক্ষমতা নিয়ে আসে। এর মধ্যে রয়েছে স্ট্রিং ও এক্সপ্রেশন ইন্টারপোলেশন, মাল্টিলাইন স্ট্রিং এবং নিজস্ব DSL তৈরি করার ক্ষমতা।
তাদের আনা সবচেয়ে গুরুত্বপূর্ণ ফিচারের মধ্যে একটি হল ট্যাগ করা টেমপ্লেট - এই ধরনের DSL লেখার জন্য এটি একটি গুরুত্বপূর্ণ ফিচার। সেগুলি টেমপ্লেট স্ট্রিংয়ের অংশগুলিকে আর্গুমেন্ট হিসেবে পায় এবং আপনি তারপরে স্ট্রিং ও সাবস্টিটিউশন কীভাবে ব্যবহার করবেন তা ঠিক করতে পারেন যাতে আপনার স্ট্রিংয়ের চূড়ান্ত আউটপুট নির্ধারণ করা যায়।