모던 자바스크립트

String Addtions

문자 객체에 새롭게 추가된 인스턴스 메서드(Instance Methods)에 대해 알아봅시다. 기존에는 별도의 헬퍼 함수를 만들어야 했던 문자 객체의 기능을 ES6+부터 기본적으로 제공해줍니다.

영상 강의

PART 1

예제

ES6에서는 표준 라이브러리가 크게 확장되었습니다. 이러한 변경에 맞춰 문자열에도 .includes()와 .startsWith(), .endsWith(), .repeat() 같은 새로운 메소드가 추가되었습니다.

includes()

기존 코드에서는 문자열 포함 여부를 확인하기 위해 .indexOf() 메서드를 사용해 리턴 값이 -1 보다 큰 지 확인했습니다.

var title = '경제 지표 예측';
var substring = '지표';
console.log(title.indexOf(substring) > -1); // true

ES6+에서는 .includes() 메서드를 사용해 보다 간단하게 문자열 포함 여부를 확인할 수 있습니다.

const title = '경제 지표 예측';
const substring = '지표';
console.log(title.includes(substring)); // true

startsWith()

기존 코드에서는 문자 내부에 특정 문자로 시작하는지 확인하기 위해 헬퍼 함수를 만들어 사용했습니다.










 
 
 
 



var FourGodsOfOriental = '청룡 백호 현무 주작';

// 1. FourGodsOfOriental의 글자는 '백호'로 시작하는가?
FourGodsOfOriental.substr(0, 2) === '백호'; // false

// 2. '현무'는 FourGodsOfOriental 글자의 6 인덱스부터 시작하는가?
FourGodsOfOriental.substr(6, 2) === '현무'; // true

// 헬퍼 함수
function startsWith(word, find, start) {
  start = start || 0;
  return word.substr(start, find.length) === find;
}

startsWith(FourGodsOfOriental, '주작', 9); // true

ES6+ 부터는 기본 제공되는 .startsWith() 메서드를 사용해 보다 쉽게 특정 문자로 시작하는지 확인할 수 있습니다.




 


 

let kings_4 = '청룡 백호 현무 주작';

// 1. kings_4의 글자는 '백호'로 시작하는가?
kings_4.startsWith('백호'); // false

// 2. '현무'는 kings_4 글자의 6 인덱스부터 시작하는가?
kings_4.startsWith('현무', 6); // true

endsWith()

기존 코드에서는 문자 내부에 특정 문자로 끝나는지 확인하기 위해 헬퍼 함수를 만들어 사용했습니다.








 
 
 
 
 






var season = '봄 여름 가을 겨울';

// 1. season의 글자는 '겨울'로 끝나는가?
var index = season.length - 2;
season.substr(index, 2) === '겨울'; // true

// 헬퍼 함수
function endsWith(word, find, end) {
  end = (end || word.length) - find.length;
  var last_index = word.indexOf(find, end);
  return last_index !== -1 && last_index === end;
}

endsWith(season, '겨울'); // true

// season의 글자는 '가을'이 7번째 인덱스(가을 다음 위치)에서 끝나는가?
endsWith(season, '가을', 7); // true

ES6+ 부터는 기본 제공되는 .endsWith() 메서드를 사용해 보다 쉽게 특정 문자로 끝나는지 확인할 수 있습니다.

let season = '봄 여름 가을 겨울';

// 1. season의 글자는 '겨울'로 끝나는가?
season.endsWith('겨울'); // true

// season의 글자는 '가을'이 7번째 인덱스(가을 다음 위치)에서 끝나는가?
season.endsWith('가을', 7); // true

repeat()

기존 코드에서는 특정 문자를 반복 처리하기 위해 별도의 헬퍼 함수를 만들어 사용해야 했습니다.

 
 
 
 
 
 
 



function repeat(string, count) {
  var strings = [];
  while(strings.length < count) {
    strings.push(string);
  }
  return strings.join('');
}

repeat('오라! ', 3); // '오라! 오라! 오라!'

ES6+에서는 별도의 헬퍼 함수 없이 기본 제공되는 .repeat() 메서드를 사용할 수 있습니다.

'오라! '.repeat(3); // '오라! 오라! 오라!'

참고

← Arrow Function →