متد های رشته (String Methods) در JS

هر نوع داده (data type) دارای متدها و ویژگی های مخصوص به خود است. در این بخش متدها و ویژگی های رشته ها بررسی می کنیم.

string.length طول رشته - ویژگی - property string.charCodeAt() دسترسی به کد UTF-16 کارکتر string.charAt()دسترسی به کارکتر های رشته string.at() دسترسی به کارکتر های رشته string[ ] دسترسی به کارکتر های رشته string.slice() استخراج بخشی از متن string.substring() استخراج بخشی از متن string.substr() استخراج بخشی از متن string.toUpperCase() تبدیل به حروف بزرگ string.toLowerCase() تبدیل به حروف کوچک string.concat() چسباندن چند رشته به هم string.trim() حذف فضای خالی از ابتدا و انتها string.trimStart() حذف فضای خالی از ابتدا string.trimEnd() حذف فضای خالی از انتها string.padStart() بررسی و افزودن تعداد کارکتر به ابتدا string.padEnd() بررسی و افزودن تعداد کارکتر به انتها string.repeat() تکرار رشته string.replace() جایگزین کردن اولین مطابقت string.replaceAll() جایگزین کردن تمام مطابقت ها string.split() تبدیل رشته به آرایه

نکته: به کمک متدها می توانیم کارهای از پیش تعریف شده ای روی داده ها انجام دهیم. در ادامه با چند نمونه کد متوجه کارایی متدها می شویم.

نکته:  متدها (methods) پرانتز دارند. مانند trim()

نکته:  ویژگی ها (properties) پرانتز ندارند. مانند length

طول رشته length در JS

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

در مثال زیر رشته PNLdev در متغیر text ذخیره شده و با ویژگی length تعداد کارکتر های آن نمایش داده می شود.

let text = "PNLdev";
text.length;

نکته: length یک ویژگی (property) است و ویژگی ها پرانتز ندارند.

متد charCodeAt() در JS

 متد ()charCodeAt، کد یونیکد (UTF-16) کاراکتر، در ایندکس مشخص شده را بر می گرداند.

let text = "PNLdev";
text.charCodeAt(4);

نکته: ()charCodeAt عددی بین 0 تا 65535 را بر می گرداند.

متد charAt() در JS

 متد ()charAt، کاراکتر را در ایندکس مشخص شده بر می گرداند.

let text = "PNLdev";
text.charAt(0);

نکته: در رشته ها اولین ایندکس، 0 است.

نکته: در رشته ها آخرین ایندکس، با فرمول طول رشته منهای یک (str.length - 1) به دست می آید.

let text = "PNLdev";
text.charAt(text.length - 1);

متد at() رشته در JS

 متد at()، مانند متد charAt()، کاراکتر را در ایندکس مشخص شده بر می گرداند.

let text = "PNLdev";
text.at(0);

نکته: متد at برخلاف متد charAt، می تواند اعداد منفی را دریافت کند. ایندکس های منفی از آخر رشته شمرده می شوند.

let text = "PNLdev";
text.at(-1);

متد [ ] در JS

 با استفاده از براکت [] (property access) مانند متد charAt() و at()، کاراکتر را در ایندکس مشخص شده بر می گردانیم.

let text = "PNLdev";
text[0];

متد slice() در JS

متد slice()، بخشی از یک رشته را جدا و بر می گرداند.

این متد دو پارامتر دریافت می کند.

  1. پارامتر اول ایندکس نقطه شروع را مشخص می کند. (اجباری)
  2. پارامتر دوم ایندکس نقطه پایان را مشخص می کند. (اختیاری)

برای درک بهتر، نمونه کد زیر را در آزمایشگاه ببینید.

let students = "amin, parsa, ehsan";
students.slice(6, 11);

نکته: اگر پارامتر دوم مقداردهی نشود، تا انتها رشته جدا و برگردانده می شود.

let students = "amin, parsa, ehsan";
students.slice(6);

می توان از ایندکس های منفی در پارامترها استفاده کرد. ایندکس های منفی از آخر رشته شمرده می شوند.

let students = "amin, parsa, ehsan";
students.slice(-12, -7);
let students = "amin, parsa, ehsan";
students.slice(-12);

متد substring() در JS

