[JavaScript] 문자열 메서드 알아보기

문자열 메서드

이번 포스팅에서는 문자열 메서드에 대해 다뤄보도록 하겠습니다.
문자열 메서드 중 가장 많이 쓰이는 slice() / substring() / substr()에 대한 설명입니다.
얼핏보면 비슷해 보이는 이 3가지에도 꽤나 큰 차이점이 존재하는데요 이에 대해서 깊게 다뤄보도록 하죠.

---

slice() / substring() / substr()

문자열에서 원하는 값을 추출해 문자열을 반환하는 메서드이다. 사용하는 방식은 아래 박스 참조.

"문자열".slice(시작위치)
"문자열".slice(시작위치, 끝나는 위치)
// 시작위치의 값은 끝나는 위치의 값보다 작아야 한다.

// substring() 시작값이 끝나는 값보다 클 경우 두 값을 바꿔서 처리(에러 방지)
"문자열".substr(시작위치)
"문자열".substr(시작위치, 길이)

코드 보기

const str1 = "javascript reference";

const currentStr1 = str1.slice(0);  // "javascript reference"; 모두 출력
const currentStr2 = str1.slice(1);  // "avascript reference" 출력, j 빠짐
const currentStr3 = str1.slice(2);  // "vascript reference" 출력, ja 빠짐
const currentStr4 = str1.slice(0, 1);  // "j" 출력, 0~1자리 출력
const currentStr5 = str1.slice(0, 2);  // "ja" 출력, 0~2자리 출력
const currentStr6 = str1.slice(0, 3);  // "jav" 출력, 0~3자리 출력
const currentStr7 = str1.slice(1, 1);  // 아무것도 출력되지 않음 - ★ 끝나는 위치가 시작 위치보다 커야함
const currentStr8 = str1.slice(1, 2);  // "a" 출력
const currentStr9 = str1.slice(1, 3);  // "av" 출력
const currentStr10 = str1.slice(1, 4);  // "ava" 출력
const currentStr11 = str1.slice(-1);  // "e" 출력
const currentStr12 = str1.slice(-2);  // "ce" 출력
const currentStr13 = str1.slice(-3);  // "nce" 출력
const currentStr14 = str1.slice(-3, -1);  // "nc" 출력
const currentStr15 = str1.slice(-3, -2);  // "n" 출력
const currentStr16 = str1.slice(-3, -3);  // 아무것도 출력되지 않음

const currentStr17 = str1.slice(1, 4);  // "ava"
const currentStr18 = str1.slice(4, 1);  // ""

// substring은 시작값이 끝값보다 크면 두 값을 바꿔서 처리하기 때문에 결과가 같다.
const currentStr19 = str1.substring(4, 1);  // "ava"
const currentStr20 = str1.substring(1, 4);  // "ava"

const currentStr21 = str1.substr(0);    // 모두 출력
const currentStr22 = str1.substr(1);    // "avascript reference"
const currentStr23 = str1.substr(2);    // "vascript reference"
const currentStr24 = str1.substr(0, 1);    // "j"
const currentStr25 = str1.substr(0, 2);    // "ja"
const currentStr26 = str1.substr(0, 3);    // "jav"
const currentStr27 = str1.substr(1, 2);    // "av"
const currentStr28 = str1.substr(1, 3);    // "ava"
const currentStr29 = str1.substr(1, 4);    // "avas"
const currentStr30 = str1.substr(-1);    // "e"
const currentStr31 = str1.substr(-2);    // "ce"
const currentStr32 = str1.substr(-3);    // "nce"
const currentStr33 = str1.substr(-1, 1);    // "e"
const currentStr34 = str1.substr(-2, 2);    // "ce"
const currentStr35 = str1.substr(-3, 3);    // "nce"