[자바스크립트] String - Method

String Method

자바스크립트에서는 문자형 데이터를 객체화한 String 객체를 제공함으로써, String 타입의 변수 또한 String 객체에 내장되어 있는 속성 및 함수를 사용할 수 있다. 또한, 문자열 타입은 immutable하기 때문에 String 객체의 메소드들은 문자열의 원본을 변화시키지 않고, 새로운 string을 만들어 리턴한다.

 

 

문자열 찾기 메소드

문자열 안에서 원하는 문자열을 찾을 수 있는 메소드이다. 메소드마다 반환 값이 다르므로 상황에 맞춰서 유용하게 사용할 수 있다.

 

indexOf() / lastIndexOf()

문자열에서 원하는 문자의 index를 반환하는 메소드이다. 처음으로 발견한 문자의 위치를 반환하고, 문자열의 오른쪽에서부터 찾고 싶을 경우, latIndexOf() 메소드를 사용하면 된다. 해당 문자열을 발견하지 못하면 -1을 리턴한다.

//String.indexOf(key, startIndex)
//문자열의 왼쪽부터 탐색
//startIndex : optional로 지정시 해당 인덱스부터 탐색 시작
let str = "Please locate where 'locate' occurs!";
console.log(str.indexOf("locate"));  // 7
console.log(str.indexOf("토토"));  // -1
console.log(str.indexOf("locate", 15));  // 21   15번째부터 검색


//String.lastIndexOf(key, startIndex)
//문자열의 오른쪽부터 탐색
//startIndex : optional로 지정시 해당 인덱스부터 탐색 시작
console.log(str.lastIndexOf("locate"));  // 21 역방향검색
console.log(str.lastIndexOf("locate", 15)); // 7  15번째부터 역방향 검색

 

search()

indexOf, lastIndexOf() 메소드처럼, 찾을 경우 해당 index를 못 찾을 경우 -1을 리턴한다. 차이점으로는 시작 위치를 지정하는 매개변수는 없고 정규표현식을 사용하지 못하는 indexOf 메소드와는 달리 정규표현식을 사용할 수 있다.

//search(key)
//찾은 위치 인덱스 리턴, 못찾으면 -1 리턴
//regexp(정규표현식) 사용 가능
let str = "Please locate where 'locate' occurs!";
console.log(str.search("locate"));

 

includes()

해당 문자열을 찾으면 true를 리턴한다.

//includes(key)
//찾으면 true
const str = "Please locate where 'locate' occurs!";
console.log(str.includes("locate"));
console.log(str.includes("abc"));

 

startWith() / endWith()

주어진 문자열로 시작/끝나면 true를 리턴한다.

//startsWith(searchValue, startIndex)
//주어진 문자열로 시작하면 true 리턴
//startIndex : optional로 해당 위치가 주어진 문자열로 시작하면 true리턴
console.log(str.startsWith("Please"));  // true
console.log(str.startsWith("Please", 10));  // false


//endsWith(searchValue, endIndex)
//주어진 문자열로 끝나면 true 리턴
//endIndex : optional로 해당 위치가 주어진 문자열로 끝나면 true리턴
console.log(str.endsWith("occurs!"));   // true
console.log(str.endsWith("occurs!", 10));   // false

 

 

문자열 추출 메소드

slice()

넘겨받은 index 매개변수를 기준으로 문자열을 추출한다. 음수 인덱싱이 가능한것이 특징이다. 음수 인덱싱은 인덱스의 마지막을 기준으로 문자열 왼쪽으로 이동하면서 인덱싱을 하는데 이때 - 를 붙여서 일반 인덱싱과 구분하기 때문에 음수 인덱싱이라고 한다.

// 일반 인덱싱
// 왼쪽 => 오른쪽
str = "JavaScript";
       0123456789
       
// 음수 인덱싱
// 오른쪽 => 왼쪽
// 구분하기 위해 음수 기호(-)를 붙임
// 1 부터 시작!!! <= -0...XXX

str = "JavaScript";
     -10987654321
// -1 : t ==> -10 : J

 

slice() 의 사용법이다.

//slice(startIndex);
//startIndex부터 문자열 끝까지
//음수 인덱싱 가능 : -1은 오른쪽 끝 문자!!
let str = "Apple, Banana, Kiwi";
console.log(str.slice(7)); //Banana, Kiwi
console.log(str.slice(-12)); //Banana, Kiwi


//slice(startIndex, endIndex);
//startIndex부터 endIndex 전까지
console.log(str.slice(7, 13)); //Banana
console.log(str.slice(-12, -6)); //Banana

 

substring() / substr()

