[JavaScript] 문자열을 원하는 길이만큼 특정한 문자로 채워 넣기 (padStart, padEnd 함수) feat.프로그래머스 직사각형 별 찍기/핸드폰 번호 가리기

프로그래머스의 직사각형 별찍기 문제 풀다가 우연히 알게된 함수!

 

핸드폰 번호, 카드 번호, 아이디 일정 길이만큼 보여주고 나머지는 가려줘야하는 기능을 사용할 때에도 유용할 듯 하다.

 

아래는 모질라재단의 함수 설명 글!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd

---

얘를 이용해서 핸드폰 가리기 문제 또한 정규식을 사용하지 않고 편하게 풀 수 있을 듯 하다!

 

우선 js를 이용해 풀어 본 프로그래머스 직사각형 별 찍기 문제이다.

process.stdin.setEncoding('utf8');
process.stdin.on('data', data => {
    for(let row = 0; row <  data.split(" ")[1]; row++)  // 세로 길이
        console.log("".padStart(data.split(" ")[0], "*"));  //가로 길이
});

 

풀이보니까 repeat()이라는 함수를 이용해서 푼 사람도 있던데, 저런건 어떻게 아시는건지 넘 궁금하다...

 

요건 핸드폰 번호 가리기문제

function solution(phone_number) {
    if(20 < phone_number.length || phone_number.length < 4 ) return;

    let slice_end_4_number = phone_number.slice(-4);

    return slice_end_4_number.padStart(phone_number.length, "*");
}

이 문제는 정규식 마스터분이 제출한 풀이가 있던데 어떻게 작성하신건지 대단할 뿐..ㅠㅠ

 

암튼 함수 설명 ㄱㄱ

---

요약: padStart()는 SQL의 LPAD()와 비슷하고, padEnd()는 SQL의 RPAD()와 비슷함

---

짧게 쓰려고 저렇게 변수 선언안하고 지저분하게 쓰긴했는

process.stdin.setEncoding('utf8');
process.stdin.on('data', data => {
    console.log("입력 받은 data >>> ", data);
    const input_data = data.split(" ");
    console.log("split함수를 통해 한칸 공백을 기준으로 문자열을 잘라 배열을 만든다. >>> ", input_data);
    
    const column_length = input_data[0];
    console.log("직사각형 가로의 길이 >>> ", column_length);
    const row_length = input_data[1];
    console.log("직사각형 세로의 길이 >>> ", row_length);
    
    // 세로의 길이만큼 반복문을 돌린다.
    for(let row = 0; row < row_length; row++){
        console.log(row,"번째 행 \n");
        //가로의 길이만큼 *를 찍어서 console에 출력한다.
        console.log("".padStart(column_length, "*"));
    }
});

데... 깔끔하게 정리해보쟙

깔끔하기 전에 구구절절 설명부터 ㅋㅋㅋㅋ

사진임. 이거 위에 있는걸로 코드 복사 가능

이해를 돕기 위한 console추가와 가로 세로 길이를 담은 변수 선언

1. 가로와 세로 길이를 입력 받은 후 공백을 기준으로 배열을 만든다.

2. 세로의 길이 만큼 반복문을 돌려준다.

    3이면 3줄이 출력되어야하므로 세로길이를 이용해 for문 돌리기

 

3. 한 번의 출력이 일어나는데, 이 때!!! padStart라는 함수를 이용해보쟈~~~

---

padStart() 사용하기

"" 여기 있는 문자열의 왼쪽부터 column_length길이 만큼의 문자열을 만들 것인디

기존의 문자열이 원하는 길이만큼 글자보다 짧으면 오른쪽 매개변수의 "*"를 이용해 문자열을 채워준다.

헷갈린다면 다시...

결과

한글 코딩은 죄송합니다... 그래도 이해에 도움이 되었으면 했다...

 

1. 기존의 글자 "123"이 있다.

2. 얘를 총 5자리 글자로 만들고 싶다.

3. 지금은 3자리인데, 모자란 2자리 만큼은 "_" 얘를 이용해서 채우고 싶다.

 

결과: "__123"

 

2번째 매개변수는 필수는 아닌데, 기본 값은 한 칸 공백이다.

아쉽게도 첫번째 매개변수의 숫자가 기존의 문자열의 길이보다 작으면 아무 변화가 일어나지 않는다.

결과

---

padEnd() 사용하기

padEnd() 함수는 padStart()와 반대로 오른쪽에서 원하는 길이만큼 대체 문자를 채워준다.

---

혹시 직접 실행해보고 싶은 분이 있을까봐 지저분한 한글 코딩 첨부 ㅎㅎ

let 기존_문자열 = "123";
let 새로_반환할_문자열_길이 = 5;
let 모자란_길이만큼_대체할_문자 = "_";

console.log(기존_문자열.padStart(새로_반환할_문자열_길이, 모자란_길이만큼_대체할_문자));
console.log(기존_문자열.padEnd(새로_반환할_문자열_길이, 모자란_길이만큼_대체할_문자));

---

궁금해서 하드코딩 느낌으로 작성해봤는데, 어떤 코드가 더 실행관점에서 효율적인 것인지 고민된다...

왼쪽: 반복문 2번          오른쪽: pad함수 사용

뭔가 실행 시간이 큰 차이가 없는 듯하긴 한데...

나의 풀이 들어가면 얘가 채택되어있는 것 보면 평균적인건 pad함수인걸까ㅋㅋㅋㅋ 궁금