[JS/JavaScript] 문자열 나누기 합치기 정해진 글자수 만큼 다른 문자열로 채우기 반복하기 메소드 정리 split, join, repeat, padStart, padEnd

문자열을 활용할 수 있는 다양한 자바스크립트 메서드를 알아보자.

 

문자열을 기준문자 단위로 나눠주는 split 메서드

//split and join
console.log('a+very+nice+string'.split('+')); //['a', 'very', 'nice', 'string']
console.log('Nomad Haven Heaven'.split(' '));//(3) ['Nomad', 'Haven', 'Heaven']

const [firstName, lastName] = 'Nomad Havenheaven'.split(' ');

const newName =['Miss.',firstName, lastName.toUpperCase()].join(' ')
console.log(newName); //Miss. Nomad HAVENHEAVEN

출력화면

(4) ['a', 'very', 'nice', 'string']
(3) ['Nomad', 'Haven', 'Heaven']
Miss. Nomad HAVENHEAVEN

split는 지정한 문자를 기준으로 문자를 나누고 배열에 저장해주는 메서드이다.

split('+')라는 메서드를 통해서 'a+very+nice+string'이라는 문자열을 나눈 뒤 출력하면

결과는 ['a','very','nice','string'] 이라는 배열이다.

해당 배열은 4가지 element로 구성되어있으며 +를 기준으로 나눠진 문자열이 저장된 것이 보인다.

 

split의 좋은점은 오로지 문자 많이 아니라 공백으로도 문자열을 나눌수 있다는 점이다.

split(' ')은 공백을 기준으로 문자열을 나눈 다는 뜻이다.

split(' ')이 적용된 'Nomad haven Heaven' 이라는 문자열을 출력해보자.

element가 3가지인 ['Nomad','Haven','Heaven']라는 배열이 출력되었다.

이는 띄어쓰기를 기준으로 문자열이 배열에 저장된 것이다.

 

const [firstName, lastName] 처럼 split을 통해서 문자열을 나눈뒤 각각 배열의 0번째 인덱스 1번째 인덱스에 적용하는 방법도 있다. 

 

 

 

아래는 이름의 0번째 인덱스 문자를 대문자로 바꿔주는 CpitalizeName 함수이다.  해당 함수는 split 메서드와 toUppercase 메서드를 이용해서 설명한 기능을 실행한다.

const capitalizeName = function(name){
  const names = name.split(' ');
  const namesUpper = [];

  for( const n of names){
  //  namesUpper.push(n[0].toUpperCase() +  n.slice(1));
  namesUpper.push(n.replace(n[0],n[0].toUpperCase()));
  }
console.log(namesUpper.join(' '));
}

capitalizeName('jessica and smith davis')
capitalizeName('nomad haven')

CpitalizedName 이라는 함수에 대입되는 문자열을 우선 띄워쓰기를 기준으로 나눈 다음,

나눠진 문자를 names라는 배열에 대입한다.

 

names의 배열에 있는 element 의 개수만큼 for 반복문을 실행하는데,

for 반복문 동안 names의 0번째 인덱스 문자열의 0번째 문자는 대문자로 교체한다.

0번째 글자가 대문자로 교체된 0번째부터 ~ n번째 인덱스의 문자열들을 namesUpper이라는 배열에 저장한다.

 

반복문이 끝난 뒤  namseUpper 이라는 배열에 있는 문자들을 join 메서드로 합치는데, 합쳐진 문자열 사이에 ' '라는 공백문자를 둔다. 

 

아래는 해당 함수를 사용한 코드를 출력한 것이다.

Jessica And Smith Davis
Nomad Haven

 

 

원하는 글자수 만큼 특수 문자를 채워주는 메서드 padStart, padEnd

만약 10번째 번호중 마지막 세번짜 글자만 보이고 나머지 7개 글자는 * 처리를 하고 싶다면 어떻게 해야할까?

카드의 cvc 번호처럼 말이다. 

 

해당 상황에서 쓸수 있는 메서드 역시 존재한다. padStart 메서드와 padEnd 메서드를 사용하면 된다.

 

