رشته ها در JavaScript

در این مقاله ما به رشته ها در JavaScript می پردازیم . با کیهان وب همراه باشید .

پیش نیازها: سواد اولیه کامپیوتر، درک اولیه HTML و CSS، درک جاوا اسکریپت چیست.

قدرت کلمات

کلمات برای انسان ها بسیار مهم هستند ، آنها بخش بزرگی از نحوه ارتباط ما هستند. از آنجایی که وب یک رسانه عمدتاً مبتنی بر متن است که به انسان اجازه می دهد تا با هم ارتباط برقرار کند و اطلاعات را به اشتراک بگذارد؛ کنترل کلماتی که روی آن ظاهر می شود برای ما مفید است. HTML ساختار و معنا را برای متن ما فراهم می کند. CSS به ما اجازه می دهد تا به طور دقیق به آن استایل دهیم.

تقریباً همه برنامه‌هایی که تاکنون در این دوره به شما نشان داده‌ایم، شامل دستکاری رشته‌ها در JavaScript هستند.

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

ایجاد رشته:

۱. برای شروع، خطوط زیر را وارد کنید:

const string = “The revolution will not be televised.”;

console.log(string);

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

۲. اگر این کار را انجام ندهید، یا یکی از نقل قول ها را از دست بدهید، با خطا مواجه می شوید. سعی کنید خطوط زیر را وارد کنید.

این خطوط کار نمی کنند زیرا هر متنی بدون نقل قول در اطراف آن یک نام متغیر، نام ویژگی، یک کلمه رزرو شده یا مشابه فرض می شودبروزر(مرورگر) نتواند آن را پیدا کند، یک خطایی ایجاد می‌شود (به عنوان مثال «از دست رفته؛ قبل از عبارت»). مرورگر بتواند ببیند یک رشته از کجا شروع می‌شود. با یک خطا شکایت می‌کند (با «رشته‌های لغو نشده»).

۳. شما اگر قبلاً رشته متغیر را تعریف کرده باشید، موارد زیر کار خواهد کرد.اکنون آن را امتحان کنید:

const badString = string;

console.log(badString);

badString اکنون به اندازه رشته تنظیم شده است.

نقل قول های تکی در مقابل نقل قول های دوگانه

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

const sgl = ‘Single quotes.’;

constt dbl = “Double quotes”;

console.log(sgl);

cconsole.log(dbl);

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

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

const sglDbl = ‘Would you eat a “fish supper”?’;

const dblSgl = “I’m feeling blue.”;

console.log(sglDbl);

console.log(dblSgl);

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

این ما را به خوبی به موضوع بعدی هدایت می کند.

فرار از کاراکترها در یک رشته

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

const bigmouth = ‘I’ve got no right to take my place…’;

console.log(bigmouth);

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

رشته های به هم پیوسته

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

به جای استفاده از علامت های نقل قول تک یا دوتایی (‘ یا “)، از کاراکترهای بک تیک (`) استفاده می کنید:

const greeting = `Hello`;

این می‌تواند درست مانند یک رشته معمولی کار کند، به جز اینکه می‌توانید متغیرهایی را در آن قرار دهید، که در داخل نویسه‌های { }$ پیچیده شده‌اند، و مقدار متغیر در نتیجه درج می‌شود:

const name = “Chris”;

const greeting = `Hello, ${name}`;

console.log(greeting); // “Hello, Chris”

برای به هم پیوستن دو متغیر می توانید از همین تکنیک استفاده کنید:

const one = “Hello, “;

const two = “how are you?”;

cconst joined = `${one}${two}`;

console.log(joined); // “Hello, how are you?”

 Concatenation in context(الحاق در زمینه)

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

<button>Press me</button>

const button = document.querySelector(“button”);

function greet() {

  const name =prompt(“What is your name?”);

  alert(`Hello ${name}, nice to see you!`);

}

button.addEventListener(“click”, greet);

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

الحاق با استفاده از “+”

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

const greeting = “Hello”;

const name = “Chris”;

console.log(greeting + “, “ + name); // “Hello, Chris”

با این حال، الفبای قالب معمولا کد خواناتری به شما می دهد:

const greeting = “Hello”;

const name = “Chris”;

console.log(`${greeting}, ${name}`); // “Hello, Chris”

اعداد در مقابل رشته ها 

const name =“Front “;

const number = ۲۴۲;

console.log(`${name}${number}`); // “Front 242”

ممکن است انتظار داشته باشید که این یک خطا را برگرداند، اما به خوبی کار می کند. تلاش برای نشان دادن یک رشته به عنوان یک عدد واقعا منطقی نیست، اما نشان دادن یک عدد به عنوان یک رشته انجام می شود.

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

1.شی Number در صورت امکان، هر چیزی را که به آن ارسال می شود به عدد تبدیل می کند. موارد زیر را امتحان کنید:

const myString = “۱۲۳”;

const myNum = Number(myString);

console.log(typeof myNum);

2.هر عدد دارای متدی به نام ()toString است که آن را به رشته معادل تبدیل می کند. این را امتحان کنید:

const myNum2 = ۱۲۳;

const myString2 = myNum2.toString();

console.log(typeof myString2);

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

می‌توانید عبارات جاوا اسکریپت را در قالب‌های تحت اللفظی قالب، و همچنین متغیرهای ساده قرار دهید، و نتایج در نتیجه گنجانده می‌شود:

const song = “Fight the Youth”;

constt score = ۹;

const highestScore = ۱۰;

const output = `I like the song ${song}. I gave it a score of${

  (score / highestScore) * ۱۰۰

}%.`;

console.log(output); // “I like the song Fight the Youth. I gave it a score of 90%.”

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

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

const output = `I like the song.

I gave it a score of 90%.`;

console.log(output);

/*

I like the song.

I gave it a score of 90%. */

برای داشتن خروجی معادل با استفاده از یک رشته معمولی، باید کاراکترهای شکست خط (n) را در رشته قرار دهید:

const output = “I like the song.nI gave it a score of 90%.”;

console.log(output);

/*

I like the song.

I gave it a score of 90%.

*/

نتیجه

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