[자바스크립트] 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