سرور مجازی NVMe

راهنمای درون یابی رشته با React هنگام کار با رشته ها، ممکن است شرایطی پیش بیاید که از ما بخواهد به صورت پویا مقدار خاصی را به چنین رشته ای اضافه کنیم تا همچنان یک رشته را برگرداند، عمل انجام این کار به عنوان درون یابی رشته ای نامیده می شود. این مقدار پویا می تواند یک متغیر، حالت یا هر چیز دیگری باشد که…

JavaScript (JS)برنامه نویسی

توسط مهران در دی ۱۷, ۱۴۰۲

سرفصلهای مطلب

زمان لازم برای مطالعه: 4 دقیقه

معرفی

هنگام کار با رشته‌ها، موقعیت‌هایی ممکن است پیش بیاید که از ما بخواهد به صورت پویا یک مقدار خاص را به چنین رشته‌ای اضافه کنیم تا همچنان یک رشته را برگرداند، عمل انجام این کار به عنوان درون یابی رشته‌ای گفته می‌شود.

این مقدار پویا می تواند یک متغیر، حالت یا هر چیز دیگری باشد که حاوی مقدار واقعی برای جاسازی در رشته باشد.

در این راهنما، با در نظر گرفتن موارد مختلفی که ممکن است نیاز به درونیابی رشته ای داشته باشند و روش دستیابی به آنها، روش پیاده سازی درون یابی رشته ها در React را بررسی خواهیم کرد.

درون یابی رشته ای در ES5 و ES6

درون یابی رشته را می توان به دو روش انجام داد: الحاق و الفبای الگو. اگرچه برخی استدلال می کنند که الحاق، درون یابی رشته ای نیست، درون یابی رشته ای به توانایی ایجاد رشته ها با انجام جایگزینی مکان نگهدار اشاره دارد، که الحاق به وضوح انجام می دهد.

قبل از معرفی لفظ قالب در ES6، ما همیشه از الحاق استفاده می‌کردیم، که هنگام برخورد با رشته‌های چند خطی که نیاز به جایگزینی متغیرهای زیادی دارند، بسیار دشوار می‌شود. زمانی که الگوها در ES6 معرفی شدند، پیاده‌سازی آنها بسیار ساده‌تر بود، به‌ویژه برای رشته‌های طولانی‌تر یا چند خطی که می‌خواهیم عبارات را در آن جاسازی کنیم.

در این راهنما، به هر دو روش نگاه می کنیم و سپس نمونه هایی را با حروف الفبای الگو، که رویکرد توصیه شده است، اجرا می کنیم.

درون یابی رشته ای در واکنش با الحاق

روش استاندارد برای الحاق با استفاده از + عملگر حول متغیر یا حالت خاص:

const App = () => {
   const (fontSize) = useState('large');
   return (
      <div className="container">
         <h1 className={"font-bold text-" + fontSize}>Hello World</h1>
      </div>
   );
};

در کد بالا حالت of را داریم 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 در رشته درج می شود.

بیایید به چند نمونه دیگر درون یابی رشته ای React نگاه کنیم!

چگونه از درون یابی رشته ای برای عبور مقادیر سبک در React استفاده کنیم

در شرایطی که داده‌های سبک خود را در متغیری ذخیره می‌کنیم که می‌خواهیم از آن برای استایل دادن به یک متن به صورت داخلی در React استفاده کنیم، می‌توانیم از قالب‌های واقعی استفاده کنیم:

const App = () => {
   const textSize = 40;
   return (
      <div className="container">
         <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1>
      </div>
   );
};

همانطور که قبلاً گفتیم، علامت دلار و بریس های فرفری برای نگه داشتن مکان نگهدارنده ما استفاده می شود و این استایل را به روش مناسب برمی گرداند:

پیشنهاد می‌کنیم بخوانید: استفاده از Fetch API برای ارسال داده های JSON در جاوا اسکریپت

همچنین می‌توانیم ارزیابی را در بریس‌های فرفری انجام دهیم، فرض کنید می‌خواهیم عدد ضرب شود:

<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>

روش استفاده از درون یابی رشته با عبارات در React

تا کنون، ما دیده ایم که می توانیم ارزیابی انجام دهیم. همچنین مهم است که توجه داشته باشید که ما می‌توانیم عباراتی را در پرانتزهای فرفری اضافه کنیم تا بر اساس مقدار صحیح به دست آوریم روی عبارت و استفاده از آن:

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: 'basketball',
   };

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

نتیجه

ما در این مقاله یاد گرفتیم که چگونه درون یابی رشته ای را با استفاده از دو روش استاندارد پیاده سازی کنیم، همچنین یاد گرفتیم که literals قالب چقدر می تواند قدرتمند باشد. از زمان معرفی قالب‌های تحت اللفظی، اکثر مردم به دلیل سادگی استفاده و خوانایی بهتر کد، استفاده از آنها را ترجیح می‌دهند.

منتشر شده در 1403-01-07 15:28:03

امتیاز شما به این مطلب