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

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

جدا کردن سه رقم اعداد جاوا اسکریپت – در خیلی از پروژه ها نیاز است که برای خوانایی بهتر رقم ها را به صورت 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;
}


خروجی برنامه

دموی برنامه


دانلود برنامه جداسازی ارقام با JS

لینک کوتاه مقاله

جیست مقاله

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us