[js] slice, substr, substring

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

slice 와 substring 의 용법

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

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

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

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 은 역시 음수를 제대로 처리하지 못한다.

substr 의 용법

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

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

결론

• substring 보다는 slice 를 사용하도록 하자

  • slice 는 substring 의 용법을 포함하면서 음수도 사용이 가능하기 때문이다
  • 게다가 배열에서도 동일한 용법으로 사용이 가능하다.
  • substring 은 잊고 slice 만 기억하자.

• 가져올 문자열의 끝위치를 알면 길이를 알 수 있고 길이를 알면 끝위치를 알 수 있다. 하지만 간단한 계산이라도 생략할 수 있다면 코드의 가독성은 더욱 좋아질 수 있기 때문에

  • 시작위치와 끝위치를 알 경우에는 slice 를 사용
  • 시작위치와 가져올 문자의 길이를 알 경우에는 substr을 사용하도록 하자