এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

ES6 টেমপ্লেট স্ট্রিং দিয়ে আক্ষরিক পাওয়া

Addy Osmani

জাভাস্ক্রিপ্টের স্ট্রিংগুলি ঐতিহাসিকভাবে সীমিত, পাইথন বা রুবির মতো ভাষা থেকে আসা আশা করতে পারে এমন ক্ষমতার অভাব রয়েছে। ES6 টেমপ্লেট স্ট্রিংস (Chrome 41+ এ উপলব্ধ), মৌলিকভাবে এটি পরিবর্তন করুন। তারা ডোমেন-নির্দিষ্ট ভাষাগুলির (DSLs) সাথে স্ট্রিংগুলিকে সংজ্ঞায়িত করার একটি উপায় প্রবর্তন করে, যা আরও ভাল করে:

স্ট্রিং ইন্টারপোলেশন
এমবেডেড এক্সপ্রেশন
হ্যাক ছাড়া মাল্টিলাইন স্ট্রিং
স্ট্রিং বিন্যাস
নিরাপদ HTML এস্কেপিং, স্থানীয়করণ এবং আরও অনেক কিছুর জন্য স্ট্রিং ট্যাগিং।

স্ট্রিং-এ অন্য একটি বৈশিষ্ট্য ঢেলে দেওয়ার পরিবর্তে, যেমনটি আমরা আজকে জানি, টেমপ্লেট স্ট্রিংগুলি এই সমস্যাগুলি সমাধানের সম্পূর্ণ ভিন্ন উপায় প্রবর্তন করে।

সিনট্যাক্স

টেমপ্লেট স্ট্রিংগুলি একক বা ডবল উদ্ধৃতিগুলির পরিবর্তে ব্যাক-টিক্স ( `` ) ব্যবহার করে যা আমরা নিয়মিত স্ট্রিংয়ের সাথে ব্যবহার করি। একটি টেমপ্লেট স্ট্রিং এইভাবে নিম্নরূপ লেখা যেতে পারে:

var greeting = `Yo World!`;

এখন পর্যন্ত, টেমপ্লেট স্ট্রিং আমাদের সাধারণ স্ট্রিংগুলির চেয়ে বেশি কিছু দেয়নি। এর পরিবর্তন করা যাক.

স্ট্রিং প্রতিস্থাপন

তাদের প্রথম বাস্তব সুবিধাগুলির মধ্যে একটি হল স্ট্রিং প্রতিস্থাপন। প্রতিস্থাপন আমাদেরকে যেকোন বৈধ জাভাস্ক্রিপ্ট এক্সপ্রেশন (বলা, ভেরিয়েবলের সংযোজন সহ) এবং একটি টেমপ্লেট লিটারালের ভিতরে নিতে দেয়, ফলাফলটি একই স্ট্রিংয়ের অংশ হিসাবে আউটপুট হবে।

টেমপ্লেট স্ট্রিংগুলিতে ${ } সিনট্যাক্স ব্যবহার করে স্ট্রিং প্রতিস্থাপনের জন্য স্থানধারক থাকতে পারে, যেমনটি নীচে প্রদর্শিত হয়েছে:

// Simple string substitution
var name = "Brendan";
console.log(`Yo, ${name}!`);

// => "Yo, Brendan!"

যেহেতু টেমপ্লেট স্ট্রিং-এর সমস্ত স্ট্রিং প্রতিস্থাপন জাভাস্ক্রিপ্ট এক্সপ্রেশন, তাই আমরা পরিবর্তনশীল নামের চেয়ে অনেক বেশি প্রতিস্থাপন করতে পারি। উদাহরণস্বরূপ, নীচে আমরা কিছু পাঠযোগ্য ইনলাইন গণিতের জন্য এম্বেড করতে এক্সপ্রেশন ইন্টারপোলেশন ব্যবহার করতে পারি:

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);

স্ট্রিং অ্যারেতে nth এবং (n + 1)th এন্ট্রির মধ্যে সংঘটিত প্রতিস্থাপনের সাথে কীভাবে (n + 1) তম যুক্তিটি সঙ্গতিপূর্ণ তা লক্ষ্য করুন। এটি সব ধরণের জিনিসের জন্য উপযোগী হতে পারে, কিন্তু সবচেয়ে সহজবোধ্য হল যেকোন ইন্টারপোলেটেড ভেরিয়েবলের স্বয়ংক্রিয়ভাবে পালানো।

উদাহরণস্বরূপ, আপনি একটি এইচটিএমএল-এসকেপিং ফাংশন লিখতে পারেন যেমন ..

html`<p title="${title}">Hello ${you}!</p>`