متد substring() بخشی از یک رشته را جدا و بر می گرداند.

این متد دو پارامتر دریافت می کند.

  1. پارامتر اول ایندکس نقطه شروع را مشخص می کند. (اجباری)
  2. پارامتر دوم ایندکس نقطه پایان را مشخص می کند. (اختیاری)

برای درک بهتر، نمونه کد زیر را در آزمایشگاه ببینید.

let students = "amin, parsa, ehsan";
students.substring(6, 11);

 نکته: عملکرد متد substring مشابه slice است. و تنها تفاوت آن ها این است که، برخلاف slice، متد substring از اعداد منفی پشتیبانی نمی کند.

متد substr() در JS

متد substr() مانند slice() و substring() بخشی از یک رشته را جدا و برمی گرداند.

این متد دو پارامتر دریافت می کند.

  1. پارامتر اول ایندکس نقطه شروع را مشخص می کند. (اجباری)
  2. پارامتر دوم تعداد کارکتر های مورد نظر را مشخص می کند. (اختیاری)

برای درک بهتر، نمونه کد زیر را در آزمایشگاه ببینید.

let text = "amin, parsa, ehsan";
text.substr(6, 5);

نکته: در پارامتر دوم متد substr، برخلاف substring و slice، باید تعداد کارکترهای مورد نظر مشخص شود، نه ایندکس نقطه پایان.

متد toUpperCase() در JS

متد ()toUpperCase حروف کوچک لاتین را به حروف بزرگ تبدیل می کند.

let text = "PNLdev";
text.toUpperCase();

متد toLowerCase() در JS

متد ()toLowerCase حروف بزرگ لاتین را به حروف کوچک تبدیل می کند.

let text = "PNLdev";
text.toLowerCase();

متد concat() رشته در JS

متد ()concat چند رشته را به یک دیگر می چسباند.

let text1 = "JS Tutorial";
let text2 = "PNL";
let text3 = "dev";

text1.concat(" - ", text2, text3);

نکته: همانطور که در نمونه کد بالا دیدید، متد ()concat مانند عملیات جمع رشته ای، عمل می کند.

متد trim() در JS

متد trim()، فضای خالی را از ابتدا و انتهای رشته حذف می کند.

let text = "      PNL dev     ";
text.trim();

نکته: متد trim فقط فضای خالی اطراف رشته را حذف می کند. و روی فاصله بین کلمات تاثیری ندارد.

متد trimStart() در JS

متد trimStart()، فضای خالی ابتدا رشته را حذف می کند.

let text = "      PNL dev     ";
text.trimStart();

متد trimEnd() در JS

متد trimEnd()، فضای خالی انتها رشته را حذف می کند.

let text = "      PNL dev     ";
text.trimEnd();

متد padStart() در JS

متد padStart()، ابتدای رشته را به وسیله رشته دیگر می پوشاند تا به طول معینی برسد.

این متد دو پارامتر دریافت می کند.

  1. پارامتر اول طول رشته را دریافت می کند.
  2. پارامتر دوم یک رشته را دریافت می کند.

برای درک بهتر، نمونه کد زیر را در آزمایشگاه ببینید.

let mobile1 = "9123456789";
let mobile2 = "09123456789";

mobile1.padStart(11, '0');
mobile2.padStart(11, '0');

نکته: پارامتر دوم حتما باید رشته باشد. برای اضافه کردن عدد به پارامتر دوم، حتما عدد را به صورت رشته (با کوتیشن) قرار دهید.

متد padEnd() در JS

متد padEnd()، انتهای رشته را به وسیله رشته دیگر می پوشاند تا به طول معینی برسد.

این متد دو پارامتر دریافت می کند.

  1. پارامتر اول طول رشته را دریافت می کند.
  2. پارامتر دوم یک رشته را دریافت می کند.

برای درک بهتر، نمونه کد زیر را در آزمایشگاه ببینید.

let cart_number1 = "610433";
let cart_number2 = "6104337933721234";

cart_number1.padEnd(16, 'x'); 
cart_number2.padEnd(16, 'x');

نکته: پارامتر دوم حتما باید رشته باشد. برای اضافه کردن عدد به پارامتر دوم، حتما عدد را به صورت رشته (با کوتیشن) قرار دهید.