//substring(startIndex, endIndex)
//startIndex부터 endIndex 전까지의 문자열을 반환
let str = "Hello World";
console.log(str.substring(0, 5); //Hello


//substr(startIndex, count)
//startIndex부터 count의 개수만큼 문자열을 반환
console.log(str.substring(6, 5); //World

 

 

문자열 치환

replace()

문자열을 원하는 다른 문자열로 바꿔주는 메소드이다. 치환한 결과를 문자열로 리턴하고 정규표현식이 사용가능하다. 매칭된 첫 문자만 치환하여 반환해줌!!

//replace(original, change);
//첫번째 original을 change로 치환
let str = "Please visit Korea!";
console.log(str.replace("Japan", "Korea"));
console.log(str.replace("JAPAN", "Korea"));


//정규표현식 가능
//자바스크립트에는 replaceAll 메서드가 없기 때문에,
//정규표현식을 사용하여 구현
// i : case Insensitive 약자. => 대소문자 구분없이
// g :  global match
str = "Please visit Japan! Go Japan";
console.log(str.replace(/JAPAN/i, "Korea"));
console.log(str.replace(/Japan/g, "Korea"));

 

대소문자 전환

toUpperCase(), toLowerCase()

//toUpperCase()
//대문자로 전환
let str = "Hello World!";
console.log(str.toUpperCase());

//toLowerCase()
//소문자로 전환
console.log(str.toLowerCase());

 

 

문자열 연결

concat()

문자열과 매개변수로 넘겨받은 문자열을 연결하여 새로운 문자열을 리턴한다.

//concat(delimeter, string)
//넘겨받은 string을 delimeter를 통해 연결
let str1 = "Hello";
let str2 = "World";

//한칸 띄우고 연결
console.log(str1.concat(" ", str2)); //Hello World

//,로 연결
console.log(str1.concat(",", str2)); //Hello,World

 

 

좌우 공백 제거

trim()

문자열의 좌우 공백을 제거해주는 메소드이다.

//trim()
//좌우 공백을 제거한 문자열 반환
let str = "       Hello World!        ";

console.log(`[${str}]`);         //[       Hello World!        ]
console.log(`[${str.trim()}]`);  //[Hello World!]

 

 

패딩문자 추가

padStart() / padEnd()

문자열 앞/뒤로 패딩 문자를 추가한 문자열을 반환해주는 메소드이다. ESMA2017에서 부터 추가된 메소드이다.

//padStart(padNum, padChar)
//padNum보다 문자열이 더 짧을 때, 그 차이만큼 문자열 앞쪽에 padChar로 채움
//padChar은 optional이기 때문에,
//default값은 공백(' ')이다.
let str = "5";
console.log(`[${str.padStart(4)}]`);       //[   5]
console.log(`[${str.padStart(4, "x")}]`);  //[xxx5]


//padEnd(padNum, padChar)
//padNum보다 문자열이 더 짧을 때, 그 차이만큼 문자열 뒤쪽에 padChar로 채움
console.log(`[${str.padEnd(4)}]`);         //[5   ]
console.log(`[${str.padEnd(4, "*")}]`);    //[5***]


//문자열이 더 길면, 해당 문자열 출력
str = "JavaScript" //.length() === 10
console.log(`[${str.padStart(5, "x")}]`);  //JavaScript
console.log(`[${str.padEnd(8, "x")}]`);  //JavaScript

 

 

문자열 <=> 배열 변환

split()

String 객체의 메소드로, 넘겨받은 매개변수를 기준으로 문자열을 쪼개서 배열로 변환하여 리턴해주는 메소드이다. 이 때, 정규표현식을 매개변수로 넘겨주는 것도 가능하다.

//split(string)
//string을 기준으로 문자열을 쪼갠 후 배열 변환
//정규표현식도 가능
let str = "2022-11-23";
let arr = str.split("-");
console.log(arr);   //[ '2022', '11', '23' ]

str = "Hello";
console.log(str.split("")); //[ 'H', 'e', 'l', 'l', 'o' ]

str = "    Hello    My World     ";
console.log(str.split(' '));
console.log(str.trim().split(/\s+/)); //[ 'Hello', 'My', 'World' ]

 

join()

Array의 메소드로, 배열을 문자열로 변환하여 반환하는 메소드이다.

//join(delimeter)
//배열을 delimeter를 통해 문자열로 변환
let arr = ["2024", "10", "18"];
console.log(arr.join("-")); //2024-10-18

 

split, join 메소드를 활용하면 문자열을 뒤집는 것도 가능하다.(Array 의 reverse 메소드 활용!!)

str = "JavaScript";
console.log(str);                              //JavaScript
console.log(str.split(""));                    //['J','a','v','a','S','c','r','i','p','t']
console.log(str.split("").reverse());          //['t','p','i','r','c','S','a','v','a','J']
console.log(str.split("").reverse().join("")); //tpircSavaJ