Stringها در جاوااسکریپت

تقریباً در تمام برنامه‌های جاوااسکریپت با متن (Text) سروکار داریم. نام کاربر، ایمیل، شماره تلفن، عنوان محصول، پیام‌های سیستم، آدرس، توضیحات و بسیاری از اطلاعات دیگر به صورت رشته‌های متنی ذخیره می‌شوند.

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

در مقالات قبلی با انواع داده آشنا شدیم و دیدیم که می‌توانیم یک متن را داخل کوتیشن قرار دهیم:

const name = "Ali";

اما کار با String فقط به ذخیره کردن متن محدود نمی‌شود. در جاوااسکریپت امکانات زیادی برای دسترسی به حروف، جستجو در متن، تغییر متن، برش رشته، تبدیل حروف، حذف فاصله‌ها و ترکیب رشته‌ها وجود دارد.

در این مقاله ابتدا String را از پایه بررسی می‌کنیم و سپس با مهم‌ترین ویژگی‌ها و متدهای آن به صورت عملی کار خواهیم کرد.

String چیست؟

String نوع داده‌ای برای نگهداری متن است.

مثلاً:

const name = "Ali";
const city = "Istanbul";
const message = "Hello World";

هر سه متغیر بالا یک String هستند.

می‌توانیم نوع آن‌ها را بررسی کنیم:

console.log(typeof name);

خروجی:

string

روش‌های ایجاد String

در جاوااسکریپت معمولاً Stringها را با یکی از سه روش زیر ایجاد می‌کنیم.

استفاده از Double Quotes

const name = "Ali";

استفاده از Single Quotes

const name = 'Ali';

هر دو روش معتبر هستند.

استفاده از Backtick

const name = `Ali`;

Backtick با این علامت نوشته می‌شود:

