জাভাস্ক্রিপ্টে ব্যাকটিক অক্ষরের ব্যবহার (`)


276

জাভাস্ক্রিপ্টে, একটি ব্যাকটিক একক উদ্ধৃতি হিসাবে একই কাজ করে বলে মনে হচ্ছে। উদাহরণস্বরূপ, আমি এই জাতীয় স্ট্রিং সংজ্ঞায়িত করতে ব্যাকটিক ব্যবহার করতে পারি:

var s = `abc`;

এমন কোনও উপায় আছে যেখানে ব্যাকটিকের আচরণটি একটি একক উক্তির চেয়ে আলাদা?


† নোট যাতে প্রোগ্রামারদের মধ্যে, "ব্যাকটিক" কি আরো সাধারণভাবে বলা হয় এক নাম গ্রেভ অ্যাকসেন্ট । প্রোগ্রামাররা মাঝে মাঝে বিকল্প নাম "ব্যাককোটি" এবং "ব্যাকগ্রাভ" ব্যবহার করে। এছাড়াও, স্ট্যাক ওভারফ্লো এবং অন্য কোথাও, "ব্যাকটিক" এর জন্য অন্যান্য সাধারণ বানানগুলি হ'ল "ব্যাক-টিক" এবং "ব্যাক টিক"।


এছাড়াও ট্যাগযুক্ত টেমপ্লেট ব্যবহারের জন্য নীচে পড়ুন। প্রশ্নটি জিজ্ঞাসা করা হওয়ার চেয়ে এটি আলাদা ব্যবহার। বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েব / জাভা স্ক্রিপ্ট / রেফারেন্স / …এটি নীচের দীর্ঘতর উত্তরের একটিতে ব্যাখ্যা করা হয়েছে। stackoverflow.com/a/40062505/3281336
PatS

1
"ব্যাকগ্রাভ" হাস্যকর, কারণ সেখানে কোনও ফরোয়ার্ড গুরুতর উচ্চারণ নেই - এটিকে তীব্র উচ্চারণ বলা হয়
ওয়াল্টার ট্রস

উত্তর:


296

এটি টেমপ্লেট আক্ষরিক বলে একটি বৈশিষ্ট্য ।

ECMAScript 2015 নির্দিষ্টকরণের পূর্ববর্তী সংস্করণগুলিতে তাদের "টেম্পলেট স্ট্রিং" বলা হত।

টেমপ্লেট লিটারালগুলি ফায়ারফক্স 34, ক্রোম 41, এবং এজ 12 এবং এর বেশি দ্বারা সমর্থিত তবে ইন্টারনেট এক্সপ্লোরার দ্বারা নয়।

টেম্পলেট লিটারালগুলি মাল্টি-লাইন স্ট্রিংগুলি উপস্থাপন করতে ব্যবহার করা যেতে পারে এবং ভেরিয়েবলগুলি সন্নিবেশ করতে "ইন্টারপোলেশন" ব্যবহার করতে পারে:

var a = 123, str = `---
   a is: ${a}
---`;
console.log(str);

আউটপুট:

---
   a is: 123
---

এর চেয়ে গুরুত্বপূর্ণ কী, এগুলিতে কেবলমাত্র একটি চলক নাম নয়, তবে কোনও জাভাস্ক্রিপ্ট এক্সপ্রেশন থাকতে পারে:

var a = 3, b = 3.1415;

console.log(`PI is nearly ${Math.max(a, b)}`);

2
এর জন্য কোনও সমর্থনযোগ্য পলফিল কি এর সমর্থন নেই?
আলেকজান্ডার ডিকসন

3
@AlexanderDixon, না তুমি শাস্ত্রীয় অর্থে এই ভাষা বৈশিষ্ট্য polyfill করতে পারবেন না, আপনার কাছ থেকে টেম্পলেট ব্যবহার হতে পারে যদিও আন্ডারস্কোর বা lodash অ্যারে ব্যবহার স্ট্রিং multilining সঙ্গে একযোগে স্ট্রিং ভেরিয়েবল জন্য: ["a", "b"].join(""); // both string elements written in new lines। কিন্তু পৃথক্ এই এক একটি "transpiler" ব্যবহার হতে পারে মত থেকে হট্টগোল ES5 করার ES6 + + রূপান্তর করতে
চেষ্টা-ক্যাচ-পরিশেষে

2
ব্যাকটিক্স ব্যবহার করে টেমপ্লেট আক্ষরিক ট্যাগ ! এই বৈধ এবং ভাল কাজ করে: alert`1`
Ван

এম ইউ এজেন্সি সহ সমস্ত বড় ব্রাউজারের দ্বারা ইউনিউনপি সমর্থিত: কঙ্গাকস.স.থিতু.বি
জনাথন ক্রস

2
@ কিকি দেখে মনে হচ্ছে স্ক্রিপ্টের ভাষা ECMAScript এর বৈকল্পিক। গুগল অ্যাপ স্ক্রিপ্টগুলি স্পষ্টতই ECMAScript 2015 বৈশিষ্ট্যগুলি সমর্থন করে না। তারা কোন ভাষা ব্যবহার করছে তা আমি কোনও অফিসিয়াল স্পেসিফিকেশন খুঁজে পাইনি।
চেষ্টা করুন-শেষ পর্যন্ত

162

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

let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };

let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
  "<p>I am " + person.age + " old</p>\n" +
  "<strong>\"" + person.greeting + "\" is what I usually say</strong>";

let newHtmlStr =
 `<p>My name is ${person.name},</p>
  <p>I am ${person.age} old</p>
  <p>"${person.greeting}" is what I usually say</strong>`;

console.log(usualHtmlStr);
console.log(newHtmlStr);

আপনি দেখতে পাচ্ছেন, আমরা `চারপাশে প্রায় কয়েকটি অক্ষর ব্যবহার করেছি, যা স্ট্রিং আক্ষরিক হিসাবে ব্যাখ্যা করা হয়, তবে ফর্মটির কোনও অভিব্যক্তি ${..}পার্স করা এবং তাত্ক্ষণিকভাবে ইনলাইনে মূল্যায়ন করা হয়।

আন্তঃবিবাহিত স্ট্রিং আক্ষরিকাগুলির একটি দুর্দান্ত সুবিধা হ'ল এগুলি একাধিক লাইনে বিভক্ত হওয়ার অনুমতি রয়েছে:

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);
// Now is the time for all good men
// to come to the aid of their
// country!

