تبدیل رشته به عدد در جاوا اسکریپت – به زبان ساده + مثال و کد

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

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

روش‌های زیادی برای تبدیل متغیر رشته‌ای به عدد در جاوا اسکریپت وجود دارد که بیشتر این روش‌ها روی استفاده از توابع جاوا اسکریپت مختلف و انجام عملیات ریاضی روی رشته‌ها (استرینگ | String) متمرکز شده‌اند. در این رابطه بسیار مهم است که کاربر روش مناسبی را بر اساس نیازهای خاص و نوع داده خود انتخاب کند تا از نتایج دقیق و مورد انتظار در برنامه‌های جاوا اسکریپت اطمینان حاصل کند. با کمک این روش‌ها کاربر می‌تواند در موقعیت‌های مختلف برنامه‌ نویسی، تبدیل رشته به عدد را به طور مؤثر مدیریت کند. روش‌های موردبحث در مطلب پیش رو به صورت موارد زیر هستند:

1. استفاده از تابع Number()‎
2. استفاده از تابع parseInt() ‎
3. استفاده از تابع parseFloat()‎
4. استفاده از عملگر unary plus (+) ‎
5. ضرب رشته در عدد1
6. تقسیم رشته به عدد1
7. کم کردن عدد 0از رشته
8. استفاده از عملگر bitwise NOT (~)‎
9. استفاده از تابع Math.floor()‎
10. استفاده از تابع Math.ceil()‎
11. استفاده از تابع ‎Math.round()

بهترین روش های تبدیل استرینگ به عدد در جاوا اسکریپت چیست؟

هر روش ویژگی‌های خاص خود را دارد و برای سناریوهای مختلف مناسب است. برخی از روش‌ها مانند «parseInt» و «parseFloat» به‌صراحت برای تبدیل رشته‌ها به اعداد طراحی شده‌اند، در حالی که برخی دیگر، مانند عملگر «بیتی NOT»، روش‌های غیرمتعارفی برای رسیدن به نتیجه مشابه هستند. در ادامه تمامی روش‌های گفته شده آموزش داده خواهند شد.

تبدیل رشته به عدد در جاوا اسکریپت با استفاده از تابع Number

در جاوا اسکریپت می‌توان با استفاده از تابع Number()‎رشته را به عدد تبدیل کرد. این تابع راهی راحت و ساده برای انجام چنین تبدیل‌هایی محسوب می‌شود که مراحل این تبدیل در ادامه آمده است. برای این هدف ابتدا متغیر رشته‌ای به نام quantity که مقدار 12 را به خود اختصاص داده به صورت زیر تعریف می‌شود:

اگر نوع متغیر با استفاده از عملگر typeofبررسی شود، نوع stringرا برمی گرداند:

خروجی دستور بالا در کنسول به صورت زیر است:

برای تبدیل رشته به عدد در جاوا اسکیپت، باید به سادگی از تابع Number()‎به صورت زیر استفاده کرد:

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

توجه به این نکته مهم است که اگر کاربر بخواهد رشته‌ای را به عدد تبدیل کند ولی این رشته به عنوان عدد نتواند تفسیر شود، تابع Number()‎مقدار NaNرا بازمی‌گرداند که مثال زیر این موضوع را نشان می‌دهد:

خروجی کد بالا در کنسول مرورگر به صورت زیر است:

تابع Number()‎ابزار ارزشمندی برای تبدیل رشته به عدد در جاوا اسکریپت است. با این حال، باید هنگام استفاده از آن احتیاط کرد مخصوصا اگر ورودی‌هایی داشته باشیم که مقادیر عددی معتبری نشان دهند زیرا ممکن است منجر به خروجی NaNشوند. برای این منظور همیشه باید ورودی کاربر تأیید شود یا بررسی‌هایی انجام شود تا این اطمینان به وجود آید که رشته می‌تواند به طور ایمن، قبل از استفاده از تابع Number()‎تبدیل به عدد شود تا از رفتار غیرمنتظره در کد جلوگیری صورت بگیرد.

