آموزش جدا کردن سه رقم اعداد در جاوا اسکریپت
جدا کردن سه رقم اعداد جاوا اسکریپت – در خیلی از پروژه ها نیاز است که برای خوانایی بهتر رقم ها را به صورت 3 رقم 3 رقم از یکدیگر جدا کنیم .
در این آموزش یاد خواهیم گرفت که چگونه با استفاده از وانیلا جی اس ( جاوا اسکریپت خالص ) رقم های بیشتر از 3 رقم مانند 1000 را به صورت 1,000 نمایش دهیم .
فایل index.html برای فرم ورودی عدد
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Rapidcode.iR - سورس کد</title>
<link rel="stylesheet" href="static/css/main.css">
</head>
<body>
<div class="container">
<a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
<input dir="ltr" type="text" id="my-decimal-number" name="my-decimal-number" placeholder="123,985,659">
</div>
<script src="static/js/app.js"></script>
</body>
</html>
فایل app.js برای جدا کردن اعداد
در اسکریپت پایین از ایونت keyup استفاده می کنیم که به صورت real time هر ورودی که کاربر از روی صفحه کلید وارد می کند را به ما برمی گرداند .
از آنجایی که نوع input را بر روی text تنظیم کردیم کاربر امکان اینکه بتواند به جز عدد ( حروف و اَشکال وارد کند ) را دارد بنابراین با تابع Number ورودی را بررسی می کنیم که آیا عدد وارد کرده یا خیر .
در صورتی که کاربرعدد وارد نکرده بود تابع پردازش نخواهد کرد .
const inpNumber = document.getElementById("my-decimal-number");
inpNumber.addEventListener("keyup", handlerSeparateNumbers)
// functions
function funcReverseString(str) {
return str.split('').reverse().join('');
}
// event handlers
function handlerSeparateNumbers(e) {
const thisElement = e.target;
let thisElementValue = thisElement.value;
thisElementValue = thisElementValue.replace(/,/g, "");
if (isNaN(Number(thisElementValue))) {
alert("لطفا از وارد کردن حروف خودداری فرمایید !")
return false;
}
let seperatedNumber = thisElementValue.toString();
seperatedNumber = funcReverseString(seperatedNumber);
seperatedNumber = seperatedNumber.split("");
let tmpSeperatedNumber = "";
j = 0;
for (let i = 0; i < seperatedNumber.length; i++) {
tmpSeperatedNumber += seperatedNumber[i];
j++;
if (j == 3) {
tmpSeperatedNumber += ",";
j = 0;
}
}
seperatedNumber = funcReverseString(tmpSeperatedNumber);
if(seperatedNumber[0] === ",") seperatedNumber = seperatedNumber.replace("," , "");
thisElement.value = seperatedNumber;
}
بروزرسانی : روش دیگری هم برای جدا کردن سه رقمی اعداد وجود دارد که به شکل زیر می باشد .
const number = new Intl.NumberFormat('en-US', {style : "decimal" }).format(987654321);
console.log(number) // 987,654,321
خروجی برنامه
لیست نظرات
سلام واقعا عالی بود. من مدلهای زیادی را جستجو کردم و این تنها مورد اجرایش بود. یکی دیگر از توابعتون تبدیل عدد به حروف هست . میشه این کار را به صورت تلفیقی انجام بدید و نمونه کد آن را بگذارید بطوریکه وقتی تایپ انجام میشه همزمان 3 رقم 3 رقم جدا بشه و نیز بالا یا پایین input box حروف ارقام نمایش داده بشه . از زحماتتون کمال تشکر را دارم.
سلام بخواییم دوتا آیدی رو باهاش این کار رو بکنیم چیکار باید بکنیم؟
معمولا آیدی ها با @ از هم جدا میشن که میتونیم با استفاده از split رشته رو به چندین آرایه تبدیل کنیم و به صورت جداگانه از اون استفاده کنیم .