관리 메뉴

프론트엔드 정복하기

JS | String 관련 메소드 본문

JavaScript

JS | String 관련 메소드

GROWNFRESH 2020. 7. 3. 12:49

string.length

: 문자열의 길이를 반환

https://www.codingfactory.net/10895

 

string . indexOf ( 찾고싶은 문자열(필수값) , fromIndex(선택값) )

: 문자열 내에서 특정 문자열의 index 값을 리턴한다.

: 문자열이 존재하지 않는다면 -1을 반환함.

: React에서 사용가능

 

예제

var stringValue = '생활코딩 - 자바스크립트 레퍼런스';

alert(stringValue.indexOf('자바스크립트',0)); // 7
alert(stringValue.indexOf('자바스크립트',2)); // 7, 두번째 인자로 2가 주어지면 탐색의 대상이 '코딩 - 자바스크립트 레퍼런스'로 줄어든다. index 값은 변하지 않는다
alert(stringValue.indexOf('자바스크립트',10)); // -1, '크립트 레퍼런스'에는 '자바스크립트'가 없기 때문에 -1을 리턴한다 

 

**찾고자하는 문자가 여러개 존재한다면, 가장 앞의 문자의 index를 찾는다.

**찾고자하는 문자 여러 개 중 가장 마지막 문자의 index를 찾고 싶다면 'lastIndexOf' 메서드 사용

 

**점 특수문자(.)를 찾을 때, '.'은 찾았고 정규식(/[.]/)은 못찾았다. (search함수는 반대였음)

 

string.substring (from, to)

: 특정 구간의 문자열을 추출함

-from : 필수값, 탐색 구간의 시작점

-to : 선택, 탐색구간이 끝나는 점

** from < to => from~to 사이의 문자열 리턴

** from > to => to~from 사이의 문자열 리턴

** from=to => 빈문자열 리턴

 

-react 사용 가능

 

: substring과 indexOf를 이용해 특정문자 뒤의 문자열을 도출한 뒤 삭제, 대체 등 수정 가능

 

 

string.toLowerCase( )

: 호출 문자열을 소문자로 변환한다.

 

 


[ 정규식에서 자주 사용되는 함수 ]

string.search( ' ' )

: 검색한 문자열의 위치값을 내놓음

-0부터 계산함

-공백도 계산함

-찾고자하는 문자가 없으면 -1을 반환

ex) Please visit Tistory! 에서 'Tistory'를 search하면 -> result=13 / P(0)으로부터 13번째에 T가 있음

 

**점 특수문자(.)를 search할 때, '.'은 못찾고, /[.]/은 찾았다. (indexOf함수는 반대였음)

 

/찾고자 하는 문자/.test ( string )

: 찾는 문자열이 있는지 없는지 알려준다.

: true or false (boolean)

** 대각선 안에 따옴표 없이 찾고자 하는 문자를 입력하면 된다.

 

string.replace( 기존문자, 바꿀 문자 )

: 문자열의 일부를 다른 문자열로 바꿔준다.

https://tonks.tistory.com/20


string.startsWith('특정문자')

string.endsWith('특정문자')

: 특정문자가 string의 시작점(or 끝점)에 있는지 확인

: boolean값 도출

 

element.getAttribute( 'attributename' )

: 선택한 요소(element)의 특정 속성 값을 가져온다.

 

ex)

<a href="https://www.codingfatory.net" id="abc">Coding Factory</a>

var jbHref = document.getElementById( 'abc' ).getAttribute( 'href' );  -> abc ID를 가진 a태그의 href 속성을 저장함

document.write( '<p>href : ' + jbHref + '</p>' );

 

-> 문자열로 'href : https://www.codingfactory.net' 으로 출력됨

 

**React에서는 getAttribute 메서드를 사용하지 않음/value값을 저장한 state으로 직접 관리한다.

 


String . repeat( Number )

Number만큼 String을 반복함

 

**

'abc'.repeat(3.5); // 'abcabcabc' (count will be converted to integer)

(3.5도 가능함?!, 출력되는 개수가 정수로 출력된다면 가능한듯)

 

 

 

getElements.... .className = 'boolah'

=> 클래스 이름 변경

 

 

isNaN ( string )

: NaN이란 ) 문자열을 숫자로 변경 시 숫자로 바꿀 수 없는 경우 NaN으로 변환.

: isNaN : NaN 여부를 boolean 값으로 체크한다.

 

'JavaScript' 카테고리의 다른 글

javascript로 오늘 날짜 구하기  (0) 2020.07.20
JS 자식선택자  (0) 2020.07.07
JS | window.onload 함수  (0) 2020.06.29
JS로 css 변경하기  (0) 2020.06.23
Jquery의 $(this).index()를 ---> JS언어로  (0) 2020.06.23