`

Backtick زمانی بسیار کاربردی است که بخواهیم متغیرها یا عبارات جاوااسکریپت را داخل متن قرار دهیم.

قرار دادن متغیر داخل String

فرض کنید:

const name = "Ali";
const age = 25;

می‌توانیم با Template Literal بنویسیم:

const message = `نام من ${name} است و ${age} سال دارم.`;

console.log(message);

خروجی:

نام من Ali است و 25 سال دارم.

قسمت:

${name}

به جاوااسکریپت می‌گوید مقدار متغیر name را داخل String قرار بده.

این روش در پروژه‌های واقعی بسیار کاربردی است.

تفاوت Template Literal با String معمولی

در این حالت:

const name = "Ali";

const message = "Hello ${name}";

console.log(message);

خروجی:

Hello ${name}

زیرا Double Quote عبارت ${name} را پردازش نمی‌کند.

برای Template Literal باید از Backtick استفاده کنیم:

const message = `Hello ${name}`;

خروجی:

Hello Ali

String چندخطی

با Template Literal می‌توانیم متن چندخطی ایجاد کنیم.

const message = `
سلام علی
به سایت ما خوش آمدید.
امیدواریم تجربه خوبی داشته باشید.
`;

console.log(message);

این قابلیت برای ایجاد متن‌های چندخطی مفید است.

String و Index

مانند Array، حروف String نیز دارای Index هستند.

برای مثال:

const word = "جاوااسکریپت";

می‌توانیم موقعیت حروف را به شکل زیر تصور کنیم:

J a v a S c r i p t
0 1 2 3 4 5 6 7 8 9

Index از 0 شروع می‌شود.

بنابراین:

console.log(word[0]);

خروجی:

J

و:

console.log(word[4]);

خروجی:

S

دسترسی به آخرین حرف String

برای دسترسی به آخرین حرف می‌توانیم از length استفاده کنیم.

const word = "جاوااسکریپت";

console.log(word[word.length - 1]);

خروجی:

t

زیرا:

word.length

تعداد حروف را برمی‌گرداند و آخرین Index یک واحد کمتر از length است.

length در String

ویژگی length تعداد کاراکترهای String را برمی‌گرداند.

const text = "Hello";

console.log(text.length);

خروجی:

5

مثال دیگر:

const word = "جاوااسکریپت";

console.log(word.length);

خروجی:

10

فاصله نیز جزو String است

اگر بنویسیم:

const text = "Hello World";

فاصله بین Hello و World نیز یک کاراکتر محسوب می‌شود.

console.log(text.length);

خروجی:

11

زیرا:

Hello = 5
space = 1
World = 5

در مجموع:

11

Stringها Immutable هستند

یکی از نکات مهم درباره String این است که Stringها در جاوااسکریپت Immutable هستند.

یعنی نمی‌توانیم مستقیماً یک کاراکتر String را تغییر دهیم.

مثلاً:

let word = "Hello";

word[0] = "Y";

console.log(word);

نتیجه همچنان:

Hello

خواهد بود.

اگر بخواهیم String جدیدی ایجاد کنیم، باید مقدار جدید بسازیم:

let word = "Hello";

word = "Y" + word.substring(1);

console.log(word);

خروجی:

Yello

در ادامه با substring بیشتر آشنا خواهیم شد.

تبدیل String به حروف بزرگ

برای تبدیل تمام حروف به Uppercase از:

toUpperCase()

استفاده می‌کنیم.

const text = "hello world";

console.log(text.toUpperCase());

خروجی:

HELLO WORLD

تبدیل String به حروف کوچک

برای تبدیل متن به Lowercase:

toLowerCase()

استفاده می‌شود.

const text = "HELLO WORLD";

console.log(text.toLowerCase());

خروجی:

hello world

مثال عملی Uppercase و Lowercase

فرض کنید کاربر نام کاربری خود را وارد کرده است:

const username = "Ali123";

console.log(username.toLowerCase());

خروجی:

ali123

این روش در بعضی سناریوهای مقایسه متنی می‌تواند مفید باشد.

trim چیست؟

گاهی کاربر هنگام ورود اطلاعات، قبل یا بعد متن فاصله اضافی وارد می‌کند.

مثلاً:

const username = "   Ali   ";

برای حذف فاصله‌های ابتدا و انتهای String می‌توانیم از:

trim()

استفاده کنیم.

const username = "   Ali   ";

console.log(username.trim());

خروجی:

Ali

نکته مهم این است که trim() فاصله‌های داخل متن را حذف نمی‌کند.

مثلاً:

const text = "Hello World";

فاصله بین دو کلمه همچنان باقی می‌ماند.

trimStart و trimEnd

می‌توانیم فقط فاصله‌های ابتدای متن را حذف کنیم:

const text = "   Hello";

console.log(text.trimStart());

یا فقط فاصله‌های انتهای متن:

const text = "Hello   ";

console.log(text.trimEnd());

جستجوی متن با includes

متد:

includes()

بررسی می‌کند که آیا یک String شامل متن موردنظر هست یا خیر.

مثال:

const text = "I love جاوااسکریپت";

console.log(text.includes("جاوااسکریپت"));

خروجی:

true

اما:

console.log(text.includes("Python"));

خروجی:

false

مثال عملی includes

فرض کنید می‌خواهیم بررسی کنیم یک پیام شامل کلمه خاصی است یا خیر:

const message = "Welcome to our website";

if (message.includes("website")) {
    console.log("کلمه website وجود دارد.");
}

خروجی:

کلمه website وجود دارد.

حساس بودن به حروف بزرگ و کوچک

includes() به بزرگ و کوچک بودن حروف حساس است.

مثلاً:

const text = "جاوااسکریپت";

console.log(text.includes("جاوااسکریپت"));

خروجی:

false

برای مقایسه بدون توجه به حروف می‌توانیم از:

text.toLowerCase()

استفاده کنیم:

const text = "جاوااسکریپت";

console.log(
    text.toLowerCase().includes("جاوااسکریپت")
);

خروجی:

true

startsWith

متد:

startsWith()

بررسی می‌کند که String با متن مشخصی شروع شده است یا خیر.

const url = "https://example.com";

console.log(url.startsWith("https"));

خروجی:

true

مثال دیگر:

const name = "Ali";

console.log(name.startsWith("A"));

خروجی:

true

endsWith

متد:

endsWith()

بررسی می‌کند که String با متن مشخصی تمام شده است یا خیر.

const fileName = "photo.jpg";

console.log(fileName.endsWith(".jpg"));

خروجی:

true

مثال:

const email = "user@example.com";

console.log(email.endsWith(".com"));

خروجی:

true

indexOf

متد indexOf() موقعیت اولین occurrence یک متن را پیدا می‌کند.

مثلاً:

const text = "Hello جاوااسکریپت";

console.log(text.indexOf("جاوااسکریپت"));

خروجی:

6

چون جاوااسکریپت از Index شماره 6 شروع شده است.

اگر متن پیدا نشود:

console.log(text.indexOf("Python"));

خروجی:

-1

بنابراین می‌توانیم بنویسیم:

if (text.indexOf("جاوااسکریپت") !== -1) {
    console.log("متن پیدا شد.");
}

البته برای بررسی وجود یک متن، includes() معمولاً خواناتر است.

lastIndexOf

اگر یک عبارت چند بار در String تکرار شده باشد، lastIndexOf() موقعیت آخرین occurrence را برمی‌گرداند.

const text = "جاوااسکریپت is powerful. جاوااسکریپت is popular.";

console.log(text.lastIndexOf("جاوااسکریپت"));

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

charAt

برای دریافت یک کاراکتر در موقعیت مشخص می‌توانیم از charAt() استفاده کنیم.

const word = "Hello";

console.log(word.charAt(1));

خروجی:

e

این کار مشابه:

console.log(word[1]);

است.

استخراج بخشی از String با slice

یکی از مهم‌ترین متدهای String:

slice()

است.

مثال:

const text = "جاوااسکریپت";

console.log(text.slice(0, 4));

خروجی:

Java

در slice(start, end):

• start شروع بخش موردنظر است.

• end پایان بخش است.

• کاراکتر مربوط به end در نتیجه قرار نمی‌گیرد.

مثلاً:

JavaScript
0123456789

عبارت:

text.slice(0, 4)

حروف Indexهای:

0 1 2 3

را برمی‌گرداند.

استفاده از slice برای دریافت آخرین بخش

می‌توانیم از عدد منفی نیز استفاده کنیم.

const text = "جاوااسکریپت";

console.log(text.slice(-6));

خروجی:

Script

این روش برای دریافت بخش پایانی String بسیار مفید است.

substring

متد دیگری برای استخراج بخشی از String وجود دارد:

substring()

مثال:

const text = "جاوااسکریپت";

console.log(text.substring(0, 4));

خروجی:

Java

برای شروع، تفاوت مهمی که باید بدانید این است که slice از Indexهای منفی پشتیبانی می‌کند، اما substring رفتار متفاوتی با مقادیر منفی دارد.

به همین دلیل در بسیاری از سناریوها slice انتخاب ساده‌تری است.

replace

برای جایگزین کردن یک بخش از String می‌توانیم از:

replace()

استفاده کنیم.

مثال:

const text = "I like جاوااسکریپت";

const result = text.replace("جاوااسکریپت", "Python");

console.log(result);

خروجی:

I like Python

نکته مهم: replace معمولاً اولین occurrence مطابق را جایگزین می‌کند.

replaceAll

اگر بخواهیم تمام occurrenceهای یک متن را جایگزین کنیم، می‌توانیم از:

replaceAll()

استفاده کنیم.

const text = "cat cat cat";

const result = text.replaceAll("cat", "dog");

console.log(result);

خروجی:

dog dog dog

مثال عملی replace

فرض کنید می‌خواهیم فاصله‌های یک عنوان را با خط تیره جایگزین کنیم:

const title = "جاوااسکریپت Tutorial";

const slug = title.replaceAll(" ", "-");

console.log(slug);

خروجی:

جاوااسکریپت-Tutorial

برای ساخت URLهای واقعی، معمولاً مراحل بیشتری مانند تبدیل حروف، حذف کاراکترهای خاص و مدیریت زبان‌های مختلف لازم است؛ اما این مثال مفهوم replaceAll را نشان می‌دهد.

split

متد بسیار مهم دیگری به نام:

split()

وجود دارد که یک String را به Array تبدیل می‌کند.

مثال:

const text = "Ali,Sara,Reza";

const users = text.split(",");

console.log(users);

خروجی:

["Ali", "Sara", "Reza"]

در اینجا split(",") String را بر اساس کاما تقسیم کرده است.

split با فاصله

مثال:

const sentence = "I love جاوااسکریپت";

const words = sentence.split(" ");

console.log(words);

خروجی:

["I", "love", "جاوااسکریپت"]

این روش برای جدا کردن کلمات یک جمله کاربرد دارد.

تبدیل String به Array از حروف

اگر بنویسیم:

const word = "Hello";

console.log(word.split(""));

خروجی:

["H", "e", "l", "l", "o"]

در این حالت هر کاراکتر به یک عنصر Array تبدیل می‌شود.

join

در مقاله مربوط به Array با join آشنا شدیم.

join برعکس یک مفهوم ساده از split عمل می‌کند و عناصر Array را به یک String تبدیل می‌کند.

مثال:

const words = ["I", "love", "جاوااسکریپت"];

const sentence = words.join(" ");

console.log(sentence);

خروجی:

I love جاوااسکریپت

تکرار String با repeat

متد:

repeat()

یک String را به تعداد مشخص تکرار می‌کند.

const text = "Hi ";

console.log(text.repeat(3));

خروجی:

Hi Hi Hi

مثال دیگر:

const line = "-";

console.log(line.repeat(20));

خروجی:

--------------------

مقایسه Stringها

می‌توانیم Stringها را با عملگرهای مقایسه مقایسه کنیم.

مثلاً:

const a = "Ali";
const b = "Ali";

console.log(a === b);

خروجی:

true

اما:

const a = "Ali";
const b = "ali";

console.log(a === b);

خروجی:

false

زیرا جاوااسکریپت به حروف بزرگ و کوچک حساس است.

مقایسه بدون توجه به حروف

اگر بخواهیم دو String را بدون توجه به Case مقایسه کنیم:

const username1 = "Ali";
const username2 = "ali";

console.log(
    username1.toLowerCase() === username2.toLowerCase()
);

خروجی:

true

ترکیب Stringها با +

می‌توانیم Stringها را با + ترکیب کنیم.

const firstName = "Ali";
const lastName = "Ahmadi";

const fullName = firstName + " " + lastName;

console.log(fullName);

خروجی:

Ali Ahmadi

این روش صحیح است، اما زمانی که متن پیچیده‌تر باشد، Template Literal معمولاً خواناتر است:

const fullName = `${firstName} ${lastName}`;

String و Number

هنگام استفاده از + باید مراقب ترکیب String و Number باشیم.

const age = 25;

console.log("Age: " + age);

خروجی:

Age: 25

جاوااسکریپت در این حالت Number را به String تبدیل می‌کند.

اما:

console.log("10" + 5);

خروجی:

105

زیرا در اینجا + به عنوان عملیات ترکیب String انجام شده است.

در مقایسه:

console.log("10" - 5);

خروجی:

5

این رفتارهای تبدیل نوع را باید هنگام کار با String و Number در نظر داشته باشیم.

تبدیل Number به String

می‌توانیم یک Number را به String تبدیل کنیم.

روش رایج:

const number = 123;

const text = String(number);

console.log(typeof text);

خروجی:

string

روش دیگر:

const text = number.toString();

تبدیل String به Number

اگر String شامل یک مقدار عددی باشد، می‌توانیم آن را به Number تبدیل کنیم.

مثال:

const value = "123";

const number = Number(value);

console.log(number);
console.log(typeof number);

خروجی:

123
number

این موضوع هنگام دریافت اطلاعات از فرم‌ها بسیار مهم است، زیرا بسیاری از مقادیر ورودی فرم‌ها ابتدا به صورت String دریافت می‌شوند.

Stringهای طولانی

برای متن‌های طولانی می‌توانیم از Template Literal استفاده کنیم:

const article = `
جاوااسکریپت یک زبان برنامه‌نویسی محبوب
برای توسعه صفحات و برنامه‌های وب است.
`;

این روش باعث می‌شود ساخت متن‌های چندخطی ساده‌تر شود.

دسترسی به کاراکترهای Unicode

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

مثال:

const text = "سلام";

console.log(text.length);

در بسیاری از موارد می‌توانیم به شکل عادی با Stringهای فارسی کار کنیم.

مثلاً:

console.log(text[0]);

خروجی:

س

البته در متن‌های پیچیده Unicode، مانند برخی Emojiها یا کاراکترهای ترکیبی، مفهوم «یک کاراکتر» می‌تواند پیچیده‌تر از یک واحد ساده String باشد. برای مباحث مقدماتی فعلاً همین نکته کافی است.

مثال عملی: بررسی نام کاربری

فرض کنید می‌خواهیم یک نام کاربری را بررسی کنیم:

const username = "  Ali123  ";

const cleanedUsername = username.trim();

if (cleanedUsername.length < 3) {
    console.log("نام کاربری بسیار کوتاه است.");
} else {
    console.log(`نام کاربری: ${cleanedUsername}`);
}

در این مثال:

1. فاصله‌های اضافی را حذف کردیم.

2. طول String را بررسی کردیم.

3. نتیجه را نمایش دادیم.

مثال عملی: بررسی ایمیل

یک بررسی ساده:

const email = "user@example.com";

if (email.includes("@") && email.endsWith(".com")) {
    console.log("ساختار اولیه ایمیل قابل قبول است.");
} else {
    console.log("ایمیل صحیح نیست.");
}

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

مثال عملی: استخراج پسوند فایل

فرض کنید:

const fileName = "profile.jpg";

می‌توانیم بخش پسوند را بررسی کنیم:

if (fileName.endsWith(".jpg")) {
    console.log("این فایل JPG است.");
}

یا با lastIndexOf و slice پسوند را استخراج کنیم:

const fileName = "profile.jpg";

const dotIndex = fileName.lastIndexOf(".");

const extension = fileName.slice(dotIndex + 1);

console.log(extension);

خروجی:

jpg

مثال عملی: ساخت نام کامل

const firstName = "Ali";
const lastName = "Ahmadi";

const fullName = `${firstName} ${lastName}`;

console.log(fullName);

خروجی:

Ali Ahmadi

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

const firstName = "  Ali ";
const lastName = " Ahmadi  ";

const fullName = `${firstName.trim()} ${lastName.trim()}`;

console.log(fullName);

زنجیره‌ای کردن متدهای String

یکی از قابلیت‌های کاربردی جاوااسکریپت این است که می‌توانیم چند Method را پشت سر هم استفاده کنیم.

مثال:

const username = "   ALI123   ";

const result = username.trim().toLowerCase();

console.log(result);

خروجی:

ali123

در اینجا ابتدا:

trim()

اجرا شده و سپس:

toLowerCase()

روی نتیجه اجرا شده است.

تفاوت متدهای مهم String

اشتباهات رایج در کار با String

۱. اشتباه گرفتن Index و Length

اگر String پنج کاراکتر داشته باشد:

const text = "Hello";

console.log(text.length);

نتیجه:

5

اما آخرین Index:

4

است.

بنابراین:

text[text.length - 1]

آخرین کاراکتر را برمی‌گرداند.

۲. انتظار تغییر String با Methodها

Stringها Immutable هستند.

مثلاً:

const text = "hello";

text.toUpperCase();

console.log(text);

خروجی:

hello

برای ذخیره نتیجه باید بنویسیم:

const text = "hello";

const result = text.toUpperCase();

console.log(result);

یا:

let text = "hello";

text = text.toUpperCase();

console.log(text);

۳. حساس بودن به Case

این دو String برابر نیستند:

"جاوااسکریپت"
"جاوااسکریپت"

پس در جستجو و مقایسه باید این موضوع را در نظر بگیریم.

۴. اشتباه در استفاده از slice

در:

text.slice(0, 4);

Index شماره 4 در نتیجه قرار نمی‌گیرد.

۵. اشتباه گرفتن split و join

split:

String → Array

و join:

Array → String

است.

تمرین‌های مقاله

تمرین ۱ — طول متن

یک String ایجاد کنید و تعداد کاراکترهای آن را با length نمایش دهید.

تمرین ۲ — اولین و آخرین حرف

یک کلمه ایجاد کنید و:

• اولین حرف

• آخرین حرف

آن را نمایش دهید.

تمرین ۳ — تبدیل حروف

یک String انگلیسی ایجاد کنید و آن را:

• به حروف بزرگ

• به حروف کوچک

تبدیل کنید.

تمرین ۴ — پاک‌سازی

String زیر را در نظر بگیرید:

const username = "   Ali123   ";

فاصله‌های اضافی را حذف کنید و نتیجه را نمایش دهید.

تمرین ۵ — جستجو

یک جمله ایجاد کنید و بررسی کنید که آیا کلمه جاوااسکریپت در آن وجود دارد یا خیر.

تمرین ۶ — استخراج

String زیر را در نظر بگیرید:

const text = "جاوااسکریپت";

با استفاده از slice() عبارت:

Script

را استخراج کنید.

تمرین ۷ — split

String زیر را:

const names = "Ali,Sara,Reza";

به یک Array تبدیل کنید.

تمرین ۸ — Challenge

برنامه‌ای بنویسید که یک نام کاربری دریافت کند و:

1. فاصله‌های ابتدا و انتهای آن را حذف کند.

2. تمام حروف انگلیسی را به lowercase تبدیل کند.

3. طول آن را بررسی کند.

4. بررسی کند که آیا شامل عبارت admin است یا خیر.

5. نتیجه را در Console نمایش دهد.

برای مثال:

const username = "   AdminUser   ";

نتیجه پاک‌سازی‌شده باید مشابه:

adminuser

باشد.

جمع‌بندی

در این مقاله با Stringها در جاوااسکریپت به صورت کامل آشنا شدیم.

یاد گرفتیم:

• String چیست.

• چگونه String ایجاد کنیم.

• تفاوت Single Quote، Double Quote و Backtick.

• Template Literal چیست.

• چگونه متغیرها را داخل متن قرار دهیم.

• Stringهای چندخطی چگونه ایجاد می‌شوند.

• Index در String چگونه کار می‌کند.

• ویژگی length چیست.

• چرا Stringها Immutable هستند.

• toUpperCase و toLowerCase.

• trim، trimStart و trimEnd.

• includes.

• startsWith و endsWith.

• indexOf و lastIndexOf.

• charAt.

• slice و substring.

• replace و replaceAll.

• split و join.

• repeat.

• مقایسه Stringها.

• تبدیل String و Number.

• کار با Stringهای فارسی.

• ترکیب چند متد String.

• استفاده عملی از Stringها در نام کاربری، ایمیل و نام فایل.

Stringها تقریباً در تمام پروژه‌های جاوااسکریپت حضور دارند؛ بنابراین تسلط بر آن‌ها برای کار با فرم‌ها، DOM، APIها، JSON و بسیاری از بخش‌های دیگر ضروری است.