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

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

چگونه یک کاراکتر را از یک رشته در جاوا اسکریپت استخراج کنیم

بیایید با صحبت در مورد چگونگی استخراج یک کاراکتر از یک رشته شروع کنیم. جاوا اسکریپت سه روش مختلف را برای این منظور ارائه می دهد: charAt() ، at() و charCodeAt() .

نحوه استفاده از charAt(index)

متد charAt() یک شاخص را می پذیرد و کاراکتر آن شاخص را برمی گرداند.

 const str = "Hello World!"; console.log(str.charAt(0)); console.log(str.charAt(8)); console.log(str.charAt(16));

 H r

اگر ایندکس خارج از محدوده باشد، charAt() یک رشته خالی ( "" ) برمی گرداند.

نحوه استفاده at(index)

متد at() با ES2022 به جاوا اسکریپت اضافه شد و بسیار شبیه به charAt() است. شما آن را یک شاخص ارسال می کنید و متد کاراکتر را در آن شاخص برمی گرداند.

 const str = "Hello World!"; console.log(str.at(0)); console.log(str.at(8)); console.log(str.at(16));

 H r undefined

هنگامی که شاخص خارج از محدوده باشد، at() به جای یک رشته خالی undefined برمی گردد.

تفاوت دیگر این است که at() امکان نمایه سازی منفی را می دهد، به این معنی که شاخص -1 آخرین کاراکتر رشته را برمی گرداند، -2 دومین کاراکتر آخر و غیره را برمی گرداند.

 const str = "Hello World!"; console.log(str.at(-1)); console.log(str.at(-2));

 ! d

قبل از at() تنها راه برای انجام این کار از طریق ویژگی length بود.

 const str = "Hello World!"; console.log(str.charAt(str.length - 1)); // The last character console.log(str.charAt(str.length - 2)); // The second last character

 ! d

نحوه استفاده از charCodeAt(index)

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

 const str = "Hello World!"; console.log(str.charCodeAt(0)); console.log(str.charCodeAt(4));

 72 111

نحوه استخراج زیر رشته در جاوا اسکریپت

علاوه بر استخراج یک کاراکتر، جاوا اسکریپت همچنین به شما این امکان را می دهد که یک زیر رشته را با استفاده از متدهای substring() و slice() استخراج کنید.

نحوه استفاده از substring(start, end)

substring() یک زیر رشته را بر اساس شاخص های start (شامل) و end (انحصاری) ارائه شده استخراج می کند و رشته فرعی را به عنوان یک رشته جدید برمی گرداند.

 const str = "JavaScript"; console.log(str.substring(0, 4));

 Java

نمایه end می توان کنار گذاشت، در این صورت رشته فرعی از start تا انتهای رشته استخراج می شود.

 const str = "JavaScript"; console.log(str.substring(4));

 Script

نحوه استفاده از slice(start, end)

slice() بسیار شبیه به substring() است. همچنین یک زیر رشته را بر اساس شاخص های start و end ارائه شده استخراج می کند و رشته فرعی را به عنوان یک رشته جدید برمی گرداند.

 const str = "JavaScript"; console.log(str.slice(0, 4));

 Java

شاخص end را نیز می توان حذف کرد.

 const str = "JavaScript"; console.log(str.slice(4));

 Script

تفاوت این است که slice() شاخص های منفی را می پذیرد. به عنوان مثال، مثال زیر رشته فرعی را از شاخص -10 تا -6 استخراج می کند.

 const str = "JavaScript"; console.log(str.slice(-10, -6));

 Java

نحوه تبدیل رشته به حروف بزرگ یا کوچک در جاوا اسکریپت

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

 const str = "JavaScript"; console.log(str.toUpperCase()); console.log(str.toLowerCase());

 JAVASCRIPT javascript

نحوه اتصال دو رشته به هم در جاوا اسکریپت

