ভূমিকা
স্ট্রিংগুলির সাথে কাজ করার সময়, এমন পরিস্থিতি দেখা দিতে পারে যেগুলির জন্য আমাদেরকে গতিশীলভাবে এই ধরনের স্ট্রিংটিতে একটি নির্দিষ্ট মান যুক্ত করতে হবে যাতে এটি এখনও একটি স্ট্রিং প্রদান করে, এটি করার কাজটিকে স্ট্রিং ইন্টারপোলেশন হিসাবে উল্লেখ করা হয়।
এই গতিশীল মানটি একটি পরিবর্তনশীল, রাষ্ট্র বা অন্য কিছু হতে পারে যা স্ট্রিং এ এমবেড করা প্রকৃত মান ধারণ করে।
এই নির্দেশিকায়, আমরা স্ট্রিং ইন্টারপোলেশনের প্রয়োজন হতে পারে এবং কীভাবে সেগুলি অর্জন করা যেতে পারে সেগুলি বিবেচনায় নিয়ে প্রতিক্রিয়াতে স্ট্রিং ইন্টারপোলেশন কীভাবে প্রয়োগ করা যায় তা দেখব।
ES5 এবং ES6 এ স্ট্রিং ইন্টারপোলেশন
স্ট্রিং ইন্টারপোলেশন দুটি উপায়ে সম্পন্ন করা যেতে পারে: সংযোজন এবং টেমপ্লেট লিটারেল। যদিও কেউ কেউ যুক্তি দেন যে কনক্যাটেনেশন স্ট্রিং ইন্টারপোলেশন নয়, স্ট্রিং ইন্টারপোলেশন বলতে প্লেসহোল্ডার প্রতিস্থাপন করে স্ট্রিং তৈরি করার ক্ষমতা বোঝায়, যা কনক্যাটেনেশন স্পষ্টভাবে করে।
ES6-এ টেমপ্লেট লিটারালের প্রবর্তনের আগে, আমরা সর্বদা সংমিশ্রণ ব্যবহার করতাম, যা বহু-লাইন স্ট্রিংগুলির সাথে কাজ করার সময় খুব কঠিন হয়ে পড়ে যার জন্য অনেকগুলি ভেরিয়েবলের প্রতিস্থাপন প্রয়োজন। ES6 এ যখন টেমপ্লেট লিটারেলগুলি চালু করা হয়েছিল, তখন সেগুলি প্রয়োগ করা অনেক সহজ প্রমাণিত হয়েছিল, বিশেষত দীর্ঘ বা বহু-লাইন স্ট্রিংগুলির জন্য যেখানে আমরা এক্সপ্রেশনগুলি এম্বেড করতে চাই৷
এই নির্দেশিকায়, আমরা উভয় পদ্ধতিই দেখব এবং তারপরে টেমপ্লেট লিটারাল সহ কিছু উদাহরণ সঞ্চালন করব, যা প্রস্তাবিত পদ্ধতি।
সংযোগের সাথে বিক্রিয়ায় স্ট্রিং ইন্টারপোলেশন
সংযুক্তির জন্য আদর্শ পদ্ধতি হল ব্যবহার করে +
নির্দিষ্ট পরিবর্তনশীল বা রাষ্ট্রের চারপাশে অপারেটর:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
উপরের কোডে, আমাদের অবস্থা আছে fontSize
যার একটি মান আছে large
. আমরা চাই যে ক্লাসটি গতিশীলভাবে আনা হোক - উদাহরণস্বরূপ এটি হতে পারে text-small
, text-large
, text-medium
, ইত্যাদি রাষ্ট্রের উপর নির্ভর করে, একটি ভিন্ন className
এইভাবে শিরোনাম প্রয়োগ করা হবে!
সংমিশ্রণ সহ, আমরা প্রথমে আমাদের প্রকৃত স্ট্রিং স্থাপন করব এবং তারপর ব্যবহার করব+
অপারেটর আসল স্ট্রিং দিয়ে ভেরিয়েবলকে ইন্টারপোলেট করতে, তাই এটি ইন্টারপোলেটেড মান ফিরিয়ে দিতে পারে:
উপরের পদ্ধতিটি জটিল হয়ে যায় যখন আমরা দুই বা ততোধিক ভেরিয়েবল থাকি, এবং বিশেষ করে যদি স্ট্রিংগুলি অন্য স্ট্রিংয়ের মধ্যে যোগ করা হয়, এবং শেষ পর্যন্ত নয়।
টেমপ্লেট লিটারালের সাথে প্রতিক্রিয়া করার জন্য স্ট্রিং ইন্টারপোলেশন
স্ট্রিং ইন্টারপোলেশন মোকাবেলা করার জন্য এটি সর্বোত্তম পদ্ধতি। এটি ES6 এ যোগ করা হয়েছিল এবং তারপর থেকে স্ট্রিং ইন্টারপোলেশনের জন্য সবচেয়ে বেশি ব্যবহৃত পদ্ধতি হয়ে উঠেছে। স্ট্রিং টেমপ্লেট লিটারাল ব্যবহার করে, আগের উদাহরণটি পুনরাবৃত্তি করা যাক:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
আমরা উপরের কোডে দেখতে পাচ্ছি, আমরা আর টেমপ্লেট লিটারেলে প্লাস অপারেটর ব্যবহার করি না, পরিবর্তে, আমরা পুরো স্ট্রিংয়ের জন্য ব্যাকটিক্স ব্যবহার করি এবং তারপর আমাদের ভেরিয়েবল এবং গতিশীল মান সন্নিবেশ করতে ডলার চিহ্ন এবং কোঁকড়া ধনুর্বন্ধনী ব্যবহার করি।
বিবৃতি মূল্যায়ন করা হয় এবং const fontSize
স্ট্রিং মধ্যে ঢোকানো হয়.
আসুন আরও কিছু প্রতিক্রিয়া স্ট্রিং ইন্টারপোলেশন উদাহরণ দেখি!
প্রতিক্রিয়ায় শৈলীর মানগুলি পাস করার জন্য কীভাবে স্ট্রিং ইন্টারপোলেশন ব্যবহার করবেন
এমন একটি পরিস্থিতিতে যেখানে আমাদের স্টাইল ডেটা এমন একটি ভেরিয়েবলে সংরক্ষিত থাকে যার আমরা একটি পাঠ্যকে অভ্যন্তরীণভাবে প্রতিক্রিয়াতে স্টাইল করতে ব্যবহার করতে চাই, আমরা টেমপ্লেট লিটারেল ব্যবহার করতে পারি:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
যেমনটি আমরা আগে বলেছি, ডলার চিহ্ন এবং কোঁকড়া ধনুর্বন্ধনী আমাদের স্থানধারককে ধরে রাখতে ব্যবহার করা হয় এবং এটি সঠিক উপায়ে স্টাইলটি ফিরিয়ে দেবে:
আমরা কোঁকড়া ধনুর্বন্ধনীর মধ্যেও মূল্যায়ন করতে পারি, ধরুন আমরা সংখ্যাটিকে গুণিত করতে চাই:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
প্রতিক্রিয়ায় এক্সপ্রেশন সহ স্ট্রিং ইন্টারপোলেশন কীভাবে ব্যবহার করবেন
এখন পর্যন্ত, আমরা দেখেছি যে আমরা মূল্যায়ন করতে পারি; এটাও মনে রাখা গুরুত্বপূর্ণ যে আমরা এক্সপ্রেশনের উপর ভিত্তি করে সঠিক মান পেতে এবং এটি ব্যবহার করতে কোঁকড়া ধনুর্বন্ধনীর মধ্যে এক্সপ্রেশন যোগ করতে পারি:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
টেমপ্লেট লিটারালের সাথে একাধিক লাইনের স্ট্রিং কিভাবে ইন্টারপোলেট করবেন
আমরা আগেই বলেছি, টেমপ্লেট লিটারালগুলি একাধিক লাইনের স্ট্রিংগুলিতে স্থানধারক যোগ করা সহজ করে তোলে:
const App = () => { let user = { name: 'John Doe', age: 14, hobby: 'basket ball', }; let sentence = `The fact that ${user.name} is ${user.age} years old and his hobby is ${user.hobby} amazes me.`; return ( <div className="container"> <div> <p>{sentence}</p> </div> </div> );
};
উপরের কোডে, আমরা দেখতে পাচ্ছি যে সংমিশ্রণ ব্যবহার করার তুলনায় টেমপ্লেট লিটারাল ব্যবহার করা কতটা সহজ:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
টেমপ্লেট লিটারাল সহ লজিক্যাল অপারেটরগুলি কীভাবে ব্যবহার করবেন
এখন পর্যন্ত আমরা দেখেছি কিভাবে টারনারি অপারেটরদের সাথে এক্সপ্রেশন পাস করতে হয়, এটাও ভাল যে আমরা দেখতে পাচ্ছি যে লজিক্যাল অপারেটররাও টেমপ্লেট লিটারালের সাথে কাজ করতে পারে:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
উপসংহার
আমরা এই নিবন্ধে দুটি আদর্শ পদ্ধতি ব্যবহার করে কীভাবে স্ট্রিং ইন্টারপোলেশন বাস্তবায়ন করতে হয়, সেইসাথে টেমপ্লেট লিটারালগুলি কতটা শক্তিশালী হতে পারে তা শিখেছি। টেমপ্লেট লিটারালের প্রবর্তনের পর থেকে, বেশিরভাগ লোকেরা ব্যবহারের সরলতা এবং উল্লেখযোগ্যভাবে ভাল কোড পাঠযোগ্যতার কারণে সেগুলি ব্যবহার করতে পছন্দ করে।
- '
- &
- a
- ক্ষমতা
- হিসাব
- অর্জন
- আইন
- যোগ
- যদিও
- সর্বদা
- অন্য
- অ্যাপ্লিকেশন
- ফলিত
- অভিগমন
- কাছাকাছি
- প্রবন্ধ
- পরিণত
- সর্বোত্তম
- উত্তম
- শ্রেণী
- কোড
- তুলনা
- জটিল
- আধার
- ধারণ
- পারা
- সৃষ্টি
- উপাত্ত
- ডিলিং
- নির্ভর করে
- বিভিন্ন
- কঠিন
- ডলার
- প্রগতিশীল
- এম্বেড করা
- বিশেষত
- ইত্যাদি
- মূল্যায়ন
- উদাহরণ
- উদাহরণ
- এক্সপ্রেশন
- প্রথম
- কৌশল
- রাখা
- কিভাবে
- কিভাবে
- HTTPS দ্বারা
- বাস্তবায়ন
- গুরুত্বপূর্ণ
- উদাহরণ
- IT
- বড়
- জ্ঞানী
- লাইন
- লাইন
- দেখুন
- করা
- মেকিং
- পদ্ধতি
- অধিক
- সেতু
- বহু
- বহুগুণে
- সংখ্যা
- অপারেটর
- অপারেটরদের
- বিশেষ
- সম্প্রদায়
- ক্ষমতাশালী
- প্রতিক্রিয়া
- বোঝায়
- পুনরাবৃত্তি
- প্রয়োজন
- প্রত্যাবর্তন
- আয়
- বলেছেন
- চিহ্ন
- থেকে
- অবস্থা
- So
- কিছু
- নির্দিষ্ট
- মান
- রাষ্ট্র
- বিবৃতি
- এখনো
- শৈলী
- গ্রহণ
- সার্জারির
- us
- ব্যবহার
- মূল্য
- বিভিন্ন
- উপায়
- মধ্যে
- হয়া যাই ?
- কাজ
- এক্সএমএল
- বছর