আন্তঃবিবাহিত এক্সপ্রেশন

কোনও বৈধ অভিব্যক্তিটি ${..}ফাংশন কল, ইনলাইন ফাংশন এক্সপ্রেশন কল এবং এমনকি অন্যান্য ইন্টারপোল্টেড স্ট্রিং আক্ষরিকাসহ একটি ইন্টারপোল্টেড স্ট্রিং আক্ষরিক অভ্যন্তরে উপস্থিত হওয়ার অনুমতি দেওয়া হয় !

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);
// A very WARM welcome
// to all of you READERS!

এখানে `${who}s`স্ট্রিংয়ের whoসাথে ভেরিয়েবলের "s"বিপরীতে সমন্বয় করার সময় অভ্যন্তরীণ ইন্টারপোল্টেড স্ট্রিং আক্ষরিকটি আমাদের জন্য কিছুটা সুন্দর সুবিধা ছিল who + "s"। এছাড়াও একটি নোট রাখার জন্য একটি বিভক্ত স্ট্রিং আক্ষরিক কেবল বর্ণক্ষেত্রযুক্ত যেখানে এটি প্রদর্শিত হয়, কোনওভাবেই গতিশীলভাবে বাদ দেওয়া যায় না:

function foo(str) {
  var name = "foo";
  console.log(str);
}
function bar() {
  var name = "bar";
  foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"

এইচটিএমএলের জন্য টেম্পলেটটি আক্ষরিক ব্যবহার বিরক্তি হ্রাস করে অবশ্যই আরও পঠনযোগ্য।

সরল পুরানো উপায়:

'<div class="' + className + '">' +
  '<p>' + content + '</p>' +
  '<a href="' + link + '">Let\'s go</a>'
'</div>';

ECMAScript 6 সহ:

`<div class="${className}">
  <p>${content}</p>
  <a href="${link}">Let's go</a>
</div>`
  • আপনার স্ট্রিং একাধিক লাইন বিস্তৃত করতে পারে।
  • আপনার উদ্ধৃতি অক্ষরগুলি এড়ানোর দরকার নেই।
  • আপনি যেমন গ্রুপিং এড়াতে পারেন: '">'
  • আপনাকে প্লাস অপারেটর ব্যবহার করতে হবে না।

ট্যাগযুক্ত টেম্পলেট লিটারালস

আমরা একটি টেম্পলেট স্ট্রিং ট্যাগও করতে পারি, যখন একটি টেম্পলেট স্ট্রিং ট্যাগ করা হয়, তখন আক্ষরিক এবং প্রতিস্থাপনগুলি ফাংশনে পাস করা হয় যা ফলাফলের মানটি দেয়।

function myTaggedLiteral(strings) {
  console.log(strings);
}

myTaggedLiteral`test`; //["test"]

function myTaggedLiteral(strings, value, value2) {
  console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5

আমরা একাধিক মান পাস করতে এখানে স্প্রেড অপারেটরটি ব্যবহার করতে পারি। প্রথম যুক্তি — আমরা একে স্ট্রিংস বলেছি all সমস্ত সরল স্ট্রিংগুলির বিন্যাস (কোনও বিভাজনযুক্ত এক্সপ্রেশনগুলির মধ্যে স্টাফ)।

আমরা তখন পর্যন্ত পরবর্তী সব আর্গুমেন্ট একটি অ্যারের নামের বস্তু ব্যবহার মান জড়ো ... gather/rest operator, যদিও আপনি অবশ্যই পারা তাদের প্যারামিটার মত আমরা উপরোক্ত করেনি স্ট্রিং (নিম্নলিখিত ব্যক্তির নাম পরামিতি হিসেবে বাকি আছে value1, value2ইত্যাদি)।

function myTaggedLiteral(strings, ...values) {
  console.log(strings);
  console.log(values);
}

let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5

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

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

কাঁচা স্ট্রিংস

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

function showraw(strings, ...values) {
  console.log(strings);
  console.log(strings.raw);
}
showraw`Hello\nWorld`;

আপনি দেখতে পাচ্ছেন, স্ট্রিংয়ের কাঁচা সংস্করণটি পালিয়ে যাওয়া \nক্রমটি সংরক্ষণ করে , যখন স্ট্রিংটির প্রক্রিয়াজাত সংস্করণ এটিকে একটি অবিরত আসল নতুন লাইনের মতো আচরণ করে। এর নাম ECMAScript 6 একটি বিল্ট-ইন ফাংশন যা একটি স্ট্রিং আক্ষরিক ট্যাগ হিসেবে ব্যবহার করা যাবে সাথে আসে: String.raw(..)। এটি কেবল স্ট্রিংয়ের কাঁচা সংস্করণ দিয়ে যায়:

console.log(`Hello\nWorld`);
/* "Hello
World" */

console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"

1
দুর্দান্ত উত্তর! আপনার মন্তব্যযুক্ত টেম্পলেট লিটারালস বিভাগে মাইনর মন্তব্য, আমি বিশ্বাস করি যে দুটি উদাহরণের অ্যারে আউটপুটগুলি myTaggedLiteral`test ${someText} ${2 + 3}`;হওয়া উচিত //["test ", " "](অর্থাত ছাঁটা স্ট্রিং নয়)।
মাইকেল ক্রেবস

3
লেখকের অ্যাকাউন্ট দেখতে নিচে স্ক্রোল করে হতাশ হলেন না! ভাল ব্যাখ্যা। এক্সডি
বারুন

ভাল ব্যাখ্যা এবং প্রশস্ত কভারেজ, আপনাকে ধন্যবাদ। কেবল এটি যুক্ত করতে চেয়েছিলাম যে মোজিলা বিকাশকারী সাইটের টেম্পলেট আক্ষরিক (টেমপ্লেট স্ট্রিং) এর উপর একটি ভাল ওভারভিউ রয়েছে যা কিছু অতিরিক্ত দিক কভার করে।
দেব অপস

1
নীট: "ইসমাস্ক্রিপ্ট নতুন ধরণের স্ট্রিং আক্ষরিক সাথে আসে" এটি স্ট্রিং আক্ষরিক নয়, এটি একটি টেমপ্লেট আক্ষরিক। যদি স্ট্যাগটি অবিকৃত থাকে তা মূল্যায়নের সময় ফলাফল হয়। এটি কেবল কৌতূহলোদ্দীপক নয়, এমন জায়গাগুলি রয়েছে যেখানে আপনি স্ট্রিং লিটারেল ব্যবহার করতে পারেন যেখানে টেমপ্লেট ল্যাটারালগুলি অনুমোদিত নয় (যেমন অসম্পূর্ণ প্যারামিটারের নাম, মডিউল শনাক্তকারী ...)।
টিজে ক্রাউডার

" যেটি একটি ইন্টারপোল্টেড স্ট্রিং আক্ষরিক তা কেবল বর্ণসীমায় স্কোপযুক্ত" অন্তর্ভুক্ত বাক্যটি বোধগম্য। আপনি এটা ঠিক করতে পারবো?
পিটার মর্টেনসেন

21

টেম্পলেট আক্ষরিক `সংজ্ঞা দিতে ব্যাকটিক্স ( ) ব্যবহার করা হয়। স্ট্রিংগুলির সাথে কাজ করা আরও সহজ করার জন্য টেমপ্লেট ল্যাটারালগুলি ECMAScript 6 এ একটি নতুন বৈশিষ্ট্য।

বৈশিষ্ট্য:

  • আমরা টেম্পলেট আক্ষরিক মধ্যে কোনও ধরণের অভিব্যক্তি ইন্টারপোলেট করতে পারি।
  • তারা বহু-লাইন হতে পারে।

দ্রষ্টব্য: আমরা সহজেই ব্যাকটিক্স ( ) এর ভিতরে একক উদ্ধৃতি ( ') এবং ডাবল উদ্ধৃতি ( ") ব্যবহার করতে পারি `

উদাহরণ:

var nameStr = `I'm "Rohit" Jindal`;

ভেরিয়েবল বা এক্সপ্রেশনকে ইন্টারপোলেট করতে আমরা এর ${expression}জন্য স্বরলিপিটি ব্যবহার করতে পারি।

var name = 'Rohit Jindal';
var text = `My name is ${name}`;
console.log(text); // My name is Rohit Jindal

মাল্টি-লাইন স্ট্রিংগুলির অর্থ হল যে আপনাকে আর \nনতুন লাইনের জন্য আর ব্যবহার করতে হবে না।

উদাহরণ:

const name = 'Rohit';
console.log(`Hello ${name}!
How are you?`);

আউটপুট:

Hello Rohit!
How are you?

15

ব্যাকটিক্স টেম্পলেট লিটারেলগুলি আবদ্ধ করে, যা আগে টেম্পলেট স্ট্রিং হিসাবে পরিচিত। টেম্পলেট লিটারালগুলি স্ট্রিং লিটারাল যা এম্বেড করা এক্সপ্রেশন এবং স্ট্রিং ইন্টারপোলেশন বৈশিষ্ট্যগুলিকে মঞ্জুরি দেয়।

টেমপ্লেট লিটারালগুলিতে স্থানধারকগুলিতে এম্বেড করা এক্সপ্রেশন থাকে, ডলার চিহ্ন দ্বারা চিহ্নিত এবং কোনও অভিব্যক্তিটির চারপাশে কোঁকড়ানো বন্ধনীগুলি ${expression}। স্থানধারক / এক্সপ্রেশন একটি ফাংশনে পাস হয়। ডিফল্ট ফাংশনটি কেবল স্ট্রিংকে যুক্ত করে।

একটি ব্যাকটিক এড়াতে, এর আগে একটি ব্যাকস্ল্যাশ রাখুন:

`\`` === '`'; => true

মাল্টি-লাইন স্ট্রিং লিখতে আরও সহজে ব্যাকটিক্স ব্যবহার করুন:

console.log(`string text line 1
string text line 2`);

অথবা

console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

বনাম ভ্যানিলা জাভাস্ক্রিপ্ট:

console.log('string text line 1\n' +
'string text line 2');

অথবা

console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');

সিকোয়েন্স ক্রম:

  • \uউদাহরণস্বরূপ, ইউনিকোড পলায়ন শুরু হয়েছিল\u00A9
  • \u{}উদাহরণস্বরূপ, ইউনিকোড কোড পয়েন্ট দ্বারা সূচিত ইঙ্গিত\u{2F804}
  • \xউদাহরণস্বরূপ, হেক্সাডেসিমাল পলায়ন শুরু হয়েছিল\xA9
  • \উদাহরণস্বরূপ অক্টাল আক্ষরিক পলায়ন এবং (ক) অঙ্ক (গুলি) দ্বারা শুরু হয়েছিল\251

10

সারসংক্ষেপ:

জাভাস্ক্রিপ্টে ব্যাকটিক্স একটি বৈশিষ্ট্য যা সহজ গতিশীল স্ট্রিং তৈরির জন্য ECMAScript 6 // ECMAScript 2015 এ চালু করা হয়েছিল। এই ECMAScript 6 বৈশিষ্ট্যটির নামও দেওয়া হয়েছে টেমপ্লেট স্ট্রিংকে আক্ষরিক । সাধারণ স্ট্রিংয়ের সাথে তুলনা করার সময় এটি নিম্নলিখিত সুবিধাগুলি সরবরাহ করে:

  • টেমপ্লেট স্ট্রিংগুলিতে লাইনব্রেকগুলি অনুমোদিত এবং এভাবে বহুরেখার হতে পারে। সাধারণ স্ট্রিং লিটারেলগুলি ( ''বা এর সাথে ঘোষিত "") লাইনব্রেকগুলি রাখার অনুমতি নেই।
  • আমরা সহজেই ${myVariable}সিনট্যাক্সের সাহায্যে স্ট্রিংয়ের সাথে ভেরিয়েবলের মানগুলি ইন্টারপোল্ট করতে পারি ।

উদাহরণ:

const name = 'Willem';
const age = 26;

const story = `
  My name is: ${name}
  And I'm: ${age} years old
`;

console.log(story);

ব্রাউজারের সামঞ্জস্যতা:

টেমপ্লেট স্ট্রিং লিটারাল স্থানীয়ভাবে সমস্ত বড় ব্রাউজার বিক্রেতাদের দ্বারা সমর্থিত (ইন্টারনেট এক্সপ্লোরার ব্যতীত)। সুতরাং এটি আপনার প্রোডাকশন কোডটিতে ব্যবহার করা বেশ সাশ্রয়ী। ব্রাউজারের সামঞ্জস্যের আরও বিস্তারিত তালিকা এখানে পাওয়া যাবে


10

স্ট্রিং ইন্টারপোলেশন ছাড়াও, আপনি ব্যাক-টিক ব্যবহার করে কোনও ফাংশনও কল করতে পারেন।


var sayHello = function () {
    console.log('Hello', arguments);
}

// To call this function using ``

sayHello`some args`; // Check console for the output

// Or
sayHello`
    some args
`;

স্টাইলযুক্ত উপাদান পরীক্ষা করুন । তারা এটি ভারী ব্যবহার করে।


7

ভাল অংশটি হ'ল আমরা বুনিয়াদি গণিতগুলি সরাসরি তৈরি করতে পারি:

let nuts = 7

more.innerHTML = `

<h2>You collected ${nuts} nuts so far!

<hr>

Double it, get ${nuts + nuts} nuts!!

`
<div id="more"></div>

এটি একটি কারখানার কার্যক্রমে সত্যিই দরকারী হয়ে উঠেছে:

function nuts(it){
  return `
    You have ${it} nuts! <br>
    Cosinus of your nuts: ${Math.cos(it)} <br>
    Triple nuts: ${3 * it} <br>
    Your nuts encoded in BASE64:<br> ${btoa(it)}
  `
}

nut.oninput = (function(){
  out.innerHTML = nuts(nut.value)
})
<h3>NUTS CALCULATOR
<input type="number" id="nut">

<div id="out"></div>


3
এখন আর কেউ
সিমন করল না
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.