자바스크립트에서 문자열의 일부를 추출하고자 할 때 사용할 수 있는 함수는 slice, substr, substring 3가지가 있다. 이 글에서는 3가지 함수의 용법을 정확히 이해하고 어느 경우에 어떤 함수를 사용하는 것이 좋을 지 안내한다

slice 와 substring 의 용법

위 2가지 함수는 용법이 동일하다. 가져올 문자열의 시작위치와 끝위치를 인자로 받는다.

2개의 인자 모두 양수일 경우

var str = "0123456789";
str.slice(2,5); // "234"      // 두번째 인자의 끝 위치는 추출될 문자열에 포함되지 않는다
str.substring(2,5); // "234"

2번째 인자가 생략될 경우 시작 위치부터 마지막까지 가져온다

var str = "0123456789";
str.slice(2); // "23456789"
str.substring(2); // "23456789"

여기까지는 두 함수의 결과가 동일하다. 하지만 아래부터는 결과가 다르다.

slice 만의 용법

첫번째 인자로 음수를 사용할 경우 slice 는 뒤에서부터 인덱스를 거꾸로 계산하여 시작위치부터 끝위치까지 문자열을 추출한다.

var str = "0123456789";
str.slice(-5, -2);  // "567"    // -5 위치부터 -2 위치까지 문자열 추출(마지막 위치 문자는 제외)
str.substring(-5, -2);  // ""   // substring 은 음수를 제대로 처리하지 못한다.

음수 인자 하나만 주어질 경우에는 뒤부터 거꾸로 계산되는 시작위치부터 마지막까지 문자열을 추출한다.

var str = "0123456789";
str.slice(-3);  // "789"    // -3 위치부터 마지막까지 문자열 추출
str.substring(-3);  // "0123456789"  // substring 은 역시 음수를 제대로 처리하지 못한다.

또한 slice 는 배열에서도 동일하게 사용할 수 있다.(물론 String.prototype.slice 와 Array.prototype.slice 는 서로 다른 함수지만 용법이 동일하다는)

var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
arr.slice(3,6);     // ["3", "4", "5"]
arr.slice(-4);      // ["6", "7", "8", "9"]
arr.slice(-4, -1);  //["6", "7", "8"]

substr 의 용법

substr 은 추출할 문자열의 시작위치와 길이를 인자로 받아서 문자열을 추출한다

var str = "0123456789";
str.substr(3,4);    // "3456"

1개의 인자만 전달될 경우, 해당 위치부터 마지막까지 문자열을 추출한다.

var str = "0123456789";
str.substr(5);    // "56789"

시작위치로 음수도 사용이 가능하다.

var str = "0123456789";
str.substr(-3);     // "789"   // -3 위치부터 마지막까지 추출
str.substr(-5, 3);  // "567"   // -5 위치부터 3글자 추출

두번째 인자로 음수를 전달하면 당연히 이상한? 결과가 출력된다(괜히 적절하지 않은 인자 전달은 삼가하자)

var str = "0123456789";
str.substr(-5, -2);  // ""

결론

• substring 보다는 slice 를 사용하도록 하자
  • slice 는 substring 의 용법을 포함하면서 음수도 사용이 가능하기 때문이다
  • 게다가 배열에서도 동일한 용법으로 사용이 가능하다.
  • substring 은 잊고 slice 만 기억하자.
• 가져올 문자열의 끝위치를 알면 길이를 알 수 있고 길이를 알면 끝위치를 알 수 있다. 하지만 간단한 계산이라도 생략할 수 있다면 코드의 가독성은 더욱 좋아질 수 있기 때문에
  • 시작위치와 끝위치를 알 경우에는 slice 를 사용
  • 시작위치와 가져올 문자의 길이를 알 경우에는 substr을 사용하도록 하자