متون و رشته ها (Strings) در جاوا اسکریپت — به زبان ساده

در ادامه سلسله مطالب مربوط به راهنمای عملی جاوا اسکریپت در این بخش به معرفی متن و رشته‌ها در این زبان برنامه‌نویسی می‌پردازیم. رشته یا string در زبان‌های برنامه‌نویسی به هر توالی از کاراکترهای حرفی یا عددی گفته می‌شود که به صورت متن با آن برخورد می‌شود. در این مقاله به مسائل رایجی که هنگام کار با رشته‌ها در جاوا اسکریپت حتماً باید بدانید مانند ایجاد رشته‌ها، گیومه‌های escape در رشته‌ها و الحاق رشته‌ها به همدیگر صحبت می‌کنیم.

پیش‌نیازها

• سواد مقدماتی رایانه
• درکی ابتدایی از HTML و CSS
• آشنایی اولیه با ماهیت جاوا اسکریپت
• هدف از این مقاله معرفی برخی مفاهیم مقدماتی رشته‌ها در جاوا اسکریپت است.

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

قدرت کلمات

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

اگر بخش‌های پیشین این سلسله مطالب راهنمای عملی جاوا اسکریپت را دنبال کرده باشید، متوجه شده‌اید که در همه آن‌ها نمونه‌هایی از کارکردهای دستکاری رشته‌ها در جاوا اسکریپت نیز ارائه شده‌اند.

مبانی مقدماتی رشته‌ها

شاید در نگاه اول به نظر برسد که کار کردن با رشته‌ها - یا همان Strings - مشابه کار با اعداد است؛ اما وقتی که کمی بیشتر تأمل بکنیم، می‌بینیم که تفاوت‌های قابل توجهی بین این دو وجود دارند. در ابتدا تلاش کنید چندین خط کد زیر را در کنسول مرورگر خود وارد کنید تا بیشتر با رشته‌ها آشنا شوید. به منظور وارد شدن به بخش کنسول مرورگر می‌توانید از دکمه‌های Ctrl+Shift+I استفاده کنید.

ایجاد رشته‌ها

ابتدا خط‌های زیر را در مرورگر وارد کنید:

var string = 'The revolution will not be televised.';
string;

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

اگر این کار را انجام دهید یا یکی از گیومه‌ها را فراموش کنید با خطا مواجه می‌شوید. برای نمونه تلاش کنید کدهای زیر را در کنسول مرورگر وارد کنید:

var badString = This is a test;
var badString = 'This is a test;
var badString = This is a test';

این خطوط کار نمی‌کنند، زیرا هر متنی بدون گیومه در پیرامونش به عنوان نام یک متغیر، خصوصیت یا کلمه رزرو شده و موارد مشابه تصور می‌شود. اگر مرورگر نتواند آن را پیدا کند در این صورت خطایی (مانند "missing; before statement") رخ می‌دهد. اگر مرورگر بتواند ببیند که یک رشته از کجا آغاز می‌شود؛ اما نتواند انتهای آن را بیابد، چنان که در مثال خط دوم فوق مشاهده می‌کنید، خطایی به صورت «unterminated string literal» اعلام می‌کند. اگر برنامه شما چنین خطاهایی صادر کند در این صورت باید به عقب بازگشته و همه رشته‌هایی خود را بررسی کنید تا مطمئن شوید که هیچ کدام از علامت‌های گیومه را جا نینداخته‌اید.

کدی که در ادامه آمده است، در صورتی عمل خواهد کرد که قبلاً متغیر string تعریف شده باشد:

var badString = string;
badString;

badString اینک دارای مقداری به صورت string است.

گیومه‌های تکی یا جفتی

در جاوا اسکریپت می‌توان گیومه‌های تکی یا جفتی را انتخاب کرد و رشته‌ها را درون آن‌ها قرار داد. هر دو آن‌ها به خوبی عمل می‌کنند:

var sgl = 'Single quotes.';
var dbl = "Double quotes";
sgl;
dbl;

تفاوت بسیار کمی بین این دو وجود دارد و این که از کدام می‌خواهید استفاده کنید به ترجیح شخصی شما وابسته است. می‌توانید یک مورد را انتخاب کرده و همیشه از آن استفاده کنید؛ اما کد گیومه‌دار به خصوص اگر از گیومه‌های مختلف در یک رشته استفاده کنید، می‌تواند سردرگم‌کننده باشد. برای نمونه کد زیر دارای خطا است:

var badQuotes = 'What on earth?";

مرورگر فکر می‌کند که رشته مورد نظر بسته نشده است، زیرا از نوع متفاوتی از گیومه در انتها استفاده شده است. برای نمونه هر دو موارد زیر صحیح هستند:

var sglDbl = 'Would you eat a "fish supper"?';
var dblSgl = "I'm feeling blue.";
sglDbl;
dblSgl;

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

var bigmouth = 'I've got no right to take my place...';

در این مورد در بخش بعدی بیشتر توضیح داده‌ایم.

کاراکترهای Escape در رشته‌ها