//Padding
const message = 'Go to gate 23!'
console.log(message.padStart(20, '+').padEnd(30,'+')); 
console.log('Nomad'.padStart(20,'+').padEnd(30,'+'));

 

++++++Go to gate 23!++++++++++
+++++++++++++++Nomad++++++++++

위의 코드와 출력문을 보자.

'Go to gate 23!' 이라는 문자열에 padStart(20,'+') 를 적용했다.

이 의미는 총 20글자중 'Go to gate 23!'문자열의 문자 개수인  14글자(공백포함)를 제외한 나머지 글자는 앞에 +라는 문자6개를 추가해서 20개를 맞추겠다는 뜻이다.

 

PadStart(맞추고 싶은 글자수,'글자수 맞추기 위해 채울 문자') 를 적용한다면, 글자수를 채울 문자가 앞에서 부터 채워진다.

따라서 ++++++Go to gate 23! 까지의 문자열이 완성된 것이다.

 

이렇게 완성된 문자열 뒤에 .padEnd(30,'+') 이라는 메서드가 적용됐다.해당 메서드는 30개의 글자수를 맞추는데 '++++++Go to gate 23! '의 글자수 20개를 제외한, 나머지 10개 문자는 뒤에 +를 채워서 맞추겠다는 말이다. 

 

따라서  '++++++Go to gate 23!' 뒤편에 +가 10개 붙은 것이 보인다.

 

아래의 +++++++++++++++Nomad++++++++++ 역시 위와 같은 방식을 통해 이해하면 이해가 될 것이다.

 

 

해당 padStart기능을 이용하여 작성된 함수가 maskCreditCard라는 함수다.해당 함수는입력된 번호의 마지막 네글자를 제외하고 나머지는 모두 *로 바꾸는 함수다.

 

해당함수는

slice메서드를 통해서 마지막 4글자를 잘라낸다음 last 변수에 대입힌다.그다음 last 변수에 padStart 메서드를 적용하는데,메서드에서는 str.length를 이용해 알아낸 원래 문자열의 길이만큼, 앞에서 '*'로 채우겠다는 옵션이 적용되었다. 

 

const maskCreditCard  = function(number){
  const str =  number + ''; // 빈문자 더해주면 자료형이 문자열로 변환
  const last = str.slice(-4);
  return last.padStart(str.length, '*');
}

console.log(maskCreditCard(43213829103830)); 
console.log(maskCreditCard(123442342342342));
console.log(maskCreditCard('234534523534523'));

해당 함수를 적용한 코드를 출력하면 아래와 같다.

**********3830
***********2342
***********4523

 

 

문자열을 원하는 수만큼 반복하게 하는 메서드 repeat

자바스크립트 메서드에는 문자열을 원하는 횟수만큼 반복하는 메서드 역시 존재한다.

예를 들어 비행기 방송은 같은 내용을 5번 정도 반복하는데,

해당 방송 내용을 반복하는 함수를 repeat 함수로도 만들 수 있다. 

//Repeat
const message2 = 'Bad weather... All Departures Delayed... ';
console.log(message2.repeat(5)); 

const planesInLine =function(n){
  console.log(`There are ${n} planes in line ${'✈️'.repeat(n)}`);
}

planesInLine(5);
planesInLine(3);
planesInLine(10);

출력화면

Bad weather... All Departures Delayed... Bad weather... All Departures Delayed... Bad weather... All Departures Delayed... Bad weather... All Departures Delayed... Bad weather... All Departures Delayed... 
There are 5 planes in line ✈️✈️✈️✈️✈️
There are 3 planes in line ✈️✈️✈️
There are 10 planes in line ✈️✈️✈️✈️✈️✈️✈️✈️✈️✈️

message2 문자열에 repeat(5)를 적용한뒤 출력하면 해당 문자열이 반복되어 출력되는 게 보인다.

또한 전제 문자열에만 반복을 적용하는 게 아니라, 문자의 일부에만 반복을 적용할 수도 있다.

${'✈️'.repeat(n)} 와 같이 특정 부분에만 메서드를 적용한 것을 봐도 함수가 잘 출력되는게 보인다.