Javascript 문자열 자르는 함수 substr(), substring(), slice() 비교

Javascript에서 자주 사용하는 기능 중 하나인 문자열 자르는 함수에 대해 알아보겠습니다.

substr(), substring(), slice() 이 3가지 함수 모두 문자열 자르는 역할을 하지만 기능이 조금씩 다릅니다.

 

 

1. substr()

 

substr(시작위치, 길이)

 

substr() 함수는 위와 같은 파라미터를 입력받습니다. 첫번째 파라미터에 문자열을 자르기 시작하는 인텍스 위치를 지정하고 두번째 파라미터에 문자열을 자를 길이를 입력해 사용합니다. 문자열의 최초 인덱스 번호는 0부터 시작됩니다.

<script>
   var str = "BTS Butter";
   
   console.log(str.substr(0, 1)); //B
   console.log(str.substr(1, 1)); //T
   console.log(str.substr(0, 3)); //BTS
   console.log(str.substr(0, 4)); //BTS 
   console.log(str.substr(0, 10)); //BTS Butter
   console.log(str.substr(0, 11)); //BTS Butter
   console.log(str.substr(-1, 1)); //r
   console.log(str.substr(-10, 10)); //BTS Butter
</script>

위 예제를 보면서 자세한 사용법을 알아보겠습니다. 첫번째 예제를 보시면 문자열을 첫번째 인덱스부터 1번째 문자열까지 출력하기 위해 작성한 코드입니다. 당연히 맨 첫번째 문자열인 'B'만 출력이 됩니다. 두번째 예제는 두번째 인덱스에서 시작하는 1번째 문자열이기 때문에 'T'가 출력됩니다. 

 

세번째와 네번째 예제의 경우 출력되는 문자열은 같지만 실제로는 공백을 포함 네번째 예제는 'BTS '를 출력하고 있고 세번째 예제는 'BTS'를 출력하고 있습니다. 

 

다섯번째 예제와 여섯번째 예제를 보겠습니다. 문자열 길이가 10이기 때문에 그 이상의 길이를 적게 되더라도 출력값은 동일한 'BTS Butter'가 나오는 것을 확인할 수 있습니다. 만약 문자열 길이를 0으로 적으면 '' 같이 아무값도 출력되지 않습니다.

 

마지막으로 시작위치 값이 마이너스로 시작하는 예제들을 보시겠습니다. substr() 함수에서는 시작 인덱스 값이 마이너스인 경우 맨 뒤 문자열을 -1로 인식합니다. 앞으로 한자리씩 이동할때마다 -2, -3, -4... 이런 식으로 반대로 인덱스 값이 줄어들기 때문에 10자리인 문자열의 경우 -10에서 문자열 10자리를 출력하면 0에서 문자열 10자를 출력한 값과 동일하게 출력됩니다.

 

 

2. substring()

 

substring(시작위치, 종료위치)

 

substring() 함수는 substr() 함수와 같이 첫번째 파라미터 값은 시작위치를 사용하지만 두번째 파라미터 값은 substr() 함수와 달리 종료위치를 사용합니다. 문자열의 최초 인덱스 번호는 0부터 시작됩니다.

<script>
   var str = "BTS Butter";
   
   console.log(str.substring(0, 1)); //B
   console.log(str.substring(1, 1)); //
   console.log(str.substring(1, 2)); //T
   console.log(str.substring(3, 4)); //
   console.log(str.substring(0, 4)); //BTS 
   console.log(str.substring(0, 10)); //BTS Butter
   console.log(str.substring(0, 11)); //BTS Butter
   
   console.log(str.substring(-1, 1)); //B
   console.log(str.substring(-10, 10)); //BTS Butter
   console.log(str.substring(-1, 10)); //BTS Butter
   
   console.log(str.substring(2, 1)); //T
   console.log(str.substring(3, 1)); //TS
   console.log(str.substring(2, -1)); //BT
   console.log(str.substring(2, 0)); //BT
   
   console.log(str.substring(-2, -1)); //str.substring(0, 0)
</script>

위 예제를 보면 1, 1로 파라미터 값을 입력했을 때 substr() 함수와 달리 '' 값이 나오는 걸 확인할 수 있습니다. substr() 함수에서처럼 두번째 문자열을 출력하기 위해선 1, 2를 입력해주셔야 합니다. 

 

세번째와 네번째 예제를 보시면 substr()와 동일하게 공백을 ' ', 'BTS ' 와 같이 출력하고 문자열 10자리를 넘긴 11을 종료위치로 입력해도 'BTS Butter'로 출력하는 것을 확인하실 수 있습니다.

 

하지만 substr() 함수와는 달리 마이너스로 파라미터 값을 입력할 경우 그 입력값에 상관없이 0으로 인식하게 됩니다. 그래서 -10으로 입력한 예제나 -1로 입력한 예제 모두 결과값은 'BTS Butter'로 동일합니다. -1, 1로 파라미터 값을 입력한 경우도 substr()와 달리 맨 첫째값인 'B'를 출력하고 있습니다. 

 

substring() 함수는 시작위치가 종료위치보다 클 경우에는 자동으로 시작위치와 종료위치를 변경해서 출력합니다. 2, 1인 경우 1, 2와 3, 1인 경우 1, 3과 같은 출력값이 나옵니다. 따라서 2, -1 파라미터 값이 입력되면 -1은 자동으로 0이 되면서 0, 2의 파라미터 값과 동일한 출력값이 나오게 됩니다. 그리고 모든 파라미터 값이 마이너스인 경우는 출력값이 없게 됩니다.

 

 

3.slice()

 

slice(시작위치, 종료위치)

 

slice() 함수도 substring() 함수와 사용법이 동일합니다. 파라미터로 자를 문자열의 시작위치와 종료위치를 입력받습니다. 하지만 파라미터 값에 모두 음수 값을 받을 수 있다는 차이점을 가지고 있습니다.

<script>
   var str = "BTS Butter";
   
   console.log(str.slice(0, 1)); //B
   console.log(str.slice(1, 1)); //
   console.log(str.slice(1, 2)); //T
   console.log(str.slice(0, 4)); //BTS 
   console.log(str.slice(0, 10)); //BTS Butter
   console.log(str.slice(0, 11)); //BTS Butter
   
   console.log(str.slice(-1, 1)); //
   console.log(str.slice(-10, 10)); //BTS Butter
   console.log(str.slice(-1, 10)); //r
   
   console.log(str.slice(2, 1)); //
   console.log(str.slice(2, -1)); //S Butt
   console.log(str.slice(2, 0)); //
   
   console.log(str.slice(-2, -1)); //e
</script>

 

slice() 함수의 경우 substring() 함수와 달리 두 파라미터 값에 모두 마이너스 값이 인식이 되기 때문에 -1, 10이 입력될 경우 r을 출력하게 됩니다. 반면에 substring() 함수에서처럼 시작위치 파라미터 값과 종료위치 파라미터 값이 자동으로 바뀌는 기능은 없습니다. 

 

각 함수의 특징을 잘 파악해서 필요한 경우에 사용하시길 바라겠습니다.