투케이2K

329. (javaScript) [Numeral.js 라이브러리] 자바스크립트 Numeral 라이브러리 format 사용해 지정 된 형식으로 출력 실시 본문

JavaScript

329. (javaScript) [Numeral.js 라이브러리] 자바스크립트 Numeral 라이브러리 format 사용해 지정 된 형식으로 출력 실시

투케이2K 2023. 9. 22. 14:06

[개발 환경 설정]

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

    <!-- ===================================================================================================== -->
    <!-- [CDN 주소 설정] -->
    <!-- ===================================================================================================== -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
    <!-- ===================================================================================================== -->






    <!-- ===================================================================================================== -->
    <!-- [자바스크립트 코드 지정] -->
    <!-- ===================================================================================================== -->
    <script>


        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. numeral.js : 숫자 형식을 지정하고 조작하기 위한 자바스크립트 라이브러리입니다
        -----------------------------------------
        2. numeral.js 사용 시 숫자 형식 포맷 및 출력을 간단하게 할 수 있습니다  
        -----------------------------------------
        3. numeral.js 는 npm 을 통해 설치가 가능 하며, CDN 호출 방식으로도 사용하실 수 있습니다
        -----------------------------------------
        4. 참고 사이트 : 

        http://numeraljs.com/
        -----------------------------------------
        */



        // [html 최초 로드 및 이벤트 상시 대기 실시] 
        window.onload = async function() {
            console.log("");
            console.log("=========================================");
            console.log("[window onload] : [start]");
            console.log("=========================================");
            console.log(""); 


            // -------------------------------------------
            // [1] : numeral 인스턴스 생성 및 format 수행
            // -------------------------------------------
            var one = numeral(1000).format('0,0');
            var two = numeral(10000.1234).format('0.000');
            var three = numeral(1000.234).format('$0,0.00');
            var four = numeral(1024).format('0b');
            var five = numeral(0.974878234).format('0.000%');
            var six = numeral(63846).format('00:00:00');


            // -------------------------------------------
            // [2] : 로그 결과 출력 수행
            // -------------------------------------------
            console.log("");
            console.log("=========================================");
            console.log("[window onload] : [result]");
            console.log("--------------------------------------");
            console.log("[one] : " + one);
            console.log("--------------------------------------");
            console.log("[two] : " + two);
            console.log("--------------------------------------");
            console.log("[three] : " + three);
            console.log("--------------------------------------");
            console.log("[four] : " + four);
            console.log("--------------------------------------");
            console.log("[five] : " + five);
            console.log("--------------------------------------");
            console.log("[six] : " + six);
            console.log("=========================================");
            console.log(""); 

        }; 

        
    </script>
 

[결과 출력]

 

=========================================
[window onload] : [result]
--------------------------------------
[one] : 1,000
--------------------------------------
[two] : 10000.123
--------------------------------------
[three] : $1,000.23
--------------------------------------
[four] : 1KB
--------------------------------------
[five] : 97.488%
--------------------------------------
[six] : 17:44:06
=========================================

 

반응형
Comments