کار با رشته ها در جاوا اسکریپت – بخش دوم
در بخش اول این مقاله، کار با رشته ها، مباحث اولیه مربوط به رشته ها در جاوا اسکریپت، شامل ایجاد رشته ها و مشاهده ی خروجی رشته ها، همچنین، ترکیب رشته ها و … بحث شد. در این بخش از مقاله به موارد استثنا و راه حل هایی برای آن ها پرداخته می شود. راه حل هایی که بتوان به راحتی با رشته ها، حتی در موارد استثنا کار کرد، به صورتی که اجرای کد دچار خطا و بروز اشتباه نشود.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
نقل قول های Escape و آپوستروف ها در رشته های جاوا اسکریپت
با توجه به این که علامت نقل قول در جاوا اسکریپت برای نشان دادن رشته ها استفاده می شود، هنگام استفاده از آپوستروف ها و نقل قول ها در رشته ها باید ملاحظات خاصی را انجام داد. برای مثال، استفاده از یک آپوستروف در وسط یک رشته با نقل قول تکی، رشته را پایان می دهد و بدین ترتیب، جاوا اسکریپت تلاش خواهد کرد که بقیه ی رشته مورد نظر را به عنوان کد تجزیه و تحلیل کند.
برای دیدن این موضوع، می توانیم آپوستروف در عبارت I’m را در نظر بگیریم و نتیجه را ببینیم:
1 2 3 4 5 6 7 |
const brokenString = 'I'm a broken string'; console.log(brokenString); Output unknown: Unexpected token (1:24) |
همین امر برای استفاده از رشته ها در نقل قول های دو تایی نیز اتفاق می افتد.
برای جلوگیری از چنین خطایی در این شرایط، چند گزینه داریم که می توانیم استفاده کنیم:
- سینتکس جایگزین رشته / Opposite string syntax
- کاراکتر های فرار / Escape characters
- عبارت های قالب / Template literals
در ادامه ی مقاله، این گزینه ها را بررسی خواهیم کرد.
استفاده از سینتکس جایگزین رشته در جاوا اسکریپت
یک راه آسان برای موارد استثنا در رشته ها که باعث شکسته شدن رشته و بروز خطا می شود، استفاده از سینتکس رشته ی مخالف یا جایگزین رشته است.
به عنوان مثال، آپوستروف در رشته های ساخته شده با “، که در مثال زیر نیز دیده می شود:
1 |
"We're safely using an apostrophe in double quotes." |
و علامت نقل قول در رشته های ساخته شده با ‘، که در مثال زیر آمده است:
1 |
'Then he said, "Hello, World!"'; |
زمانی که نقل قول تکی و دو تایی را با هم ترکیب می کنیم، می توانیم نمایش نمادهای نقل قول و آپوستروف ها در رشته ها را کنترل کنیم. با این حال، هنگامی که از سینتکس های سازگار در فایل های برنامه نویسی پروژه استفاده می کنیم، ممکن است استفاده از چنین راه حلی مشکل باشد.
استفاده از کاراکتر Escape (\)
برای جلوگیری از تفسیر یک نقل قول به عنوان پایان رشته در جاوا اسکریپت، می توانیم از کاراکتر Escape (\) یا backslash استفاده کنیم.
سینتکس \’ همیشه یک نقل قول است و سینتکس \” همیشه یک نقل قول دو تایی است، و با استفاده از این راه حل، دیگر نگرانی از شکسته شدن رشته و بروز خطا در جاوا اسکریپت وجود نخواهد داشت.
با استفاده از این روش، می توانیم از آپوستروف ها در رشته های ساخته شده با “، استفاده کنیم:
1 |
'We\'re safely using an apostrophe in single quotes.' |
همچنین می توانیم از نقل قول ها نیز در رشته های ساخته شده با “، استفاده کنیم:
1 |
"Then he said, \"Hello, World!\""; |
این روش کمی مبهم به نظر می رسد اما ممکن است نیاز به استفاده از هر دوی آپوستروف و علامت نقل قول در یک رشته ی جاوا اسکریپت داشته باشید که در این صورت، استفاده از escape ضروری است.
استفاده از الگوریتم های قالب در جاوا اسکریپت
الگوریتم های قالب با backtick ها تعریف می شوند و بنابراین هر دوی نقل قول و آپوستروف را می توان با خیال راحت و بدون نوشتن هر گونه کاراکتر اضافی، استفاده کرد.
1 |
`We're safely using apostrophes and "quotes" in a template literal.`; |
علاوه بر اجتناب از نیاز به استفاده از کاراکتر اضافی escape و بیان عبارات جاسازی شده یاembedded ، الگوریتم های قالب، پشتیبانی چند خطی را نیز ارائه می دهند.
با استفاده از سینتکس رشته ی جایگزین، و استفاده از کاراکتر های escape و با استفاده از الگوریتم های قالب، راه های مختلفی برای ساختِ ایمن یک رشته در جاوا اسکریپت وجود دارد.
رشته های طولانی و خطوط جدید در جاوا اسکریپت
گاهی اوقات ممکن است بخواهید کاراکتر هایی را در خط جدیدی وارد کنید. در این صورت، کاراکتر های escape شامل \n و یا \r برای ایجاد یک خط جدید در خروجی کد استفاده می شوند.
1 2 3 4 5 6 7 8 9 |
const threeLines = "This is a string\nthat spans across\nthree lines."; Output This is a string that spans across three lines. |
این روش به طور تکنیکال در مواردی استفاده می شود که خروجی را در چندین خط تولید کند. با این حال، نوشتن یک رشته ی بسیار طولانی در یک خط، خیلی زود برای خواندن و کار با آن بسیار سخت خواهد شد. اما می توانیم اپراتور ترکیب را برای نمایش رشته در چندین خط جاوا اسکریپت استفاده کنیم.
1 2 3 4 5 |
const threeLines = "This is a string\n" + "that spans across\n" + "three lines."; |
به جای ترکیب رشته های چندگانه، می توانیم از کاراکتر escape به صورت\ برای خط جدید استفاده کنیم.
1 2 3 4 5 |
const threeLines = "This is a string\n\ that spans across\n\ three lines."; |
نکته: این روش پیشنهاد نمی شود، زیرا ممکن است در برخی از مرورگرها و مینیفایرها / minifier ها مشکل ساز شود.
به منظور ایجاد کدی که بیشتر و بهتر قابل خواندن باشد، می توانیم از رشته های عبارت قالب استفاده کنیم. این کار، نیاز به ترکیب و یا escape در رشته های طولانی و حاوی خطوط جدید را از بین می برد. رشته و همچنین خطوط جدید نیز حفظ خواهند شد.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const threeLines = `This is a string that spans across three lines.`; Output This is a string that spans across three lines. |
در جاوا اسکریپت، مهم است که از تمام روش های ایجاد خطوط جدید و رشته هایی که در بین چندین خط قرار دارند آگاهی داشته باشید، زیرا پایگاه های کد مختلف، ممکن است از استاندارد های مختلفی استفاده کنند.
نتیجه گیری
در این مقاله، از ابتدا، مقدمات و بحث های پایه ای کار با رشته ها در جاوا اسکریپت، از جمله ایجاد و نمایش رشته عبارت با استفاده از نقل قول تکی و دو تایی، شرح داده شد. و همچنین ایجاد الگوریتم های قالب، ترکیب رشته ها، استفاده از کاراکتر های escape و اختصاص دادن مقادیر رشته به متغیرها نیز مورد بحث قرار گرفت. در پایان امید می رود که با استفاده از این مقاله، بتوانید به راحتی، کار با رشته های Javascript را شروع کنید و در موارد پیچیده تر و موارد استثنا، بتوانید راه حل های مورد نیاز را به کار ببرید.