برای حل مشکلی که در بخش قبلی مطرح کردیم، باید از کاراکترهای escape استفاده کنیم. کاراکترهای escape یعنی از چیزی استفاده‌ کنیم تا مطمئن شویم که رشته به صورت متن و نه بخشی از کد شناسایی می‌شود. در جاوا اسکریپت این کار از طریق کاراکتر (\) پیش از هر کاراکتر صورت می‌گیرد. برای نمونه کد زیر را در کنسول مرورگر وارد کنید:

var bigmouth = 'I\'ve got no right to take my place...';
bigmouth;

این کد به خوبی عمل می‌کند. می‌توان کاراکترهای دیگر را نیز به روش مشابه escape کرد، مانند \” هر چند برخی کدهای خاص نیز وجود دارند.

الحاق رشته‌ها

الحاق (Concatenate) یک اصطلاح در برنامه‌نویسی به معنی چسباندن به همدیگر است. چسباندن دو رشته به هم در جاوا اسکریپت با استفاده از عملگر (+) صورت می‌پذیرد. این همان عملگری است که برای جمع زدن اعداد استفاده می‌شود؛ اما در این مورد طرز کار آن متفاوت است. برای نمونه مثال‌های زیر را در کنسول مرورگر وارد کنید:

var one = 'Hello, ';
var two = 'how are you?';
var joined = one + two;
joined;

نتیجه کدهای فوق متغیری به نام joined است که شامل جمله «?Hello, how are you» است.

در نمونه آخر ما صرفاً دو رشته را به هم چسباندیم؛ اما می‌توان هر تعداد رشته را به هم چسباند و کافی است بین همه آن‌ها از عملگر + استفاده شود. برای نمونه کد زیر را امتحان کنید:

var multiple = one + one + one + one + two;
multiple;

همچنین می‌توان متغیرها و رشته‌های واقعی را مانند کد زیر با هم ترکیب کرد:

var response = one + 'I am fine — ' + two;
response;

الحاق در عمل

در این بخش نگاهی به الحاق عملی رشته‌ها می‌اندازیم و مثالی را ارائه می‌کنیم:

<button>Press me</button>

var button = document.querySelector('button');

button.onclick = function() {
   var name = prompt('What is your name?');
   alert('Hello ' + name + ', nice to see you!');
}

در این بخش ما از تابع ()window.prompt در خط 4 برای گرفتن نام کاربر استفاده کرده‌ایم و این متن را درون متغیری نگه‌داری می‌کنیم که در این مورد name نام دارد. سپس از یک تابع ()window.alert در خط 5 برای نمایش کادر بازشونده دیگری که شامل یک رشته است استفاده می‌کنیم. این رشته از الحاق دو رشته متغیر name و یک رشته خوشامدگویی ترکیب شده است.

اعداد یا رشته‌ها

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

حتی می‌توان این کار را در مورد دو عدد انجام داد، یعنی می‌توان عدد را با قرار دادن داخل گیومه به رشته تبدیل کرد. برای مثال کد زیر را امتحان کنید. دقت کنید که ما از عملگر typeof برای بررسی این که این متغیر عدد یا رشته است استفاده کرده‌ایم:

var myDate = '19' + '67';
typeof myDate;

اگر یک متغیر عددی داشته باشید و بخواهید آن را به یک رشته تبدیل کنید؛ اما در جهت عکس تغییر ندهید یا این که یک متغیر رشته‌ای داشته باشید که بخواهید آن را به عدد تبدیل کنید و نه بر عکس، می‌توانید از دو سازه زیر استفاده کنید:

var myString = '123';
var myNum = Number(myString);
typeof myNum;

از سوی دیگر هر عدد یک متد به نام ()toString دارد که آن را به معادل رشته‌ای خود تبدیل می‌کند:

var myNum = 123;
var myString = myNum.toString();
typeof myString;

این سازه‌ها می‌توانند در برخی موقعیت‌ها بسیار مفید باشند. برای نمونه اگر یک کاربر عددی را درون یک فیلد متنی وارد کند می‌توان آن را به رشته تبدیل کرد. با این وجود، اگر بخواهید این عدد را به چیزی اضافه کنید، باید آن را به عدد تبدیل کنید. به این منظور می‌توان آن را به متد ()Number ارسال کرد. این وضعیت دقیقاً در خط 61 کد «بازی حدس اعداد» صورت گرفته است.

سخن پایانی

به این ترتیب به پایان این بخش از راهنمای عملی جاوا اسکریپت می‌پردازیم. در بخش بعدی که مبتنی بر مطالب همین نوشته است به برخی متدهای موجود رشته‌ها در جاوا اسکریپت و شیوه استفاده از آن‌ها برای دستکاری رشته‌ها به شکل مطلوب خواهیم پرداخت.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش جاوا اسکریپت (JavaScript)
• مجموعه آموزش‌های مهندسی نرم افزار
• آموزش تعریف توابع در جاوا اسکریپت (JavaScript)
• آموزش جاوا اسکریپت — مجموعه مقالات جامع وبلاگ فرادرس
• 1۰ کتابخانه و فریم‌ورک جاوا اسکریپت که باید آنها را بشناسید
• عملیات ریاضی در جاوا اسکریپت — راهنمای مقدماتی

==