تبدیل رشته به عدد در جاوا اسکریپت با استفاده از تابع parseInt

روش دیگری برای تبدیل رشته به عدد در جاوا اسکریپت، استفاده از تابع parseInt()است. برخلاف تابع Number()‎، parseInt()به کاربر اجازه می‌دهد نوعی مبنای اختیاری را تعیین کند که نشان‌دهنده پایه در سیستم اعداد است (یعنی سیستم اعداد مورد استفاده برای شمارش و بیان مقادیر). در ادامه مثالی برای نشان دادن نحوه تبدیل رشته به عدد با استفاده ازparseInt()آورده شده که برای این کار فرض می‌شود که دوباره رشته quantityدارای مقدار 12است:

برای تبدیل رشته quantityبه عدد، از تابع parseInt()در مبنای 10 استفاده می‌شود که نشان‌دهنده سیستم اعشاری است:

متغیر quantityAsNumberاکنون دارای مقدار عددی 12است. اگر نوع آن با استفاده از عملگر typeofبررسی شود، numberرا بازمی‌گرداند:

خروجی کد بالا به صورت زیر است:

حال، بیایید بررسی کنیم که اگر سعی شود متغیر quantityبه مقدار 12.99تغییر و از parseInt()برای تبدیل آن استفاده شود، چه اتفاقی می‌افتد؟

خروجی کد بالا به صورت زیر است:

نتیجه استفاده از parseInt()با مقدار 12.99عدد 12است، نه 12.99. این رفتار به این دلیل رخ می‌دهد که parseInt()رشته را به عددی صحیح تبدیل خواهد کرد. اگر نیاز به حفظ اعشار و گرفتن عدد ممیز شناور باشد، باید به‌جای parseInt()از parseFloat() ‎استفاده کرد.

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

تبدیل رشته به عدد در Javascript با استفاده از parseFloat

در جاوا اسکریپت، تابعparseFloat()برای تبدیل رشته به عدد ممیز شناور استفاده می‌شود. برخلاف parseInt()که رشته را به عددی صحیح تبدیل می‌کند، parseFloat()مقادیر اعشاری را حفظ کرده و آن را برای مدیریت اعداد با مقادیر کسری مناسب خواهد کرد.

در زیر نحوه استفاده از parseFloat()برای تبدیل رشته به عدد بررسی شده است. برای شروع، بیایید یک متغیر رشته‌ای به نام quantityبا مقدار 12.99در نظر بگیریم:

با استفاده از parseFloat()، می‌توان رشته quantityرا به عدد ممیز شناور به صورت زیر تبدیل کرد:

متغیر quantityAsFloat اکنون دارای عدد ممیز شناور 12.99است. اگر نوع آن با استفاده از عملگر typeofبررسی شود، numberرا بازمی‌گرداند:

خروجی دستور بالا در کنسول مرورگر به صورت زیر خواهد بود:

توجه به این نکته ضروری است که parseFloat()فضاهای خالی و انتهایی رشته را به خوبی مدیریت کرده و همچنان آن را به عدد ممیز شناور تبدیل می‌کند:

با این حال، اگر اولین کاراکتر رشته را نتوان به عدد تبدیل کرد، parseFloat()مقدار NANرا بازمی‌گرداند که مثال زیر این موضوع را بیان می‌کند:

خروجی کد بالا در کنسول مرورگر به صورت زیر است:

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

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

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

با اعمال عملگر +به رشته quantityبه صورت زیر، می‌توان آن را به مقدار عددی تبدیل کرد:

رشته quantityاکنون با موفقیت به عدد تبدیل شده است. اگر نوع نتیجه با استفاده از عملگر typeofبررسی شود numberرا بازمی‌گرداند:

خروجی دستور بالا در کنسول مرورگر به صورت تصویر زیر است:

عملگر یکانی جمع همچنین می‌تواند اعداد ممیز شناور را در رشته‌ها مدیریت کند که مثال زیر این موضوع را بیان می‌کند:

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

