[Javascript] 문자열 자르기, 문자 추출 / substr() / substring() / slice() / charAt()

기본적인 함수들이지만 문자열을 자를 때 비슷한 결과를 만들어 낼 수 있는 함수들이 여러개 있어서

사용하기에 조금 헷갈릴 때가 있다.

조금씩 다른 substr() / substring() / slice() 와

맨 앞, 맨 뒤 문자열을 추출할 때 편한 charAt()에 대해 정리 해보기로 했다.

* 전부 새로운 문자 혹은 문자열을 반환한다.

 

---

 

substr()

index와 자를 개수를 입력하여 자른 문자열을 반환한다.

substr(시작위치, 자를 문자의 개수)

* 자를 문자의 개수를 생략하면 문자열의 끝까지 자르게된다.

const string = "문자열다루기";

console.log(string.substr(0, 1));
// 문
console.log(string.substr(-1, 1));
// 기
console.log(string.substr(0, 3));
// 문자열
console.log(string.substr(3));
// 다루기

 

substring()

substr이랑 조금 헷갈릴 수 있는데, substr은 시작위치에서 자를 개수를 선택하지만

substring은 시작 위치와 자를 위치를 선택하여 자른다.

substring(시작위치, 어느 위치까지 자를 지)

* 자르기를 종료할 위치를 생략하면 문자열의 끝까지 자르게된다.

const string = "문자열다루기";

console.log(string.substring(0, 1));
// 문
console.log(string.substring(-1, 1));
// 문
// * -1의 위치에서 1의 위치까지 자르는 것이니 문자열의 맨 앞글자를 자르게된다.

console.log(string.substring(0, 3));
//문자열

console.log(string.substring(3));
//다루기

 

slice()

배열을 자를 때도 사용하지만 문자열도 자를 수 있다.

substring()과 동일하지만 음수값을 이용해 자를 수 있다.

* 자르기를 종료할 위치를 생략하면 문자열의 끝까지 자르게된다.

const string = "문자열다루기";

console.log(string.slice(0, 1));
// 문
console.log(string.slice(-1, 1));
// 빈 값이 출력된다
// -1의 위치는 문자열 맨 끝의 위치이므로
// 맨 끝의 위치에서 1의 위치까지 자르면 맨 뒤 글자가 나올 것 같지만 그렇지 않다.

console.log(string.slice(-1));
// 기
// * 맨 뒤 문자열을 자르려면 시작위치의 음수값만 사용한다.

console.log(string.slice(0, 3));
//문자열

console.log(string.slice(3));
//다루기

 

 

charAt()을 이용한 문자 추출

문자열에서 특정 인덱스에 위치하는 단일문자를 반환한다.

const string = "문자열다루기";

console.log(string.charAt(0));
// 문
console.log(string.charAt(string.length - 1));
// 기

개인적으로 앞 뒤 문자를 추출할 때 제일 직관적인 것 같다.