본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

제가 배웠던것을 한곳에 정리해보았어요!

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

Javascript

slice() / substring() / substr() 에 대하여~~

by C0Di 2022. 8. 16.
728x90

slice

slice는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용합니다

1. "문자열".slice(시작위치)
2. "문자열".slice(시작위치, 끝나는 위치)
3. 시작 위치는 문자열을 뽑아내야 하기 떄문에 시작위치는 끝나는 위치보다 숫자가 작아야 한다
const str1 = "javascript refrence"
const currentStr1 = str1.slice(0);  //javascript reference
const currentStr2 = str1.slice(1);  //avascript reference
const currentStr3 = str1.slice(2);  //vascript reference
const currentStr4 = str1.slice(0, 1);  //j
const currentStr5 = str1.slice(0, 2);  //ja
const currentStr6 = str1.slice(0, 3);  //jav
const currentStr7 = str1.slice(1, 2);  //a
const currentStr8 = str1.slice(1, 3);  //av
const currentStr9 = str1.slice(1, 4);  //avs
    
//마이너스는 뒷자리부터 시작
const currentStr10 = str1.slice(-1);  //e
const currentStr11 = str1.slice(-2);  //ce
const currentStr12 = str1.slice(-3);  //nce
const currentStr13 = str1.slice(-3, -1);  //nc
const currentStr14 = str1.slice(-3, -2);  //n
const currentStr15 = str1.slice(-3, -3);  //
    
const currentStr16 = str1.slice(1, 4);  //ava
const currentStr17 = str1.slice(4, 1);  //ava

substring()

Substring은 slice의 경우 시작 위치는 문자열을 뽑아내야 하기 떄문에 시작위치는 끝나는 위치보다 숫자가 작아야 했지만
Substring()은 시작값이 끝나는 값보다 클 경우 에러를 방지하기 위해 두 값을 바꿔서 처리합니다.

1. "문자열".substring(시작위치(큰값), 끝나는 위치(작은값)) = 가능
2. "문자열".substring(시작위치(작은값), 끝나는 위치(큰값)) = 가능
//서브 스트링은 자동으로 인식해서 출력시켜준다
const currentStr18 = str1.substring(1, 4);  //ava
const currentStr19 = str1.substring(4, 1);  //ava

substr()

substr은 문자열에서 시작지점과 시작지점부터 추출할 길이를 정해 추출 가능합니다.

1. "문자열".substr(시작위치)
2. "문자열".substr(시작위치, 길이)
const currentStr20 = str1.substr(0);  // javascript reference
const currentStr21 = str1.substr(1);  // avascript reference
const currentStr22 = str1.substr(2);  // vascript reference
const currentStr23 = str1.substr(0, 1);  // j
const currentStr24 = str1.substr(0, 2);  // ja
const currentStr25 = str1.substr(0, 3);  // jav
const currentStr26 = str1.substr(1, 2);  // av
const currentStr27 = str1.substr(1, 3);  // ava
const currentStr28 = str1.substr(1, 4);  // avas
const currentStr29 = str1.substr(-1);  // e
const currentStr30 = str1.substr(-2);  // ce
const currentStr31 = str1.substr(-3);  // nce
const currentStr32 = str1.substr(-1, 1);  // e
const currentStr33 = str1.substr(-2, 2);  // ce
const currentStr34 = str1.substr(-3, 3);  // nce
728x90
반응형

'Javascript' 카테고리의 다른 글

정규식 표현에 대해 araboza!  (4) 2022.08.16
IndexOf()/lastIndexOf() 에 대하여!  (6) 2022.08.16
내장함수가 뭘까?  (5) 2022.08.14
join() / pop() / push() 에 대하여 알아보자!  (9) 2022.08.11
요소 선택 해보기~  (6) 2022.08.06

댓글

#HASH_TAGS

-

1

JQuery 숙제가 다양해서 너무 좋아요 제이쿼리 scroll-snap-type 내일은 즐거운 월요일 공부 오징어 1Kg 당 3000원 울적하니 꽃을 달아봤습니다 다크모드 Method ImageSlideEffect 테스트 코드 오늘도 웹표준은.. 오징어 두마리 포획 완료 메서드 화사한가요? 오늘은 내가바로 오징어! 멈추지 않는 ' j ' 시리-즈 테스트테스트 오늘 조업 마감했습니다. 슬라이드 결과 : 월요일 코딩 선택해주세요 이건 또 뭐람 필터선택자 HTML scroll-snap-align 오징어 한마리 수확 완료!