ES6`ডিলিমিটার হিসাবে ব্যাক-টিক ব্যবহার করে একটি নতুন ধরণের স্ট্রিং আক্ষরিক উপস্থিত হয় । এই লিটারালগুলি বেসিক স্ট্রিং ইন্টারপোলেশন এক্সপ্রেশনগুলি এম্বেড করার অনুমতি দেয় যা পরে স্বয়ংক্রিয়ভাবে পার্স এবং মূল্যায়ন করা হয়।
let actor = {name: 'RajiniKanth', age: 68};
let oldWayStr = "<p>My name is " + actor.name + ",</p>\n" +
"<p>I am " + actor.age + " old</p>\n";
let newWayHtmlStr =
`<p>My name is ${actor.name},</p>
<p>I am ${actor.age} old</p>`;
console.log(oldWayStr);
console.log(newWayHtmlStr);
আপনি দেখতে পাচ্ছেন যে, আমরা কয়েকটি অক্ষরের চারপাশে ..`` ব্যবহার করেছি, যা স্ট্রিং আক্ষরিক হিসাবে ব্যাখ্যা করা হয়, তবে ফর্মটির কোনও অভিব্যক্তি ${..}পার্স এবং তাত্ক্ষণিকভাবে ইনলাইনে মূল্যায়ন করা হয়।
আন্তঃবিবাহিত স্ট্রিং আক্ষরিকাগুলির একটি দুর্দান্ত সুবিধা হ'ল এগুলি একাধিক লাইনে বিভক্ত হওয়ার অনুমতি রয়েছে:
var Actor = {"name" : "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log( text );
আন্তঃবিবাহিত এক্সপ্রেশন
কোনও বৈধ এক্সপ্রেশন ফাংশন কল, ইনলাইন ফাংশন এক্সপ্রেশন কল এবং আরও অন্যান্য সহ ${..}একটি ইন্টারপোল্টেড স্ট্রিংয়ের ভিতরে উপস্থিত হওয়ার অনুমতি lit‐ eralরয়েছে interpo‐ lated string literals!
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper( "warm" )} welcome
to all of you ${upper( `${who}s` )}!`;
console.log( text );
এখানে "s"কারা + "s" এর বিপরীতে স্ট্রিংয়ের সাথে হু ভেরিয়েবলের সংমিশ্রণ করার সময় অভ্যন্তরীণ {{কে `` s`` ইন্টারপোল্টেড স্ট্রিং আক্ষরিক আমাদের জন্য কিছুটা সুন্দর সুবিধা ছিল । এছাড়াও একটি নোট রাখার একটি ইন্টারপোলেট স্ট্রিং আক্ষরিক শুধু হয় lexically scopedযেখানে এটি প্রদর্শিত হবে, না dynamically scopedঅন্য কোন উপায়ে
function foo(str) {
var name = "foo";
console.log( str );
}
function bar() {
var name = "bar";
foo( `Hello from ${name}!` );
}
var name = "global";
bar();
ব্যবহার template literalHTML- এর জন্য স্পষ্টভাবে আরো পাঠযোগ্য বিরক্তি হ্রাস করা।
সরল পুরানো উপায়:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
সাথে ES6:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- আপনার স্ট্রিং একাধিক লাইন বিস্তৃত করতে পারে।
- আপনার উদ্ধৃতি অক্ষরগুলি এড়ানোর দরকার নেই।
- আপনি যেমন গ্রুপিং এড়াতে পারেন: '">'
- আপনাকে প্লাস অপারেটর ব্যবহার করতে হবে না।
ট্যাগযুক্ত টেম্পলেট লিটারালস
আমরা একটি templateস্ট্রিং ট্যাগও করতে পারি , যখন একটি templateস্ট্রিং ট্যাগ করা হয়, literalsএবং বিকল্পগুলি ফাংশনে পাস করা হয় যা ফলাফলকে মান দেয়।
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`;
function myTaggedLiteral(strings,value,value2) {
console.log(strings,value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
আমরা spreadএকাধিক মান পাস করতে এখানে অপারেটরটি ব্যবহার করতে পারি । প্রথম যুক্তি - আমরা একে স্ট্রিং বলেছিলাম - এটি সমস্ত প্লেইন স্ট্রিংগুলির একটি অ্যারে (কোনও বিভাজনযুক্ত এক্সপ্রেশনগুলির মধ্যে স্টাফ)।
আমরা তারপরে সমস্ত আর্গুমেন্টগুলি একটি অ্যারেতে ব্যবহার করে মানগুলি ব্যবহার করি ... gather/rest operator, যদিও আপনি অবশ্যই তাদের উপরের মতো স্ট্রিং প্যারামিটার অনুসরণ করে স্বতন্ত্র নামের প্যারামিটার হিসাবে রেখে যেতে পারেন (value1, value2 etc)।
function myTaggedLiteral(strings,...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
argument(s)ইতিমধ্যে মূল্যায়ন ক্ষেপক স্ট্রিং আক্ষরিক পাওয়া এক্সপ্রেশন ফলাফল আমাদের মান অ্যারের মধ্যে জড়ো হয়। এ tagged string literalইন্টারপোলেশনগুলি মূল্যায়ন করার পরে প্রক্রিয়াজাতকরণের মতো তবে চূড়ান্ত স্ট্রিংয়ের মান সংকলন করার আগে আপনাকে আক্ষরিক থেকে স্ট্রিং তৈরির উপর আরও নিয়ন্ত্রণের সুযোগ দেয়। আসুন একটি তৈরির উদাহরণ দেখুন re-usable templates।
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
কাঁচা স্ট্রিংস
আমাদের ট্যাগ ফাংশনগুলি একটি প্রথম যুক্তি পায় stringsযা আমরা বলেছিলাম যা একটি array। তবে এতে অতিরিক্ত পরিমাণে ডেটা অন্তর্ভুক্ত রয়েছে: সমস্ত স্ট্রিংয়ের কাঁচা অপ্রয়োজনীয় সংস্করণ। আপনি .rawসম্পত্তি ব্যবহার করে এই কাঁচা স্ট্রিংয়ের মানগুলি অ্যাক্সেস করতে পারেন :
function showraw(strings, ...values) {
console.log( strings );
console.log( strings.raw );
}
showraw`Hello\nWorld`;
যেমন আপনি দেখতে পাচ্ছেন, rawস্ট্রিংয়ের সংস্করণটি পালানো sequ n ক্রম সংরক্ষণ করে, অন্যদিকে স্ট্রিংয়ের প্রসেসড সংস্করণটি একটি অবিরত আসল নতুন লাইনের মতো আচরণ করে। ES6একটি বিল্ট-ইন ফাংশন যা একটি স্ট্রিং আক্ষরিক ট্যাগ হিসেবে ব্যবহার করা যাবে সাথে আসে: String.raw(..)। এটি কেবলমাত্র এর কাঁচা সংস্করণগুলির মধ্য দিয়ে যায় strings:
console.log( `Hello\nWorld` );
console.log( String.raw`Hello\nWorld` );