slice(), subString(), subStr() method

자바스크립트에서 문자열을 잘라 리턴하는 메소드는 3가지가 있다.

1. slice()

2. substring()

3. substr() 

그럼 slice()부터 사용법에 대해 알아보자. 

slice 사용방법

문자열.slice(잘라올 첫 위치값, 잘라올 마지막 위치값)

여기서 잘라올 첫번째 위치값은 이상 이고 잘라올 마지막 위치값은 미만이라고 생각하면 편하다.

다시 말해 첫 위치값은 리턴값에 포함되며 마지막 위치값은 미포함된다. 주의하자.

아래의 예를 보자

예)

1 2 3 4 5

<script> var str = "Apple, Banana, Kiwi, Pear, Peach"; var result = str.slice(7, 13); document.write(result); </script>

str 변수에 인덱스 값을 확인하면

A(0)p(1)p(2)l(3)e(4),(5) 공백(6) B(7)a(8)n(9)a(10)n(11)a(12),(13) 공백(14) K(15)i(16)w(17)i(18)....와 같다.

7번째 B부터(포함) 13번째 ,값(미포함) 전까지 리턴하는 것이다.

결과는 Banana 

slice() 메소드는 배열에서도 사용이 가능하다. 사용법은 위와 같다. 

예)

1 2 3 4 5

<script> var str = new Array("Apple", "Banana", "Kiwi", "Pear", "Peach"); var result = str.slice(0, 3); document.write(result); </script>

배열도 인덱스값이 존재한다. Apple이 0, Banana가 1, Kiwi가 2, Pear가 3, Peach가 4...이런식이다.

마찬가지로 마지막값 전까지 출력된다.(미포함)

위 코딩의 결과는 Apple, Banana, Kiwi 

뒤에서부터 검색할땐 "-"를 사용한다. 

예)

1 2 3 4 5

<script> var str = "Apple, Banana, Kiwi, Pear, Peach"; var result = str.slice(-11, -7); document.write(result); </script>

.......P(-10)e(-9)a(-8)r(-7),(-6) 공백(-5) P(-4)e(-3)a(-2)c(-1)h(-0)이런식이 된다. 

여기서는 시작값이 미포함이다.

그래서 slice(-11, -7)의 결과는 Pear

문자열과 배열 모두 마지막 값 옵션을 주지 않으면 그 마지막 값까지 출력된다.

예)

1 2 3 4 5

<script> var str = "Apple, Banana, Kiwi, Pear, Peach"; var result = str.slice(7); document.write(result); </script>

결과값 Banana, Kiwi, Pear, Peach

예)

1 2 3 4 5

<script> var str = new Array("Apple", "Banana", "Kiwi", "Pear", "Peach"); var result = str.slice(0); document.write(result); </script>

결과 Apple, Banana, Kiwi, Pear, Peach

 

subString() 사용방법

문자열.substring(잘라올 첫 위치값, 잘라올 마지막 위치값)

substring()의 사용법은 slice()와 같다. 단지 negative index(-) 를 사용할 수 없는 차이만 있다.

예)

1 2 3 4 5

<script> var str = "Apple, Banana, Kiwi, Pear, Peach"; var result = str.substring(7, 13); document.write(result); </script>

위 코딩의 결과는 Banana

slice()로 바꿔도 결과는 같다.

substr()사용방법

문자열.substr(잘라올 첫 위치값, 문자열의 길이)

substr()의 사용법은 slice()와 비슷하다. 하지만 두번째 파라메터값이 문자열의 길이라는 것만 다르다.

시작점 부터 몇글짜를 가져올지를 정하는 것이다.

예)

1 2 3 4 5

<script> var str = "Apple, Banana, Kiwi, Pear, Peach"; var result = str.substr(7, 6); document.write(result); </script>

7번째인 B부터 6글짜를 가져와라 이다.

결과는 Banana

첫번째 매개변수 값은 negative(-)를 사용할 수 있다.(뒤에서 부터 셀수 있다)

하지만 두번째 매개변수는 길이 이기 때문에 negative(-)를 사용할 수 없다는 것이 주의하자.

substr()도 slice()와 같이 두번째 매개변수를 생략하면 끝 값까지 가져온다. 

출처: http://aljjabaegi.tistory.com/127 [알짜배기 프로그래머]

참고: https://codepen.io/cmykrgb/pen/WaaKBJ?editors=1010