آموزش جاوا اسکریپت مبتدی : مدیریت متن - رشتهها در جاوا اسکریپت
در ادامه، توجه خود را به رشتهها معطوف خواهیم کرد - این همان چیزی است که به قطعات متن در برنامهنویسی گفته میشود. در این مقاله، به تمام نکات رایجی که واقعاً باید هنگام یادگیری جاوا اسکریپت در مورد رشتهها بدانید، مانند ایجاد رشتهها، قرار دادن علامت نقل قول در رشتهها و اتصال رشتهها به یکدیگر، خواهیم پرداخت.
کلمات برای انسانها بسیار مهم هستند - آنها بخش بزرگی از نحوهی ارتباط ما را تشکیل میدهند. از آنجایی که وب یک رسانهی عمدتاً مبتنی بر متن است که برای ایجاد ارتباط و اشتراکگذاری اطلاعات توسط انسانها طراحی شده است، برای ما مفید است که بر کلماتی که در آن ظاهر میشوند کنترل داشته باشیم. HTML ساختار و معنای متن را فراهم میکند، CSS به ما امکان میدهد آن را به طور دقیق سبکبندی کنیم و جاوا اسکریپت ویژگیهای زیادی را برای دستکاری رشتهها ارائه میدهد. این ویژگیها شامل ایجاد پیامهای خوشآمدگویی و اعلانهای سفارشی، نمایش برچسبهای متنی مناسب در صورت نیاز، مرتبسازی عبارات به ترتیب دلخواه و موارد دیگر میشود.
تقریباً تمام برنامههایی که تاکنون در این دوره به شما نشان دادهایم، شامل دستکاری رشتهها بودهاند.
در نگاه اول، رشتهها مشابه اعداد در نظر گرفته میشوند، اما وقتی عمیقتر بررسی کنید، تفاوتهای قابل توجهی را مشاهده خواهید کرد. بیایید با وارد کردن چند خط پایه در کنسول توسعهدهنده مرورگر شروع کنیم تا با آنها آشنا شویم.
برای شروع، خطوط زیر را وارد کنید:
درست مانند کاری که با اعداد انجام دادیم، ما یک متغیر را تعریف میکنیم، آن را با یک مقدار رشتهای مقداردهی اولیه میکنیم و سپس مقدار را برمیگردانیم. تنها تفاوت اینجا این است که هنگام نوشتن یک رشته، باید مقدار را داخل علامت نقل قول قرار دهید.
اگر این کار را نکنید یا یکی از علامتهای نقل قول را از قلم بیندازید، با خطا مواجه خواهید شد. خطوط زیر را امتحان کنید:
این خطوط کار نمیکنند زیرا هر متنی که علامت نقل قول در اطراف آن نباشد، به عنوان نام متغیر، نام ویژگی، کلمه رزرو شده یا موارد مشابه تفسیر میشود. اگر مرورگر متن بدون علامت نقل قول را تشخیص ندهد، خطایی رخ میدهد (مثلاً ""). اگر مرورگر بتواند تشخیص دهد که یک رشته از کجا شروع میشود اما نمیتواند پایان آن را تشخیص دهد (به دلیل گم شدن علامت نقل قول دوم)، ممکن است خطای "" را گزارش دهد، یا در کنسول، به یک خط جدید پرش کند و انتظار داشته باشد که شما رشته را در آنجا تمام کنید. اگر برنامه شما چنین خطاهایی را ایجاد میکند، به عقب برگردید و تمام رشتههای خود را بررسی کنید تا مطمئن شوید که هیچ علامت نقل قول گم شدهای ندارید.
اگر قبلاً متغیر string را تعریف کردهاید، دستور زیر کار خواهد کرد - اکنون آن را امتحان کنید:
اکنون مقدار badString برابر با مقدار string تنظیم شده است.
علامت نقل قول تکی، علامت نقل قول دوتایی و علامت نقل قول معکوس
در جاوا اسکریپت، میتوانید از علامت نقل قول تکی (')، علامت نقل قول دوتایی (") یا علامت بکتیک (`) برای قرار دادن رشتههای خود استفاده کنید. همه موارد زیر کار خواهند کرد:
شما باید از کاراکتر یکسانی برای شروع و پایان یک رشته استفاده کنید، در غیر این صورت با خطا مواجه خواهید شد:
رشتههایی که با استفاده از علامت نقل قول تکی و رشتههایی که با استفاده از علامت نقل قول دوتایی تعریف میشوند، یکسان هستند و اینکه از کدام یک استفاده میکنید به سلیقه شخصی شما بستگی دارد - اگرچه بهتر است یک سبک را انتخاب کنید و به طور مداوم در کد خود از آن استفاده کنید.
رشتههایی که با استفاده از علامت نقل قول معکوس تعریف میشوند، نوع خاصی از رشته هستند که به آنها template literal گفته میشود. template literal ها اکثراً مانند رشتههای معمولی رفتار میکنند، اما ویژگیهای خاصی دارند:
- میتوانید جاوا اسکریپت را در آنها جاسازی کنید.
- میتوانید template literal ها را در چندین خط تعریف کنید.
درون یک قالب متنی، میتوانید متغیرها یا عبارات جاوا اسکریپت را درون قرار دهید و نتیجه در رشته قرار خواهد گرفت:
شما میتوانید از همین تکنیک برای ترکیب دو متغیر استفاده کنید:
به این روش اتصال رشتهها به یکدیگر، الحاق یا اتصال میگویند.
بیایید نگاهی به نحوهی استفاده از اتصال در عمل بیندازیم:
در اینجا، ما از تابع استفاده میکنیم که کاربر را وادار میکند تا از طریق یک کادر محاورهای به یک سوال پاسخ دهد و سپس متنی را که وارد میکند در یک متغیر مشخص - در این مورد name - ذخیره میکند. سپس رشتهای را نمایش میدهیم که نام را در یک پیام خوشامدگویی عمومی وارد میکند.
شما میتوانید از فقط با قالبهای متنی استفاده کنید، نه با رشتههای معمولی. میتوانید رشتههای معمولی را با استفاده از عملگر + به هم متصل کنید.
توجه داشته باشید که این دو نوع متفاوت استفاده از رشته را اشتباه نگیرید. رشته معمولی با علامت نقل قول تکی یا دوتایی با کلید کنار enter در سمت راست کیبورد شما نوشته میشود و قالب متنی با نقل قول کج، با کلید بالای tab در گوشه بالای سمت چپ کیبورد شما نوشته میشود.
گنجاندن عبارات در رشتهها
شما میتوانید عبارات جاوا اسکریپت را در قالبهای متنی و همچنین فقط متغیرها بگنجانید و نتایج در نتیجه گنجانده میشوند:
قالبهای متنی به فاصله بین خطوط در کد منبع احترام میگذارند، بنابراین میتوانید رشتههایی بنویسید که چندین خط را در بر میگیرند، مانند این:
برای داشتن خروجی معادل با استفاده از یک رشته معمولی، باید کاراکترهای شکست خط () را در رشته قرار دهید:
گنجاندن نقل قولها در رشتهها
از آنجایی که ما از علامت نقل قول برای نشان دادن شروع و پایان رشتهها استفاده میکنیم، چگونه میتوانیم علامت نقل قول واقعی را در رشتهها قرار دهیم؟ میدانیم که این روش کار نخواهد کرد:
یک گزینه رایج، استفاده از یکی از کاراکترهای دیگر برای اعلان رشته است:
گزینه دیگر، escape کردن علامت نقل قول مشکل است. escape کردن کاراکترها به این معنی است که ما کاری با آنها انجام میدهیم تا مطمئن شویم که آنها به عنوان متن شناخته میشوند، نه بخشی از کد. در جاوا اسکریپت، ما این کار را با قرار دادن یک بک اسلش درست قبل از کاراکتر انجام میدهیم. این را امتحان کنید:
شما میتوانید از همین تکنیک برای وارد کردن سایر کاراکترهای ویژه استفاده کنید.
چه اتفاقی میافتد وقتی سعی میکنیم یک رشته و یک عدد را به هم وصل کنیم؟ بیایید آن را در کنسول خود امتحان کنیم:
ممکن است انتظار داشته باشید که این تابع خطا برگرداند، اما به خوبی کار میکند. نحوه نمایش اعداد به صورت رشته کاملاً مشخص است، بنابراین مرورگر به طور خودکار عدد را به رشته تبدیل کرده و دو رشته را به هم متصل میکند.
اگر یک متغیر عددی دارید که میخواهید آن را به رشته یا یک متغیر رشتهای دارید که میخواهید آن را به عدد تبدیل کنید، میتوانید از دو ساختار زیر استفاده کنید:
- تابع هر چیزی را که به آن ارسال شود، در صورت امکان به عدد تبدیل میکند. موارد زیر را امتحان کنید:
برعکس، تابع ورودی خود را به یک رشته تبدیل میکند. این را امتحان کنید:
این ساختارها میتوانند در برخی موقعیتها واقعاً مفید باشند. برای مثال، اگر کاربری عددی را در فیلد متنی فرم وارد کند، آن عدد یک رشته است. با این حال، اگر میخواهید این عدد را به چیزی اضافه کنید، باید آن عدد باشد، بنابراین میتوانید آن را از طریق ارسال کنید تا این کار را انجام دهید. ما دقیقاً همین کار را در بازی حدس اعداد، در تابع checkGuess انجام دادیم.
