42-2. String 내장 메소드를 응용해보기

안녕하세요. 박기린 입니다.

저번 글에 이어서 String 내장 메소드에 대해 더 깊이 알아보겠습니다.

(꼭 'https://arnopark.tistory.com/534' 이 글을 읽은 후에 본문을 읽어주시길 바랍니다.)

 

 

Split and Join

String의 문자들을 분리해서 Array에 저장하거나, Array에 따로 담겨진 String을 하나로 이어줄 수 있습니다.

 

Split

console.log('a+very+nice+string'.split('+')); // [a, very, nice, string]
console.log('giraffe Park'.split(' '));

String.prototype.split('나누고자 하는 String') : String을 '나누고자 하는 String'을 기준으로 나눈 후에 Array에 담아서 return 합니다.

 

 

const [firstName, lastName] = 'giraffe Park'.split(' '); // destructuring으로 이름과 성을 집어넣기
console.log(firstName, lastName);

Split 한 다음에 Array Destructuring을 이용해서 바로 변수에 담아줄 수 있습니다.

 

 

 

Join

const [firstName, lastName] = 'giraffe Park'.split(' ');

const newName = ['Mr.', firstName, lastName.toUpperCase()].join(' ');
console.log(newName);

String.prototype.join('붙일 때 사이에 넣고자 하는 String') : String 요소들로 이루어진 Array를 하나의 String으로 붙여줍니다. 그때, 각 요소 사이에 '붙일 때 사이에 넣고자 하는 String'을 넣어줍니다.

 

Split과 Join 응용 

Split과 Join을 이용해서, 문장 중 단어의 첫글자만 대문자로 만들어주는 함수를 만들 수 있습니다.

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 ann smith davis');
capitalizeName('giraffe Park');

 

 

 

---

Padding

특정 글자수가 될 때까지, '지정한 String'을 넣어줄 수 있습니다.

 

padStart(), padEnd()

console.log('giraffe'.padStart(25, '+'));

 

 

const message = 'Go to gate 23!';
console.log(message.padStart(20, '+').padEnd(30, '+')); // padEnd에서 +는 10개가 더 추가된다.
console.log('giraffe'.padStart(20, '+').padEnd(30, '+'));

 

 

String.prototype.padStart(원하는 글자 수, 넣고 싶은 String)
String.prototype.padEnd(원하는 글자 수, 넣고 싶은 String)

padStart는 문자열 앞에, padEnd는 문자열 뒤에 '넢고 싶은 String'을 덧붙입니다.

 

 

 

padding 응용

padding을 이용해서 문자열을 암호화한 후 출력하는 함수를 만들 수 있습니다.

 

const maskCreditCard = function (number) {
  const str = number + ''; // 빈 문자열을 추가하면 자동으로 String으로 바꾸는 trick
  const last = str.slice(-4);
  return last.padStart(str.length, '*');
};

console.log(maskCreditCard(64637836)); // ****7836
console.log(maskCreditCard(43378463864647384));
console.log(maskCreditCard('334859493847755774747'));

신용카드의 뒷자리 4번호만 정상 출력이 되고, 나머지는 '*'로 출력이 됩니다.

 

 

 

 

---

Repeat

특정 String을 여러 번 반복한 후에, 하나의 String 값에 담아줄 수 있습니다.

 

repeat()

const message = 'Bad weather... All Departues Delayed... ';
console.log(message.repeat(5));

('Bad weather... All Departues Delayed... ' 가 5번 반복된 후에, 하나의 String에 담겨진 채로 출력된 모습입니다.)

 

String.prototype.repeat(n) : n 만큼 문자열을 반복한 후에, 그 값을 하나의 String에 담고 return 합니다.

 

 

Repeat 응용

const planesInLine = function (n) {
  console.log(`There are ${n} planes in line ${'🛩'.repeat(n)}`);
};
planesInLine(5);
planesInLine(3);
planesInLine(12);