رشته‌ها | آموزش جاوااسکریپت به زبان ساده

سلام دوستان! توی این قسمت می‌خوایم با رشته‌ها آشنا بشیم. اگه توی برنامه با حروف و متن‌ها سر و کار داریم، رشته‌ها به کار ما میان.

موارد زیر رو توی این قسمت یاد می‌گیریم:

• رشته (String) چیه؟
• چطوری رشته بسازیم؟
• رشته‌های پیچیده
• ترفندها

رشته (String) چیه؟ 🤔

ما از رشته‌ها برای نگهداری حروف و متن‌ها استفاده می‌کنیم. رشته جزء ۸ نوع داده‌ای هست که توی جاوااسکریپت با اونها سر و کار داریم.

توی کد زیر، مقدار متغیر message یک رشته هست:

const message = "I learn JS 💪";

alert(typeof message); // string

توی ادامه یاد می‌گیریم که چطوری رشته بسازیم 😉

چطوری رشته بسازیم؟

توی جاوااسکریپت هر مقداری که محصور به علامت‌های " یا ' و یا ` باشه، رشته محسوب میشه. این علامت‌ها ۳ نوع مختلف Quotation هستن. پس توی جاوااسکریپت ما با ۳ روش می‌تونیم رشته داشته باشیم. ۲ روش اول شباهت‌های زیادی به هم دارن که با اونها توی این قسمت آشنا می‌شیم و با روش سوم توی قسمت بعدی.

۱. ساخت رشته با استفاده از علامت Single Quotation

این علامت به صورت ' هست و رشته‌هایی که با این علامت ساخته میشن به صورت زیر هستن:

const message = 'Hello';
// or
alert('Hello');

۲. ساخت رشته با استفاده از علامت Double Quotation

این رشته‌ها با کارکتر " ساخته میشن:

const message = "Hello";
// or
alert("Hello");

رشته‌های پیچیده‌تر

خب رشته‌هایی که ساختیم بسیار ساده بودن. برای داشتن رشته‌های پیچیده‌تر مقداری چالش داریم! 💪

چسبوندن رشته‌ها

برای چسبوندن ۲ یا چند رشته به هم از عملگر + استفاده می‌کنیم:

const p_start = "<p>";
const p_text  = "Welcome!";
const p_end   = "</p>";

>> alert(p_start + p_text + p_end);

به عملگر + وقتی برای رشته‌ها استفاده میشه، می‌گیم عملگر Concatenation.

نمایش یک متغیر توی یک رشته

کاملاً رایج هست که بخوایم یک متغیر رو توی یک رشته نمایش بدیم. اگه رشته‌هامون رو با کارکتر ' یا " می‌سازیم، نمی‌تونیم به طور مستقیم از یک متغیر وسط یک رشته استفاده کنیم. ابتدا باید رشته رو به صورت زیر خاتمه بدیم و بعد با عملگر + متغیر رو بچسبونیم به رشته:

const name = "Emily";

>> const message = "Welcome to our app, " + name;

alert(message);

دکمه ► رو بزنین تا خروجی رو ببینین. توی خط ۳ رشته رو با همون علامتی که شروع شده قطع کردیم و بعد با عملگر + متغیر name رو چسبوندیم به انتهای رشته. همچنین می‌تونیم چیزهای دیگه رو هم به همین صورت نمایش بدیم:

const message = "Hello. I'm " + (5 - 2) + " years old";

alert(message);

نمایش Quotation داخل یک Quotation

اگه بخوایم داخل یک رشته که با " ساخته شده یک کارکتر " نمایش بدیم باید چکار کنیم؟ مثلاً:

const message = "My name is "Emily".";

این کد نامعتبر هست و بهمون خطا میده. چون با اضافه کردن "Emily" که شامل کارکتر " هست، رشته قطع شد. برای استفاده از کارکتر " داخل رشته‌هایی که با " ساخته شدن از روش زیر استفاده می‌کنیم:

const message = "My name is \"Emily\".";

alert(message);