ساده ترین راه برای اتصال دو رشته به هم استفاده از عملگر + است:

 const str1 = "Hello"; const str2 = "World!"; const str3 = str1 + " " + str2; console.log(str3);

 Hello World!

همچنین می توانید از متد concat() استفاده کنید:

 const str1 = "Hello"; const str2 = "World!"; const str3 = str1.concat(" ", str2); console.log(str3);

 Hello World!

یا می توانید از حروف الفبای الگو استفاده کنید:

 const str1 = "Hello"; const str2 = "World!"; const str3 = `${str1} ${str2}`; console.log(str3);

 Hello World!

نحوه برش فضاهای سفید اضافی از یک رشته در جاوا اسکریپت

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

جاوا اسکریپت سه روش مختلف ارائه می دهد که به شما امکان می دهد به راحتی فضاهای سفید اضافی را حذف کنید و فقط اطلاعات مفید را حفظ کنید.

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

 const str = " \n\tHello World!\t\n "; console.log(str.trimStart()); console.log(str.trimEnd()); console.log(str.trim());

 Hello World! Hello World! Hello World!

نحوه اضافه کردن Padding به رشته در جاوا اسکریپت

متدهای padStart() و padEnd() می توانند برای قرار دادن کاراکترها یا زیر رشته ها در ابتدا یا انتهای رشته اصلی استفاده شوند.

هر دو روش دو آرگومان length و یک رشته فرعی دارند. رشته فرعی چندین بار تکرار خواهد شد، تا زمانی که رشته حاصل به طول هدف برسد.

 const str = "123"; console.log(str.padStart(5, "0")); console.log(str.padEnd(5, "0"));

 00123 12300

اگر رشته فرعی باعث شود که رشته حاصل از طول هدف بیشتر شود، تنها بخشی از آن رشته فرعی استفاده خواهد شد.

 const str = "123"; console.log(str.padStart(8, "ok"));

 okoko123

توجه داشته باشید که زیر رشته "ok" دو بار تکرار می شود، اما برای بار سوم، باعث می شود که رشته حاصل از حد طول بیشتر شود، پس فقط "o" برای لایه نهایی استفاده می شود.

چگونه یک رشته را در جاوا اسکریپت تکرار کنیم

repeat() یک رشته جدید را با تعداد کپی مشخص شده از رشته اصلی برمی گرداند.

 const str = "123"; console.log(str.repeat(3));

 123123123

نحوه تقسیم رشته به آرایه در جاوا اسکریپت

متد split() رشته را بر اساس کاراکتر داده شده تقسیم می کند و نتیجه را در یک آرایه برمی گرداند. این روش زمانی که نیاز به استخراج اطلاعات از یک URL دارید بسیار مفید است.

به عنوان مثال، به این صورت است که می توانید اسلگ یک پست وبلاگ را استخراج کنید:

 const url = "http://www.example.com/blog/example-article"; let arr = url.split("/"); console.log(arr); let slug = arr[4]; console.log(slug);

 [ 'http:', '', 'www.example.com', 'blog', 'example-article' ] example-article

چگونه در یک رشته در جاوا اسکریپت جستجو کنیم

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

نحوه استفاده از indexOf() و lastIndexOf()

متد indexOf() اندیس اولین رخداد کاراکتر داده شده را برمی گرداند.

متدهای lastIndexOf() اندیس آخرین رخداد کاراکتر داده شده را برمی گرداند.

 const str = "Hello World"; console.log(str.indexOf("l")); console.log(str.lastIndexOf("l"));

 2 9

اگر مطابقت پیدا نشود، هر دو روش -1 را برمی‌گردانند.

 const str = "Hello World"; console.log(str.indexOf("x")); console.log(str.lastIndexOf("x"));

 -1 -1

نحوه استفاده includes()

