자바스크립트 문자열 자리수 채우기 javascript string padding

자바스크립트에서 일관된 문자열에 일관된 형식의 문자열을 사용하기 위해 padding 을 이용한다. 쉽게 말해 숫자 표시의 경우 우측정렬이 일반적이다. 일반적으로 padding 이 하는 역할은 정해진 문자열 갯수안에서 좌측정렬 또는 우측정렬을 하며 남은 공간은 다른 문자들로 채우는 역할을 한다.

자바스크립트 문자열 자리수 채우기
javascript string padding

화면에 문자열을 출력하거나 데이터베이스 혹은 파일로 문자열을 저장하려고 할 때 문자열의 길이를 일정하게 맞춰야 할 때가 있다.

보통 숫자형식의 문자열을 다룰 때가 자주 그럴 수 있다.

혹은 정해진 자릿수로 문자열의 표기를 보기 편하게 해야 할 때가 있다.

이런 경우 자바스크립트의 padding 기능을 사용하면 정해진 문자열 길이 내에서 문자열들을 규칙적으로 표현할 수 있다.

자바스크립트 padding

자바스크립트에서 padding 은 2종류가 있다.

padStart() 메서드와 padEnd() 메서드이다.

이 둘의 차이는 어떤 문자열을 길이만큼 채울 것이냐 이다.

padStart() 메서드는 정해진 길이만큼 특정 문자열로 채우고 출력할 문자열을 뒤에 출력한다.

우측정렬과 같은 효과를 가진다.

padEnd() 메서든느 정해진 길이만큼 출력할 문자열을 출력하고 나머지 길이에 특정 문자열을 채운다.

좌측정렬과 같은 효과를 가진다.

사용법

자바스크립트 padding 을 사용하는 것은 어렵지 않다.

표현할 문자열의 전체 길이와 출력할 문자열을 인자값으로 넣어주면 된다.

String.padStart(문자열 길이, "빈공간을 채울 문자열");

String.padEnd(문자열 길이, "빈공간을 채울 문자열");

샘플코드

실제로 자바스크립트 패딩을 사용해 본다.

결과가 어떻게 나오는지 눈으로 확인하면 이해가 될 것이다.

위에 있는 간단한 코드를 사용해 본다.

<!DOCTYPE html>
<html>
    <body>

        <h1>자바스크립트 문자열 공백 없애기</h1>

        <script>

            console.log("----------");

            let vStr1 = "YG Ent"
            let vStr2 = "블랙핑크";
            let aStr = ["지수","제니","로제","리사"];
            let vPadString;

            vPadString = vStr1.padStart(10, "_");
            console.log(typeof(vPadString), vPadString.length, vPadString);
            
            vPadString = vStr2.padStart(10, "_");
            console.log(typeof(vPadString), vPadString.length, vPadString);

            for (var lpEach in aStr) { 
                vPadString = aStr[lpEach].padStart(10,"_")
                console.log(typeof(vPadString), vPadString.length, vPadString);
            }
            
            console.log("----------");

            vPadString = vStr2.padEnd(10, "_");
            console.log(typeof(vPadString), vPadString.length, vPadString);

            vPadString = vStr2.padEnd(10, "_");
            console.log(typeof(vPadString), vPadString.length, vPadString);

            for (var lpEach in aStr) { 
                vPadString = aStr[lpEach].padEnd(10,"_")
                console.log(typeof(vPadString), vPadString.length, vPadString);
            }

            console.log("----------");

        </script>
        
    </body>
</html>

우측은 padStart() 메서드를 사용한 것이다.

좌측은 padEnd() 메서드를 사용한 것이다.

정해진 길이만큼 빈 공간을 채울 문자열을 채우고 화면에 문자열을 채우는 것을 볼 수 있다.

여기서 주목할 것은 문자열의 길이는 정해진 수만큼 일정하다는 것이다.

'programming > javascript' 카테고리의 다른 글

자바스크립트 문자열 배열로 만들기 spilt() 메서드 converting string to array (0)	2021.11.13
자바스크립트 문자열 문자 또는 단어 추출하기 extracting string character (0)	2021.11.12
자바스크립트 문자열 공백 제거 빈문자열 없애기 removing javascript whitespace (0)	2021.11.11
자바스크립트 문자열 합치기 using javascript string concat() method (0)	2021.11.10
자바스크립트 문자열 대문자 소문자 변환하기 javascript string upper case lower case (0)	2021.11.08

자바스크립트 문자열 자리수 채우기 javascript string padding