در واقع به‌جای هر " داخل رشته، از \" استفاده کردیم. به کارکتر \ می‌گیم Backslash.

به همین شکل اگه رشته‌هایی داریم که با ' ساخته شدن، برای نمایش کارکتر ' از کارکترهای \' استفاده می‌کنیم:

const message = 'I\'m Bond, James Bond.';

alert(message);

رشته‌های طولانی

اگه متن‌های طولانی داریم:

const message = "Hello Emily! My name is Mario. Welcome to our app. Start using it! Get help";

برای خوانایی بهتر کد با استفاده از کارکتر + به همراه یک Enter ↵ می‌تونیم رشته رو بشکنیم به چند خط:

const message = "Hello Emily! " +
"My name is Mario. " +
"Welcome to our app. " +
"Start using it! Get help";

alert(message);

این رشته هیچ تفاوتی با رشته قبل نداره. با مقایسه اونها با عملگر === توی کنسول true می‌گیریم.

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

رشته‌های چند خطی

برای داشتن رشته‌های چند خطی از \n استفاده می‌کنیم:

const message = "Hello Emily! \nMy name is Mario";

alert(message);

با اجرای کد بالا می‌بینیم که رشته توی ۲ خط به ما نمایش داده میشه. همونطور که می‌بینیم \n درست قبل از کلمه My قرار گرفته. درست توی همین ناحیه هست که رشته شکسته میشه.

ترفندها

رشته‌ها مثل همه نوع‌های داده‌ای دیگه شامل کلی ترفند هست که پرکاربردترین اونها رو الان بررسی می‌کنیم.

این رشته چند حرف داره؟

برای اینکه ببینیم یک رشته شامل چند کارکتر یا حرف میشه، از پراپرتی .length به صورت زیر استفاده می‌کنیم:

"string".length; // 6

length یک پراپرتی هست که توی همه رشته‌ها وجود داره و مقدار اون یک عدد هست که نشون‌دهنده طول رشته هست. از اون می‌تونیم به صورت‌های زیر استفاده کنیم:

alert("Hello".length);
// or
const message = "Hello";
alert(<<message.length>>);

حروف کوچیک به حروف بزرگ و بلعکس

اگه بخوایم رشته hello رو به صورت HELLO داشته باشیم، از یک متد به اسم toUpperCase() استفاده می‌کنیم:

const message = "hello";

alert(message.toUpperCase());

متدها درست شبیه به پراپرتی‌ها قابل دسترس هستن. برای تبدیل رشته به حروف کوچیک از متد toLowerCase() استفاده می‌کنیم:

const message = "HELLO";

alert(message.toLowerCase());

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

چطوری به کارکترهای توی رشته دسترسی داشته باشیم؟

گاهی وقت‌ها می‌خوایم به بعضی از کارکترهای یک رشته دسترسی داشته باشیم. مثلاً اولین یا آخرین کارکترها.

شبیه به آرایه‌ها که برای داشتن اولین آیتم اونها از ایندکس 0 به صورت array[0] استفاده می‌کردیم، برای بدست آوردن اولین کارکتر رشته هم به همون صورت عمل می‌کنیم:

const message = "Welcome";

>> alert(message[0]); // W

و برای دومین کارکتر:

message[1]; // e

پس با توجه به اینکه برای دسترسی به اولین کارکتر از ایندکس 0 و دومین کارکتر از ایندکس 1 استفاده می‌کنیم، برای بدست آوردن آخرین کارکتر یک رشته باید از length - 1 استفاده کنیم:

const message = "Welcome";

>> alert(message[message.length - 1]); // e

message.length - 1 در واقع شماره ایندکس آخرین کارکتر رشته هست.

خب دوستان با رشته‌ها آشنا شدیم و دیدیم که چطوری می‌تونیم رشته‌های متنوعی داشته باشیم. توی قسمت بعدی با یک روش جدید برای داشتن رشته‌ها توی جاوااسکریپت آشنا می‌شیم. روزتون خوش 😉✌️