자바스크립트 문자열 처리를 위한 다양한 메소드가 있습니다. 그 중에서 많이 사용되는 문자열 메소드인 includes, indexOf, startWith, slice, toLowerCase, toUpperCase 등의 예제를 모아 보았습니다.
자바스크립트 문자열 객체를 선언하는 2가지 방식은 다음과 같습니다.
첫번째로 간단히 변수선언을 하는 것과 동일하게 참조 변수에 객체를 입력해 주는 방식입니다.
<body>
<script>
let string = "문자열 선언";
console.log( string );
</script>
</body>
두번째로는 new 연산자를 사용해서 문자열을 생성하는 방법이 있습니다.
<script>
const strObj = new String( "문자열 obj 선언" );
console.log( strObj );
</script>
slice 메소드
slice는 첫 파라메터로 인덱스, 두번째 파라메터로 몇번째 위치까지 자른 후 해당 결과를 리턴합니다.
<script>
const string1 = "apple, banana, grape";
//0인덱스부터 5째 자리까지 잘라냄
console.log( string1.slice( 0, 5) );
</script>
slice는 문자열 뿐만 아니라 배열 객체에서도 사용이 가능힙니다.
<script>
var arr = new Array("철수", "영희", "민수", "철호", "도윤");
var result = arr.slice(0, 3);
console.log( result )
</script>
slice는 또 뒤에서 부터 잘라올 수도 있습니다.
<script>
const string6 = "apple, banana, grape";
// " grap" 출력
console.log(string6.slice(-5, -1));
</script>
repeat 메소드
이 메서드는 해당 문자열을 입력된 횟수만틈 반복하여 결과를 리턴합니다.
<script>
const string2 = "string repeat!"
//string repeat!string repeat!string repeat!
console.log( string2.repeat(3) );
</script>
toLowerCase 메소드
toLowerCase는 해당 문자열을 소문자로 바꾸어 결과를 리턴합니다.
<script>
const upperCase2 = "HI, MY NAME IS MONKEY! ";
// hi, my name is monkey! 를 반환합니다.
console.log( upperCase2.toLowerCase( ));
</script>
toUpperCase 메소드
toUpperCase는 해당 문자열을 대문자로 바꾸어 결과를 리턴합니다. 원본 문자열은 그대로 두고 새로운 문자열을 반환하게 되므로 리턴값을 받을 변수를 통해 받도록 합니다.
<script>
const lowCase = "Hi, my name is monkey!";
// HI, MY NAME IS MONKEY! 를 반환합니다.
console.log( lowCase.toUpperCase() );
</script>
includes 메소드
include 메소드는 입력받은 문자열 일부가 해당 문자열에 포함되어 있는지 여부를 확인해 줍니다. 따라서 return 값은 true, false를 반환합니다.
<script>
const greeting = "Hi, my name is monkey!";
console.log( greeting.includes( "my" ) );
console.log( greeting.includes( "monkey" ) );
console.log( greeting.includes( "MY" ) );
</script>
만약 대소문자 구분없이 포함여부를 확인하고자 한다면 위의 메소드 toLowerCase 등을 결합하여 다음과 같이 활용이 가능합니다.
<script>
const greeting = "Hi, my name is monkey!";
const upperCase = "MY";
console.log( greeting.includes( upperCase.toLowerCase( upperCase ) ) );
</script>
indexOf 메소드
입력받은 문자열이 처음 나타나는 위치를 반환합니다.
<script>
const idxOfString = "Fighting bro, Cheer up bro";
// bro라는 단어가 처음 등장하는 인덱스인 9를 리턴
console.log( "인덱스 위치 : " + idxOfString.indexOf("bro"));
</script>
indexOf의 두번째 매개변수를 찾고자 시작하는 인덱스를 지정할 수 있습니다. 따라서 아래와 두번째 매개변수에 인덱스를 지정하게 디면 해당 위치부터 포함여부를 결정하게 됩니다.
<script>
const fromIndstr = "[SAPUI5] 자바스크립트";
//찾는 위치를 8부터 정했기 때문에 false가 리턴된다.
console.log( fromIndstr.includes( "SAPUI5", 8 ) );
</script>
indexOf는 처음 인덱스를 기준으로 문자열을 찾지만, lastIndexOf를 사용하면 뒤에서부터 찾아 해당 인덱스를 반환할 수 있습니다.
<script>
const lastIdxString = "자바스크립트 [SAPUI5] 자바스크립트";
// 가장 뒤에 있는 index 18을 반환합니다.
console.log( lastIdxString.lastIndexOf("스크립트") );
</script>
자바스크립트 문자열 indexOf와 includes의 비교
indexOf와 includes 모두 문자열이 있는지 확인하는데 사용할 수 있습니다. indexOf의 경우에는 찾은 인덱스를 반환하는 반면, includes는 true, false boolean 값을 리턴합니다. 따라서 아래의 코드와 같이 경우에 따라서는 가독성 측면에서 includes를 사용하는 것이 더 나을 수 있습니다.
<script>
const incIndOf = "[SAPUI5] 자바스크립트";
if ( incIndOf.indexOf( "SAPUI5" ) > -1 ){
console.log( "indexOf 포함됨" )
}
if ( incIndOf.includes( "SAPUI5") ){
console.log( "includes 포함됨" )
}
</script>
StartsWith 메소드
해당 문자열이 입력받은 문자열로 시작하는지 여부를 리턴합니다. 따라서 true, false boolean 값을 리턴하게 됩니다.
<script>
const startWith = "[SAPUI5] 자바스크립트";
// 첫번째 는 TRUE, 두번째는 FALSE를 리턴
console.log( startWith.startsWith("[SAPUI5]" ) );
console.log( startWith.startsWith("자바스크립트" ) );
</script>
EndsWith 메소드
해당 문자열이 입력받은 문자열로 끝이 나는지 여부를 리턴합니다.
<script>
const endWithStr = "[SAPUI5] 자바스크립트";
// 첫번째 는 false, 두번째는 true를 리턴
console.log( endWithStr.endsWith("[SAPUI5]" ) );
console.log( endWithStr.endsWith("자바스크립트" ) );
</script>
이상으로 includes, indexOf, startWith, slice, toLowerCase, toUpperCase 등의 자바스크립트 문자열 메소드에 대해 알아보았습니다. 더 자세한 사항을 알고자 하면 mdn 문서의 자바스크립트 문자열 메소드 편을 확인해 보시기 바랍니다.
자바스크립트의 배열 관련 메소드를 알고자 한다면 map 메소드, filter 메소드, foreach 메소드 내용을 확인해 보시기 바랍니다.