متد repeat() در JS

 متد ()repeat یک رشته را با تکرار بر می گرداند.

let text = "PNLdev";
text.repeat(2);

متد replace() در JS

 متد ()replace، اولین تطبیق پیدا شده را در رشته با عبارت جدیدی جایگزین می کند.

این متد دو پارامتر دریافت می کند.

  1. پارامتر اول رشته (string) یا عبارت با قاعده (regex)، قبل از جایگزینی را دریافت می کند.
  2. پارامتر دوم رشته جدید را دریافت می کند.

برای درک بهتر، نمونه کد زیر را در آزمایشگاه ببینید.

let text = "Learn HTML and CSS in PNLdev";
text.replace("HTML and CSS", "JS");

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

let text = "for web development JS is required, JS stands in Java Script.";
text.replace("JS", "JavaScript");

نکته: در متد replace، با استفاده از عبارت باقاعده (regex) با اصلاح کننده g (مخفف globaly) می توان تمام مطابقت ها را جایگزین کرد.

let text = "for web development JS is required, JS stands in Java Script.";
text.replace(/JS/g, "JavaScript");

عبارت با قاعده یا Regular Expression به صورت مخفف RegEx یا RegExp هم نوشته می شود. این عبارت ها، استاندارد های از پیش تعریف شده هستند که به کمک آن ها می توان با انعطاف بیشتری رشته ها را بررسی کرد. در JS عبارت های با قاعده در ابتدا و انتهای خود دارای اسلش (/) هستند و بدون کوتیشن نوشته می شوند. حروفی مانند i و g اصلاح کننده (modifier) نامیده می شوند.

نکته: متد replace، حساس به حروف بزرگ و کوچک است.

let text = "for web development JS is required, js stands in Java Script.";
text.replace(/JS/g, "JavaScript");

نکته: در متد replace، با استفاده از عبارت باقاعده (regex) با اصلاح کننده i (مخفف insensitive) می توان بدون حساسیت به حروف بزرگ و کوچک مطابقت ها را جایگزین کرد.

let text = "for web development JS is required, js stands in Java Script.";
text.replace(/JS/gi, "JavaScript");

متد replaceAll() در JS

 متد ()replaceAll، تمام تطبیق های پیدا شده را در رشته با عبارت جدیدی جایگزین می کند.

این متد دو پارامتر دریافت می کند.

  1. پارامتر اول رشته (string) یا عبارت با قاعده (regex)، قبل از جایگزینی را دریافت می کند.
  2. پارامتر دوم رشته جدید را دریافت می کند.
let text = "for web development JS is required, JS stands in Java Script.";
text.replaceAll("JS", "JavaScript");

نکته: متد replaceAll، حساس به حروف بزرگ و کوچک است. 

نکته: در صورت استفاده از عبارت باقاعده در replaceAll، باید حتما از اصلاح کننده g استفاده کنید. در غیر اینصورت ارور بر می گرداند.

متد split() در JS

متد split() (تقسیم کردنرشته را به آرایه تبدیل می کند.

متد split تنها یک پارامتر جداکننده (separator) دریافت می کند.

نکته: پیش نیاز متد split، آشنایی با آرایه ها در JS و حلقه ها در JS است.

let students = "amin, parsa, ehsan";
const array = students.split(",");

نکته: اگر پارامتر جدا کننده یک رشته خالی باشد، هر کارکتر رشته در یک خانه آرایه قرار می گیرد.

let students = "amin, parsa, ehsan";
const array = students.split("");

نکته: اگر پارامتر جدا کننده مشخص نشود, کل رشته در ایندکس 0 آرایه برگشت داده می شود.

خلاصه درس

در این سر فصل با موارد زیر آشنا شدیم:

  • ویژگی length()
  • متد charCodeAt()
  • متد charAt()
  • متد at()
  • متد [ ]
  • متد slice()
  • متد substring()
  • متد substr()
  • متد toUpperCase()
  • متد toLowerCase()
  • متد concat()
  • متد trim()
  • متد trimStart()
  • متد trimEnd()
  • متد padStart()
  • متد padEnd()
  • متد repeat()
  • متد replace()
  • متد replaceAll()
  • متد split()

توسعه دهندگان
احسان اسلامی