اگر رشته را نتوان به عدد تبدیل کرد، نتیجه NaNبازگردانده خواهد شد:

خروجی دستور بالا به صورت تصویر زیر است:

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

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

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

نحوه تبدیل رشته به عدد در جاوا اسکریپت با ضرب رشته در عدد ١

در جاوا اسکریپت، می‌توان با استفاده از عملیات ریاضی پایه، رشته را به عدد تبدیل کرد. تکنیک ضرب رشته در عدد 1یکی از این روش‌های تبدیل استرینگ به عدد است. این تکنیک ساده به کاربر امکان می‌دهد نمایش عددی از رشته را بدست آورد. برای نشان دادن این موضوع بیایید با همان متغیر رشته‌ای quantityبا مقدار 12کار را شروع کنیم. برای تبدیل رشته quantityبه عدد، می‌توان آن را در 1ضرب کرد. مانند مثال زیر:

وقتی مقدار quantityدر عدد 1ضرب شود، جاوا اسکریپت قبل از انجام عملیات ریاضی، رشته را به صورت داخلی به عدد تبدیل می‌کند. در نتیجه، کنسول عدد 12را نمایش می‌دهد. برای این هدف اگر نوع نتیجه را با استفاده از عملگر typeofبررسی کنیم، numberرا بازمی‌گرداند:

خروجی دستور بالا به صورت زیر خواهد بود:

باز هم اگر رشته را نتوان به عدد تبدیل کرد، عملیات ریاضی کار نخواهد کرد و NaNرا بازمی‌گرداند:

این روش همان‌طور که در مثال زیر نشان داده شده است، برای اعداد ممیز شناور نیز کاربر دارد.

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

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

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

خروجی کد بالا در کنسول مرورگر به صورت زیر است:

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

تبدیل String به عدد در جاوا اسکریپت با کم کردن عدد صفر از رشته

یکی دیگر از عملیات‌های ریاضی در جاوا اسکریپت که با استفاده از آن امکان تبدیل استرینگ به عدد وجود دارد عملیات کم کردن عدد 0از رشته مد نظر است که برای نشان دادن این مفهوم از همان مثال بالا این بار به صورت سینتکس زیر استفاده می‌شود:

وقتی 0از مقدار رشته مد نظر مانند مثال فوق کم شود، جاوا اسکریپت قبل از انجام عملیات تفریق، رشته را به صورت خودکار به عدد تبدیل می‌کند. در نتیجه کنسول عدد 19را نمایش می‌دهد. اگر نوع نتیجه با استفاده از عملگر typeofبررسی شود، بازهم کنسول مرورگر numberرا بازمی‌گرداند. مانند تصویر زیر:

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

 تبدیل رشته به عدد در Javascript با عملگر بیتی NOT

در جاوا اسکریپت، می‌توان با استفاده از «عملگر بیتی NOT (~)» رشته را به عدد تبدیل کرد. عملگر NOTبیت‌های عملوند خود را معکوس کرده و نتیجه را به عدد صحیح ٣٢ بیتی علامت دار تبدیل می‌کند.

خروجی کد بالا در کنسول مرورگر به صورت زیر است:

با این حال، روش رایج‌تر برای تبدیل رشته به عدد استفاده از دو عملگر بیتی (~~) است که به طور مؤثر عملیات زیر را انجام می‌دهد:

‎در زیر این روش را با همدیگر بررسی خواهیم کرد. برای این هدف فرض می‌شود که رشته quantityدارای مقدار 19است.

برای تبدیل رشته quantityبه عدد با استفاده از عملگر بیتی NOT، می‌توان از دو عملگر بیتی NOTبه صورت زیر استفاده کرد:

دو عملگر بیتی NOTبا انجام عمل -(x + 1)رشته را به عدد تبدیل می‌کنند که عدد 19 را در خروجی تولید می‌کند. این بار هم اگر نوع نتیجه با استفاده از عملگر typeofبررسی شود خروجی numberخواهد بود:

