본문 바로가기

인프런/자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.2

자바 스크립트 코어 라이브러리-2, String 클래스

String 클래스

1. String 클래스란?

- String 클래스에는 문자열을 생성하는 기능을 시작으로 문자열과 관련된 유요한 기능이 있다.

 

2. String 클래스의 실무에서의 활용 (무궁무진하게 많음!)

- 사이트 로그인 페이지 제작 시 입력받은 아이디와 패스워드의 좌우공백을 없애주는 기능

- 게시판 제작 시 게시물의 특정 문자열을 다른 문자열로 치환 혹은 삭제 기능

 

String 클래스의 주요 기능

 

1. 프로퍼티

- length : 문자열 개수

2. 함수(메서드)목록

메소드 설명
indexOf() String 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치의 인덱스를 반환함.
lastIndexOf() String 인스턴스에서 특정 문자나 문자열이 마지막으로 등장하는 위치의 인덱스를 반환함.
charAt() String인스턴스에서 전달받은 인덱스에 위치한 문자를 반환함.
charCodeAt() String 인스턴스에서 전달받은 인덱스에 위치한 문자의 UTF-16 코드를 반환함. (0 ~ 65535)
charPointAt() String 인스턴스에서 전달받은 인덱스에 위치한 문자의 유니코드 코드 포인트(unicode point)를 반환함.
slice() String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자열을 추출한 새 문자열을 반환함.
substring() String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자열을 추출한 새 문자열을 반환함.
substr() String 인스턴스에서 전달받은 시작 인덱스부터 길이만큼의 문자열을 추출한 새로운 문자열을 반환함
split() String 인스턴스에서 구분자(separator)를 기준으로 나눈 후, 나뉜 문자열을 하나의 배열로 반환함
concat() String 인스턴스에서 전달받은 문자열을 결합한 새로운 문자열을 반환함
toUpperCase() String 인스턴스의 모든 문자를 대문자로 변환한 새로운 문자열을 반환함
toLowerCase() String 인스턴스의 모든 문자를 소문자로 변환한 새로운 문자열을 반환함
trim() String 인스턴스의 양 끝에 존재하는 공백과 모든 줄 바꿈(LF, CR 등)를 제거한 새로운 문자열을 반환함
search() 인수로 전달받은 정규 표현식에 맞는 문자나 문자열이 처음으로 등장하는 위치의 인덱스를 반환함
replace() 인수로 전달받은 패턴에 맞는 문자열을 대체 문자열로 변환한 새 문자열을 반환함
match() 인수로 전달받은 정규 표현식에 맞는 문자열을 찾아서 하나의 배열로 변환함
includes() 인수로 전달받은 문자나 문자열이 포함되어 있는지를 검사한 후 그 결과를 불리언 값으로 반환함
startsWith() 인수로 전달받은 문자나 문자열로 시작되는지를 검사한 후 그 결과를 분리언 값으로 반환함
endsWith() 인수로 전달받은 문자나 문자열로 끝나는지를 검사한 후 그 결과를 불리언 값으로 반환함
toLocaleUpperCase() 영문자뿐만 아니라 모든 언어의  문자를 대문자로 변환한 새로운 문자열을 반환함
toLocaleLowerCase() 영문자뿐만 아니라 모든 언어의  문자를 소문자로 변환한 새로운 문자열을 반환함
localeCompare() 인수로 전달받은 문자열과 정렬 순서로 비교하여 그 결과를 정수 값으로 반환함
normalize() 해당 문자열의 유니코드 표준화 양식(Unicode Normalizeation Form)을 반환함
repeat() 해당 문자열을 인수로 전달받은 횟수만큼 반복하여 결합한 새로운 문자열을 반환함
toString() String 인스턴스의 값을 문자열로 반환함
valueOf() String 인스턴스의 값을 문자열로 반환함

 

1. 문자열 만들기

- 문자열 만드는 방법은 2가지 존재한다.

① 리터럴 방식 : let str = "hi";

② String 클래스의 객체를 생성해 이용 : let str = new String("hi");

- 주의 사항

alert("hi".length); // 실행 결과 2

alert("hi".charAt(0)); // 실행 결과 h

 

위와 같이 실행하면 정상적으로 작성한다. 실행될 수 있는 이유는 바로 문자열 리터럴 방식 구문은 자바스크립트에 의해서 해석될 때, String클래스의 객체를 생성해서 이용하는 방식으로 변환되어 실행되기 때문이다.

alert("hi".length); => new String("hi").length;

alert("hi".charAt(0)); ->new String("hi").charAt(0);

 

2. 문자열 길이 알아내기

- 문자열 길이를 알아내는 방법은 length 프로퍼티를 사용한다.

let str ="안녕하세요";

let len = str.length; // 5

 

3. 특정 위치의 문자 구하기

- charAt() 메서드를 이용하면 특정 위치의 문자를 구할 수 있다.

let str = "안녕하세요";

let ch = str.charAt(2)' // 하

 

4. 문자(열) 위치 찾기

- indexOf() 메서드를 이용하면 특정 문자 또는 문자열의 위치를 구할 수 있다.

let ch = 문자열.indexOf(searcgValue,start);

매개변수

searchValue : 찾는 문자열, start : 시작 위치, 기본 값은 0

리턴값

찾는 문자열의 위치 값, 찾지 못하면 -1을 리턴함

 

5. 특정 위치에 문자 추가

- 특정 위치에 문자를 추가하는 기능은 없다. 하지만 여러 문자열 메서드를 혼합하여 직접 만들어야한다.

이 때, slice() 메서드와 substr() 메서드를 이용하면 문자열을 추가하는 기능을 만들 수 있다.

① slice() 메서드

let 결과 = 문자열.slice(start, end);

매개변수

start: 문자열 시작 위치, end : 문자열 끝 위치

리턴값

지정한 문자열

주의 : slice() 메서드는 매개변수 첫 번째 값인 시작 인덱스 위치에서부터 두 번째 매개변수 값인 마지막 인덱스 전 단계까지의 문자열을 복사하는 것이지 잘라내는 것이 아님을 기억하자.

②substr() 메서드

let 결과 = 문자열.substr(start,end)

매개변수

start : 문자열 시작 위치, length : 문자열 개수

리턴값

지정한 문자열

 

6. 특정 위치의 문자를 다른 문자로 변경하기

- repalce() 메서드를 이용하면 특정 위치의 문자를 다른 문자로 쉽게 변경 가능하다.

let 결과 = 문자열.slice(searchValue,newValue);

매개변수

searchValue : 찾는 문자 , newValue : 대체 문자

리턴값

찾는 문자를 대체 문자로 변경한 문자열을 리턴

 

7. 특정 위치에 문자 제거

- 특정 위치에 문자를 제거하는 기능은 없다. 하지만 여러 문자열 메서드를 혼합하여 직접 만들어야 한다.

이 때, 앞서 보았던 slice() 메서드와 substr() 메서드를 이용하면 문자열을 제거하는 기능을 만들 수 있다.