متد includes() تست می کند که آیا رشته دارای کاراکتر یا زیررشته داده شده است یا خیر. اگر رشته فرعی پیدا شود true برمی گرداند، در غیر این صورت false برگردانده می شود.

 const str = "JavaScript"; console.log(str.includes("S")); console.log(str.includes("Script")); console.log(str.includes("script"));

 true true false

نحوه استفاده از startsWith() و endsWith()

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

 const str = "JavaScript"; console.log(str.startsWith("Java")); console.log(str.endsWith("Java")); console.log(str.startsWith("Script")); console.log(str.endsWith("Script"));

 true false false true

چگونه در یک رشته با استفاده از Regex در جاوا اسکریپت جستجو کنیم

اما اگر به چیزی قدرتمندتر نیاز داشته باشید چه؟ به عنوان مثال، متدهای indexOf() و lastIndexOf() فقط اولین و آخرین رخدادهای زیررشته را برمی گرداند، اما اگر نیاز به جستجوی همه آنها داشتید چه؟

یا اگر به جای یک رشته فرعی، نیاز به جستجوی یک الگو، مانند شماره تلفن یا برچسب قیمت داشته باشید، چه؟

این را می توان با ترکیب متدهای رشته ای با Regex که مخفف عبارت منظم است به دست آورد. این یک ابزار برنامه نویسی است که به شما امکان می دهد الگوها را در یک رشته توصیف کنید. Regex یک نحو بسیار مرموز دارد، اما گاهی اوقات می تواند بسیار مفید باشد.

نحوه استفاده از search()

متد search() مشابه indexOf() که در مورد آن بحث کردیم کار می کند. همچنین اولین رخداد زیررشته یا الگوی منطبق را برمی گرداند، با این تفاوت که search() به شما اجازه می دهد یک عبارت منظم را ارسال کنید.

مثال زیر، /(?<=\$)\d\d?\d?\d?/ ، یک برچسب قیمت را در رشته جستجو می کند، که باید با علامت دلار ( $ ) شروع شود و 1 دنبال شود. تا 4 رقم عددی

 const str = "The laptop costs $1500. The tablet costs $1000."; console.log(str.search("1500")); console.log(str.search(/(?<=\$)\d\d?\d?\d?/)); console.log(str.search(/(?<=\$)\d\d?\d?\d?/g));

 18 18 18

توجه داشته باشید که پرچم سراسری ( g ) هیچ تأثیری در search() ندارد و همچنان اولین اتفاق مطابقت را برمی‌گرداند.

نحوه استفاده از match() و matchAll()

در مقایسه با search() ، متد match() اطلاعات بسیار بیشتری را برمی‌گرداند که می‌توانید با آن کار کنید، مانند زیر رشته واقعی که با الگو مطابقت دارد، فهرستی که مطابقت پیدا می‌شود و موارد دیگر.

 const str = "The laptop costs $1500. The tablet costs $1000."; console.log(str.match(/(?<=\$)\d\d?\d?\d?/)); console.log(str.match(/(?<=\$)\d\d?\d?\d?/g));

 [ '1500', index: 18, input: 'The laptop costs $1500. The tablet costs $1000.', groups: undefined ] [ '1500', '1000' ]

با اضافه کردن یک پرچم سراسری، می‌توانید کاری کنید که match() همه زیررشته‌های منطبق را به‌جای اولین مورد بازگرداند.

همچنین یک متد matchAll() وجود دارد که شما را مجبور می کند از پرچم جهانی استفاده کنید. بدون آن، متد یک TypeError برمی گرداند.

matchAll() یک شی قابل تکرار را برمی گرداند که می توانید با استفاده for of آن را تکرار کنید.

 const str = "This laptop costs $1500. The tablet costs $1000."; const prices = str.matchAll(/(?<=\$)\d\d\d\d/g); for (let price of prices) { console.log(price); }

 [ '1500', index: 19, input: 'This laptop costs $1500. The tablet costs $1000.', groups: undefined ] [ '1000', index: 43, input: 'This laptop costs $1500. The tablet costs $1000.', groups: undefined ]