خروجی دستور بالا در کنسول مرورگر این بار به صورت زیر خواهد بود:

این روش برای اعداد ممیز شناور کار نمی‌کند زیرا نتیجه یک عددی صحیح خواهد بود و این به این دلیل است که عملیات بیتی روی اعداد صحیح کاربرد دارد:

اگر کاربر سعی کند از این روش روی کاراکترهای غیرعددی بهره بررد، نتیجه 0خواهد بود زیرا عملیات بیتی NOTنمی‌تواند رشته‌های غیرعددی را تبدیل کند. مثال زیر برای بیان این مفهوم است:

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

خروجی دستور بالا این بار در کنسول مرورگر به صورت زیر است:

در حالی که عملگر بیتی NOTمی‌تواند برای تبدیل رشته به عدد در جاوا اسکریپت استفاده شود، به دلیل محدودیت‌ها و مشکلات احتمالی با مقادیر زیاد، رایج‌ترین یا توصیه شده‌ترین روش نیست. بهتر است از روش‌های تبدیل دیگری که قبلاً بحث شد، استفاده شود زیرا آن‌ها نتایج قابل پیش‌بینی و قابل اعتمادتری را برای تبدیل رشته به عدد در اکثر موارد ارائه می‌کنند.

تبدیل رشته به عدد در جاوا اسکریپت با استفاده از تابع Math.floor

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

خروجی کد بالا در کنسول مرورگر به صورت زیر است:

مانند مثال‌های قبلی، اگر کاربر سعی کند از Math.floor()‎روی کاراکترهای غیرعددی بهره بربرد، نتیجه NaN خواهد بود زیرا تابع فقط انتظار ورودی عددی را دارد:

در حالی که می‌توان از Math.floor()‎برای انجام تبدیل رشته به عدد در جاوا اسکریپت استفاده کرد اما این روش معمولی برای این منظور نیست. این تابع اساساً برای عملیات گرد کردن ریاضی طراحی شده و استفاده از آن صرفاً برای تبدیل رشته به عدد ممکن است منجر به نتایج غیرمنتظره شود. در عوض، باید تکنیک‌های مناسب‌تری را برای این هدف به کاربرد که در بالا این تکنیک‌ها آموزش داده شده‌اند.

تبدیل String به عدد در Javascript با استفاده از تابع Math.ceil

استفاده از تابع Math.ceil()نیز می‌تواند رشته را به عدد تبدیل کند و در این مورد عدد به نزدیک‌ترین عدد صحیح گرد خواهد شد. در واقع در این روش گرد کردن به بالا است و عدد را به سقف آن عدد اعشار گرد خواهد کرد. برای نشان دادن روش استفاده از Math.ceil()، اجازه دهید کار با متغیر رشته‌ای به نام quantityبا مقدار 7.18شروع کنیم:

خروجی کد بالا در کنسول مرورگر به صورت زیر است:

تمامی شرایط تابع Math.floor()‎برای تابع Math.ceil()هم صدق می‌کند.

تبدیل String به Number در Javascript با استفاده از تابع Math.round

به طور مشابه، می‌توان از تابع Math.round()برای گرد کردن عدد به نزدیک‌ ترین عدد صحیح استفاد کرد و در واقع روشی برای گرد کردن و تبدیل رشته به عدد است. این روش گرد کردن عدد اگر اولین عدد قسمت اعشار از 5 به بالا باشد به سمت سقف و در غیر این صورت به سمت کف عدد را گرد می‌کند. مثال زیر نحوه استفاده از این روش را نشان می‌دهد:

با اعمال تابعMath.round()روی رشته quantity، می‌توان آن را به عدد تبدیل کرده و به نزدیکترین عدد صحیح گرد کرد. حال اگر همین روش بالا این بار برای مقدار 6.5به کار گرفته شود مقدار چه تغییری می‌کند؟

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

سخن پایانی

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

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