প্রতিস্থাপিত উপযুক্ত ভেরিয়েবল সহ একটি স্ট্রিং প্রদান করে, কিন্তু সমস্ত HTML-অনিরাপদ অক্ষর প্রতিস্থাপিত হয়। এটা করা যাক. আমাদের HTML-এস্কেপিং ফাংশন দুটি আর্গুমেন্ট নেবে: একটি ব্যবহারকারীর নাম এবং একটি মন্তব্য৷ উভয়টিতেই এইচটিএমএল অনিরাপদ অক্ষর থাকতে পারে (যেমন ', ", <, >, এবং &)। উদাহরণস্বরূপ, যদি ব্যবহারকারীর নাম "ডোমেনিক ডেনিকোলা" হয় এবং মন্তব্যটি "এবং একটি মজার ট্যাগ" হয়, তাহলে আমাদের আউটপুট করা উচিত:

<b>Domenic Denicola says:</b> "&amp; 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 = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        "'": '&#39;',
        '"': '&quot;'
    },
    oUnescape = {
        '&amp;': '&',
        '&#38;': '&',
        '&lt;': '<',
        '&#60;': '<',
        '&gt;': '>',
        '&#62;': '>',
        '&apos;': "'",
        '&#39;': "'",
        '&quot;': '"',
        '&#34;': '"'
    },
    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>: "&amp; 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 বিটা+, IE টেক প্রিভিউ, ফায়ারফক্স 35+ এবং io.js-এ রয়েছে। কার্যত বলতে গেলে আপনি যদি আজকে উৎপাদনে ব্যবহার করতে চান, তারা ট্রেসার এবং 6to5 সহ প্রধান ES6 ট্রান্সপিলারগুলিতে সমর্থিত। Chrome নমুনা রেপোতে আমাদের টেমপ্লেট স্ট্রিং নমুনা দেখুন যদি আপনি সেগুলি ব্যবহার করে দেখতে চান। আপনি ES5-এ ES6 সমতুল্য নিয়েও আগ্রহী হতে পারেন, যা প্রদর্শন করে যে কীভাবে ES5 ব্যবহার করে কিছু চিনিযুক্ত টেমপ্লেট স্ট্রিংগুলি অর্জন করা যায়।

টেমপ্লেট স্ট্রিং জাভাস্ক্রিপ্টে অনেক গুরুত্বপূর্ণ ক্ষমতা নিয়ে আসে। এর মধ্যে রয়েছে স্ট্রিং এবং এক্সপ্রেশন ইন্টারপোলেশন, মাল্টিলাইন স্ট্রিং এবং আপনার নিজস্ব ডিএসএল তৈরি করার আরও ভাল উপায়।

ট্যাগ করা টেমপ্লেটগুলি তারা নিয়ে আসে সবচেয়ে উল্লেখযোগ্য বৈশিষ্ট্যগুলির মধ্যে একটি - এই ধরনের DSL লেখার জন্য একটি গুরুত্বপূর্ণ বৈশিষ্ট্য। তারা আর্গুমেন্ট হিসাবে একটি টেমপ্লেট স্ট্রিং এর অংশগুলি গ্রহণ করে এবং তারপর আপনি সিদ্ধান্ত নিতে পারেন কিভাবে আপনার স্ট্রিং এর চূড়ান্ত আউটপুট নির্ধারণ করতে স্ট্রিং এবং প্রতিস্থাপন ব্যবহার করবেন।

আরও পড়া

Addy Osmani

স্ট্রিং ইন্টারপোলেশন
এমবেডেড এক্সপ্রেশন
হ্যাক ছাড়া মাল্টিলাইন স্ট্রিং
স্ট্রিং বিন্যাস
নিরাপদ HTML এস্কেপিং, স্থানীয়করণ এবং আরও অনেক কিছুর জন্য স্ট্রিং ট্যাগিং।

সিনট্যাক্স

var greeting = `Yo World!`;

স্ট্রিং প্রতিস্থাপন

// Simple string substitution
var name = "Brendan";
console.log(`Yo, ${name}!`);

// => "Yo, Brendan!"

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!`

fn(["Hello ", "! You're looking ", " today!"], you, adjective);

উদাহরণস্বরূপ, আপনি একটি এইচটিএমএল-এসকেপিং ফাংশন লিখতে পারেন যেমন ..

html`<p title="${title}">Hello ${you}!</p>`

<b>Domenic Denicola says:</b> "&amp; 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 = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        "'": '&#39;',
        '"': '&quot;'
    },
    oUnescape = {
        '&amp;': '&',
        '&#38;': '&',
        '&lt;': '<',
        '&#60;': '<',
        '&gt;': '>',
        '&#62;': '>',
        '&apos;': "'",
        '&#39;': "'",
        '&quot;': '"',
        '&#34;': '"'
    },
    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>: "&amp; 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}`;

সারাংশ

আরও পড়া

Addy Osmani

স্ট্রিং ইন্টারপোলেশন
এমবেডেড এক্সপ্রেশন
হ্যাক ছাড়া মাল্টিলাইন স্ট্রিং
স্ট্রিং বিন্যাস
নিরাপদ HTML এস্কেপিং, স্থানীয়করণ এবং আরও অনেক কিছুর জন্য স্ট্রিং ট্যাগিং।

সিনট্যাক্স

var greeting = `Yo World!`;

স্ট্রিং প্রতিস্থাপন

// Simple string substitution
var name = "Brendan";
console.log(`Yo, ${name}!`);

// => "Yo, Brendan!"

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!`

fn(["Hello ", "! You're looking ", " today!"], you, adjective);

উদাহরণস্বরূপ, আপনি একটি এইচটিএমএল-এসকেপিং ফাংশন লিখতে পারেন যেমন ..

html`<p title="${title}">Hello ${you}!</p>`

<b>Domenic Denicola says:</b> "&amp; 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 = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        "'": '&#39;',
        '"': '&quot;'
    },
    oUnescape = {
        '&amp;': '&',
        '&#38;': '&',
        '&lt;': '<',
        '&#60;': '<',
        '&gt;': '>',
        '&#62;': '>',
        '&apos;': "'",
        '&#39;': "'",
        '&quot;': '"',
        '&#34;': '"'
    },
    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>: "&amp; 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}`;