참고: https://www.scaler.com/topics/charat-in-javascript/
자바스크립트 String 클래스의 charAt() 메소드는 문자열에서 지정된 인덱스의 특정 문자를 가져옵니다.
String.charAt() 문법
자바스크립트의 charAt() 메소드의 문법은 다음과 같습니다:
stringName.charAt(indexValue);
다른 메소드와 마찬가지로 위 구문에서 보이는 바와 같이 .(dot)을 사용하여 원하는 문자열에서 이 메소드를 실행해야 합니다.
String.charAt() 매개변수
charAt() 메소드는 하나의 매개변수를 받습니다:
indexValue: 원하는 문자의 인덱스로서 number 타입입니다.
String.charAt() 리턴 값
자바스크립트 charAt() 메소드의 리턴 값은 한 개의 문자를 가지는 문자열 타입의 값 입니다.
자바스크립트의 charAt() 이란?
자바스크립트에서 문자열 처리를 하는 경우 문자열에서 특정한 문자를 가져와야 하는 상황이 있을 수 있습니다. 이 때 String.charAt() 메소드를 사용할 수 있습니다. 이 메소드는 인덱스 값을 매개변수로 받아 문자열에서 인덱스에 해당하는 문자를 리턴합니다.
전달 받은 인덱스가 문자열의 범위를 넘어가는 경우 빈 문자열을 리턴합니다. 또한 인덱스를 전달하지 않으면 기본 인덱스를 0으로 할당하여 문자열의 0 번째 인덱스에 해당하는 문자를 리턴합니다.
charAt() 메소드의 중요 포인트
- 전달 받은 인덱스가 문자열의 범위를 넘아가면 빈 문자열 리턴
- 인덱스를 전달하지 않으면 기본 인덱스를 0으로 할당하여 문자열의 첫 번째 문자를 리턴
- 매개변수로 number 타입이 아닌 숫자를 담고있는 string 타입을 전달하면 이를 해당하는 number로 변환
- 숫자 형식의 문자열이 아닌 일반 문자열을 전달하면 인덱스 0의 문자 리턴
- boolean 값을 매개변수로 전달하면 true일 경우 인덱스를 1로, false일 경우 0으로 판단
예제 1:
인덱스에 해당하는 문자를 가져오는 방법:
let myStr = "Hello";
let myChar = myStr.charAt(1);
console.log(myChar);
예제 2: 문자열의 첫 번째 문자 가져오기
let myStr = "Have a nice day";
let myChar = myStr.charAt(0);
console.log(myChar);
이 예제에서는 자바스크립트 charAt() 메소드를 사용하여 문자열의 첫 번째 문자를 가져왔습니다. 0 번째 인덱스에는 문자 'H'가 위치하므로 'H'를 리턴합니다.
예제 3: 마지막 문자 가져오기
let myStr = "Have a nice day";
let myChar = myStr.charAt(myStr.length-1);
console.log(myChar);
이 예제에서는 charAt() 메소드를 사용하여 지정된 문자열의 마지막 인덱스에 있는 문자를 가져왔습니다. 마지막 문자의 인덱스는 String.length 속성을 사용하여 문자열의 길이를 얻고 인덱스의 시작 값은 0 부터 이므로 1을 뺍니다. 여기서는 마지막 인덱스에 'y'가 위치하므로 'y'를 리턴합니다.
정리
자바스크립트의 charAt() 메소드는 문자열의 지정된 인덱스 값에서 문자를 찾는 데 사용합니다.
인덱스 값은 숫자 또는 숫자 형태의 문자열을 받을 수 있고 그 이외의 타입을 전달하면 인덱스를 0으로 여깁니다. 하지만 boolean 타입을 넘긴 경우 true면 두 번째 문자를 리턴합니다.
charAt() 메소드의 리턴 값은 하나의 문자만을 가지는 문자열입니다.
charAt() 메소드에 인덱스 값이 전달되지 않으면 첫 번째 문자를 리턴합니다.
관련 글
'dev > javascript' 카테고리의 다른 글
[javascript] 자바스크립트 Picture in Picture (PiP, 플로팅 동영상) (9) | 2023.06.30 |
---|---|
[javascript] 자바스크립트 첫글자 대문자로 (charAt, toUpperCase, slice) (7) | 2023.06.30 |
[javascript] 자바스크립트 배열 초기화 (8) | 2023.06.27 |
[javascript] 자바스크립트 현재 시간 가져오기 (Date) (6) | 2023.06.27 |
[javascript] HTML에서 함수 호출 (11) | 2023.06.26 |
댓글