بهترین روش های تبدیل مقدار عددی به رشته در جاوا اسکریپت — به زبان ساده

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

1const value = 12345;
2// Concat Empty String
3value + '';
4// Template Strings
5`${value}`;
6// JSON.stringify
7JSON.stringify(value);
8// toString()
9value.toString();
10// String()
11String(value);
12// RESULT
13// '12345'

روش های تبدیل مقدار عددی به رشته در جاوا اسکریپت

در این بخش 5 روش مختلف با 5 مقدار متفاوت را تست می‌کنیم. در ادامه متغیرهایی را که برای تست استفاده می‌شوند می‌بینید:

1const string = "hello";
2const number = 123;
3const boolean = true;
4const array = [1, "2", 3];
5const object = {one: 1 };
6const symbolValue = Symbol('123');
7const undefinedValue = undefined;
8const nullValue = null;

الحاق رشته خالی

1string + ''; // 'hello'
2number + ''; // '123'
3boolean + ''; // 'true'
4array + ''; // '1,2,3'
5object + ''; // '[object Object]'
6undefinedValue + ''; // 'undefined'
7nullValue + ''; // 'null'
8// ⚠️
9symbolValue + ''; // ❌ TypeError

در کد فوق می‌توان دید که این روش در صورتی که مقدار یک Symbol باشد، خطایی تولید می‌کند. در غیر این صورت همه چیز کاملاً خوب به نظر می‌رسد.

رشته‌های قالب‌بندی

1`${string}`; // 'hello'
2`${number}`; // '123'
3`${boolean}`; // 'true'
4`${array}`; // '1,2,3'
5`${object}`; // '[object Object]'
6`${undefinedValue}`; // 'undefined'
7`${nullValue}`; // 'null'
8// ⚠️
9`${symbolValue}`; // ❌ TypeError

نتیجه استفاده از «رشته قالب‌بندی» (Template String) اساساً همان «الحاق رشته خالی» است. در این مورد نیز ممکن است در زمان کار با Symbol بهترین روش نباشد، چون خطای TypeError تولید می‌کند. اگر کنجکاو هستید که این خطای نوع چیست، باید اشاره کنیم که این خطا به صورت زیر است:

TypeError: Cannot convert a Symbol value to a string

()JSON.stringify

1// ⚠️
2JSON.stringify(string); // '"hello"'
3JSON.stringify(number); // '123'
4JSON.stringify(boolean); // 'true'
5JSON.stringify(array); // '[1,"2",3]'
6JSON.stringify(object); // '{"one":1}'
7JSON.stringify(nullValue); // 'null'
8JSON.stringify(symbolValue); // undefined
9JSON.stringify(undefinedValue); // undefined

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

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

()toString

1string.toString(); // 'hello'
2number.toString(); // '123'
3boolean.toString(); // 'true'
4array.toString(); // '1,2,3'
5object.toString(); // '[object Object]'
6symbolValue.toString(); // 'Symbol(123)'
7// ⚠️
8undefinedValue.toString(); // ❌ TypeError
9nullValue.toString(); // ❌ TypeError

بدین ترتیب به پایان فهرست خود رسیده‌ایم که شامل متدهای ()toString و ()String است. از این دو متد می‌توان برای تبدیل مقدار به رشته استفاده کرد. این متدها کار خود را به نحو احسن اجرا می‌کنند به جز این که برای دو نوع undefined و null تولید خطا می‌کنند و باید در مورد این دو نوع آگاهانه عمل کنید.

()String

1String(string); // 'hello'
2String(number); // '123'
3String(boolean); // 'true'
4String(array); // '1,2,3'
5String(object); // '[object Object]'
6String(symbolValue); // 'Symbol(123)'
7String(undefinedValue); // 'undefined'
8String(nullValue); // 'null'

چنان که مشاهده می‌کنید ()String وضعیت‌های null و undefined را به خوبی مدیریت می‌کند. هیچ خطایی رخ نمی‌دهد مگر این که خودتان بخواهید. توجه کنید که پیشنهاد این متد یک پیشنهاد کلی است. شما اپلیکیشن خود را بهتر می‌شناسید و بنابراین می‌توانید بهترین روش برای موقعیت خود را انتخاب کنید.

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

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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

• مجموعه آموزش‌های برنامه‌نویسی جاوا اسکریپت
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش JavaScript ES6 (جاوا اسکریپت)
• جاوا اسکریپت چیست؟ — به زبان ساده
• آموزش جاوا اسکریپت — مجموعه مقالات جامع وبلاگ فرادرس

==