[JavaScript] 자바스크립트 문자열 다루기 (위치 지정하여 선택하기)

031_자바스크립트 문자열 다루기 (위치 지정하여 선택하기)

[적용]

• 지정 범위 내의 문자열을 추출하여 사용하고 싶을 때
• 지정 위치 이후의 문자열을 추출하여 사용하고 싶을 때

---

[문법]

메소드	의미	반환
문자열.slice(시작인덱스, [종료인덱스*])	지정 범위 내 문자열 추출	문자열
문자열.substring(시작인덱스, [종료인덱스*])	지정 범위 내 문자열 추출	문자열

* 종료 인덱스는 생략 가능하다

---

[내용]

지정한 문자열의 일부를 추출하고 싶을 때 slice(), substring()을 사용한다.

지정한 인덱스의 시작 지점부터 종료 지점까지 문자열을 추출하며, 종료 인덱스를 생각하면 범위는 문자열의 끝까지로 지정된다.

지정한 위치 이후의 문자열을 모두 추출하거나 시작과 종료 인덱스를 지정하여 추출할 때 유용하다.

다음 샘플을 확인해 보자.

'JavaScript'.slice(0, 4);  // Java
'JavsScript'.slice(4);  // Script (두 번째 인수를 생략하면 문자열의 마지막까지 추출)
'JavsScript'.substring(0, 4);  // Java
'JavsScript'.substring(4);  // Script (두 번째 인수를 생략하면 문자열의 마지막까지 추출)

 

slice() 인수는 음의 정수도 사용할 수 있다. 음의 정수는 위데서부터 문자열을 추출하며, 시작 인덱스는 -1이다.

예를 들어 '나의 마우스'라는 문자열에 -2를 인수로 지정하면, 인덱스 4에 있는 '우'가 반환된다.

그러나 substring()은 음의 정수를 모두 0으로 간주하기 때문에 뒤에서부터 문자열의 인덱스를 지정하는 음의 정수를 사용할 수 없다.

// slice 사용하기
'나의 노트북'.slice(3, -1);  // 노트
'나의 노트북'.slice(-6, -4);  // 나의

// substring 사용하기
'나의 노트북'.substring(3, -3);  // 나의 (substring(3,0)과 같은 의미.-> (아래 appendix참고))
'나의 노트북'.substring(-4, -1);  // ' ' (공백)반환 (substring(0, 0)과 같은 의미)

---

[Appendix]

slice()와 substring()의 차이

slice()와 substring()은 비슷한 기능이지만 시작 인덱스가 종료 인덱스보다 클 경우의 처리 방식이 다르다.

substring()은 시작 값이 종료 값보다 클 경우 두 인덱스를 바꿔 작업을 처리한다.

'반갑습니다'.slice(3, 1);  // 결과: ' '(공백)
// 3을 시작 인덱스로, 1을 종료 인덱스로 지정하면 slice()는 3에서 1로 도달할 수 없기 때문에 ' '(공백)을 반환

'반갑습니다'.substring(3, 1);  // 결과: 갑습
// 3을 시작 인덱스로, 1을 종료 인덱스로 지정하면 substring()은 수를 뒤바꿔 큰 수를 종료 인덱스로 지정하여 추출하기 때문에 '갑습'을 반환

---

[JavaScript] 자바스크립트에서 문자열 다루기

[JavaScript] 자바스크립트에서 문자열 다루기

---

[JavaScript] 자바스크립트에서 문자열의 길이(문자의 수)를 확인하고 싶을때 length()

[JavaScript] 자바스크립트 문자열의 길이 확인하기

---

[JavaScript] 자바스크립트 문자열의 공백 처리하기 trim()

[JavaScript] 자바스크립트 문자열의 공백 처리하기 trim()

---

[JavaScript] 자바스크립트에서 문자열 검색하기 (인덱스 검색)

[JavaScript] 자바스크립트에서 문자열(인덱스) 검색하기

---

[JavaScript] 자바스크립트에서 문자열 검색하기 (부분 검색)

[JavaScript] 자바스크립트에서 문자열 검색하기 (부분 검색)

---

[JavaScript] 자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기)

[JavaScript] 자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기)

---

[JavaScript] 자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기)

[JavaScript] 자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기)

---

[JavaScript] 자바스크립트 지정 문자열 변환하기

[JavaScript] 자바스크립트 지정 문자열 변환하기

---

[JavaScript] 자바스크립트 문자열 나누기

[JavaScript] 자바스크립트 문자열 나누기

---

[JavaScript] 자바스크립트 문자열 합치기

[JavaScript] 자바스크립트 문자열 합치기

---

[JavaScript] 자바스크립트 문자열의 대소문자 변환하기

[JavaScript] 자바스크립트 문자열의 대소문자 변환하기

---

[JavaScript] 자바스크립트 문자열과 식 함께 다루기

[JavsScript] 자바스크립트 문자열과 식 함께 다루기

---

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기)

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기)

---

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기)

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기)

 

---

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김