نحوه جایگزینی الگوی رشته در جاوا اسکریپت

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

 const str = "JavaScript javaScript Javascript"; console.log(str.replace(/JAVASCRIPT/i, "javascript")); console.log(str.replace(/JAVASCRIPT/gi, "javascript"));

 javascript javaScript Javascript javascript javascript javascript

به‌طور پیش‌فرض، replace() فقط با اولین رخداد الگو مطابقت دارد و جایگزین آن می‌شود، اما با پرچم سراسری، می‌توانید همه الگوهای همسان را جایگزین کنید.

نتیجه

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

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

charAt(index) : کاراکتر در شاخص مشخص شده را از یک رشته استخراج می کند.

at(index) : کاراکتر را در نمایه مشخص شده بازیابی می کند، از نمایه سازی منفی پشتیبانی می کند.

charCodeAt(index) : کد UTF-16 کاراکتر را در نمایه مشخص شده برمی‌گرداند.

substring(start, end) : بخشی از رشته را بین شاخص های شروع (شامل) و پایان (انحصاری) استخراج می کند.

slice(start, end) : مشابه substring() بخشی از رشته را بین فهرست های start (شامل) و end (exclusive) استخراج می کند، اما از نمایه سازی منفی پشتیبانی می کند.

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

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

concat() : دو یا چند رشته را به هم متصل می کند.

trimStart() : فضای سفید را از ابتدای رشته حذف می کند. از جمله فضاها، برگه‌ها و خطوط جدید.

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

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

padStart(length, substring) : شروع یک رشته را با یک رشته دیگر (در صورت نیاز چندین بار) تا زمانی که رشته به طول داده شده برسد، قرار می دهد.

padEnd(length, substring) : انتهای رشته را با یک رشته دیگر (در صورت نیاز چندین بار) تا زمانی که رشته به طول داده شده برسد، قرار می دهد.

repeat(count) : رشته جدیدی را برمی گرداند که حاوی تعداد مشخصی از کپی های رشته اصلی است.

split(separator) : رشته را به آرایه‌ای از زیررشته‌ها تقسیم می‌کند و با استفاده از جداکننده مشخص شده محل تقسیم را تعیین می‌کند.

indexOf(searchValue) : شاخص اولین وقوع رشته فرعی مشخص شده را برمی گرداند. اگر پیدا نشد -1 را برمی گرداند.

lastIndexOf(searchValue) : ایندکس آخرین رخداد زیررشته مشخص شده را برمی‌گرداند. اگر پیدا نشد -1 را برمی گرداند.

includes(searchValue) : تعیین می کند که آیا رشته حاوی زیررشته مشخص شده است، true یا false را برمی گرداند.

startsWith(searchValue) : تحلیل می کند که آیا رشته با زیررشته مشخص شده شروع می شود.

endsWith(searchValue) : تحلیل می کند که آیا رشته با رشته فرعی مشخص شده به پایان می رسد.

search(regexp) : جستجوی یک الگوی رشته ای که می تواند توسط Regex تعریف شود. شاخص اولین وقوع مسابقه یا -1 را در صورت یافت نشدن برمی‌گرداند.

match(regexp) : جستجوی یک الگوی رشته ای که توسط یک Regex تعریف می شود. اگر یک پرچم سراسری گنجانده شود، همه موارد رخداد الگو را برمی گرداند.

matchAll(regexp) : یک شی تکرار شونده را برمی‌گرداند که حاوی تمام نتایج مطابق با یک رشته با یک عبارت منظم جهانی است.

replace(regexp, newSubstr) : رخدادهای یک الگو (که توسط یک عبارت منظم مشخص شده است) را با یک زیررشته جدید جایگزین می کند.

اگر می خواهید درباره جاوا اسکریپت و توسعه وب بیشتر بدانید، دوره جدید من را در TheDevSpace.io تحلیل کنید.

خبرکاو