본문 바로가기
JavaScript

문자열변경메서드(slice/substring/substr)

by 코린이 박원장👶 2022. 8. 16.

 

문자열 변경 메서드

문자열 변경 메서드란 이름 그대로 문자열의 특정위치를 바꾸기도 하고, 공백을 제거하기도 하고, 마음대로 변경할 수 있게 도와주는 메서드 인데요. 오늘은 그 중에서도 특정 값을 찾아 변경하기전 값을 추출해줄 수 있게 도와주는 메서드에 대해서 알아보도록 하겠습니다.
이런 특정 문자열 값 추출 메서드에는 slice(), substring(), substr() 등이 있습니다.


01_ Slice()

문자열에서 원하는 값을 찾아서 추출해내고 그 추출한 값의 문자열을 반환하는 메서드 입니다.
slice는 시작위치 값이 끝나는 위치값보다 클 경우 출력이 되지 않으므로 주의를 요합니다.

-기본문법

"문자열".slcie(시작위치)
"문자열".slcie(시작위치, 끝나는위치) [시작위치 값 < 끝나는위치 값]

const str = 'javascript reference';
    const currentStr1 = str.slice(0);  //javascript reference
    const currentStr2 = str.slice(2);  //vascript reference
    const currentStr3 = str.slice(0, 1);  //j
    
    const currentStr4 = str.slice(1, 1);  //안나옴 (시작위치 값 = 끝나는위치 값)
    
    const currentStr5 = str.slice(-1);  //e (음수=reverse)
    const currentStr6 = str.slice(-2);  //ce (음수=reverse)
    const currentStr7 = str.slice(-3, -2);  //n (-3<-2)
    const currentStr8 = str.slice(-3, -3);  //안나옴 (-3 = -3)

02_ substring()

문자열에서 원하는 값을 찾아서 추출해내고 그 추출한 값의 문자열을 반환하는 메서드 입니다.
substring는 slice와 다르게 시작위치 값이 끝나는 위치값보다 크면 두 값을 바꿔서 처리 합니다.

-기본문법

substring() : 시작값 < 끝나는값 --> 두 값을 바꿔서 처리(에러 방지)

const str = 'javascript reference';
const currentStr1 = str.substring(4,1);   //ava ('시작값 < 끝나는 값' 이지만 두값을 바꿔서 처리하므로 'ava'출력)
const currentStr2 = str.substring(1,4);   //ava ('시작값 < 끝나는 값' 이므로 정상 출력)

03_ substr()

문자열에서 원하는 값을 찾아서 추출해내고 그 추출한 값의 문자열을 반환하는 메서드 입니다.
substr() 메서드는 문자열의 특정 위치에서 시작하여 특정 문자수(길이) 만큼의 문자들을 반환합니다.
길이를 지정하지 않을 경우 시작위치 이후의 문자열들을 그대로 반환합니다.

-기본문법

"문자열".substt(시작위치)
"문자열".substt(시작위치,길이)

const str = 'javascript reference';
const currentStr1 = str.substr(0);   //javascript reference
const currentStr2 = str.substr(1);   //avascript reference

const currentStr3 = str.substr(0,1);   //j (문자열의 0번째부터 시작해서 1개 문자만큼만 반환)
const currentStr4 = str.substr(0,3);   //jav (문자열의 0번째부터 시작해서 3개 문자만큼만 반환)

const currentStr5 = str.substr(-3,3);   //nce (문자열의 역순 3번째부터 3)
728x90

'JavaScript' 카테고리의 다른 글

문자열 결합 / 템플릿 문자열  (4) 2022.08.17
문자열 검색 메서드(indexOF/lastIndexOf)  (6) 2022.08.16
정규식 표현  (5) 2022.08.16
내장 함수  (4) 2022.08.12
배열 메서드(join/push/pop)  (11) 2022.08.11

댓글


HTML이미지
HTML이미지

JAVASCRIPT

자세히 보기
HTML이미지