문자열과 관련된 기능
실제 이용 사례
- 사이트 로그인 페이지 제작 시 입력받은 아이디와 패스워드 좌우 공백 없애주는 기능
- 게시판 제작 시 게시물의 특정 문자열을 다른 문자열로 치환하거나 삭제
주요기능 -----------------------------------------
프로퍼티 목록
| length | 문자열 개수 |
메서드 목록
| charAt(n) | n번째 문자 구하기 |
| charCodeAt(n) | n번째 문자의 코드 값 구하기 |
| concat(str) | 문자열 뒤쪽에 str을 연결해 새로운 문자열 만들기 |
| indexOf(substr) | substr문자열이 위치한 위치값 구하기 앞에서부터 검색 시작 |
| lastIndexOf(substr) | substr문자열이 위치한 위치값 구하기 뒤에서부터 검색 시작 |
| match(reg) | 정규표현식(reg)을 활용한 문자열 검색 |
| replace(reg,rep) | 정규표현식을 활용한 문자열 교체 |
| search(reg) | 정규표현식을 활용한 문자열 위치 검색 |
| slice(start,end) |
start번부터 end번째 문자열 추출 |
| split(str) | 문자열을 str로 분할해 배열로 생성해줌 |
| substr(start[,count]) | start번째부터 count개수만큼 문자열 추출 |
| toLowerCase() | 모든 문자열을 소문자로 변환 |
| toUpperCase() | 모든 문자열을 대문자로 변환 |
| trim() | 좌우 공백 제거 |
01: 문자열 만들기
문자열 만드는 방법은 2가지가 있다.
방법1 : 리터럴 방식
var str = "hello";
방법2 : String 클래스의 객체를 생성해 이용하는 방식
var str=new String("Hello")
alert("Hello", length); //실행결과 5
alert("alert("Hello",charAt(0)); //실행결과 H
문자열 리터럴 방식 구문은 자바스크립트에 의해 해설될 때 string 클래스 객체를 이용하는 방식으로 변환되 실행된다.
"Hello",length; -> new String("Hello").length;
"Hello",charAt(0); -> new String("Hello").charAt(0);
02: 문자열 길이 알아내기
length 프로퍼티 사용
var str = window.prompt("문자를 입력해 주세요");
alert("문자열길이는 = "+str.length);
03: 특정 위치의 문자 구하기
charAt()을 이용하면 특정 위치의 문자를 구할 수 있다.
var ch=문자열.charAt(index);매개변수
index : 문자열 위치 인덱스 값, 인덱스는 0부터 시작
리턴값
index 위치의 문자
설명
문자열에서 문자 위치는 다음과 같다. index값은 0부터 시작
예제02) 입력받은 문자열을 1초마다 한 문자씩 출력하기 입력받은 문자열을 1초에 한 문자씩 #output에 출력 모든 문자를 출력하면 "종료됐습니다."라는 알림메시지를 출력한 후 타이머를 정지시킨다.
#output에 문자를 출력하는 방법
$output.text(출력하고 싶은 문자);
<script>
$(document).ready(function() {
var str = window.prompt("문자를 입력해 주세요.");
var $output = $("#output");
var index = 0;
var timerID = setInterval(function() {
var ch=str.charAt(index);
$ouput.text(ch);
index++
if (index >= str.length) {
clearInterval(timerID);
alert("종료됐습니다.");
}
},1000);
})
</script>
</head>
<body>
<div id="output">
</div>
</body>
단계01_타이머 함수 만들기
1초마다 한 번씩 실행되는 타이머 함수 만들기
단계02_인덱스에 해당하는 문자 출력
1. 출력할 문자의 인덱스 값을 저장할 변수(index)를 만든 후 초깃값으로 0을 입력해 준다
2. 다음으로 문자열에서 index변숫값에 해당하는 문자를 구해 준다.
3. 구한 문자를 #output에 출력
4. 문자 위치를 나타내는 인덱스 값을 1증가시켜준다.
5. 조건문을 활용해 모든 문자가 출력됐는지 확인 만약 모든 문자가 출력됐다면 타이머를 정지시키고 alert()함수를 이용해 종료 메시지를 출력
04: 문자(열) 위치 찾기
indexOf()메서드를 이용하면 특정 문자 또는 문자열이 위치하고 있는 위치 값을 쉽게 구할 수 있다.
var ch = 문자열.indexOf(searchvalue,start);매개변수
searchvalue : 찾는 문자열
start : 시작 위치, 기본값은 0
리턴값
찾는 문자열의 위치 값, 만약 찾지 못할 경우 -1
예제3) 문자열 위치 알아내기
문자열을 입력받아 입력받은 문자열에 sample이라는 문자가 포함돼 있는지 판단한 후 만약 존재한다면
몇 번째 위치에 있는지 출력해 주세요. 존재하지 않는 경우 “문자가 존재하지 않습니다.”라는 메시지를
출력해 주세요
var data = window.prompt("문자를 입력해 주세요.");
var index = data.indexOF("sample");
if(index >=0)
alert(index + "번째 위치에 있습니다.");
else
alert("문자가 존재하지 않습니다.");
05: 특정 위치에 문자 추가
var 결과 = 문자열.slice(start, end);매개변수
start : 문자열의 시작위치
end : 문자열의 끝위치
리턴값
지정한 문자열
1_ slice() 메서드는 매개변수 첫 번째 값인 시작 인덱스 위치에서 부터 두 번째 매개변수 값인 마지막 인덱스 전단개째까지의 문자열을 복사한다. 원본 문자열은 전혀 변경되지 않는다. 즉 특정문자열을 잘라내기가 아니라 복사하기
<script>
var str = "abcdef";
var str2 = str.slice(2, 4);
console.log(str); // <-- 실행결과 abcdef
console.log(str2); // <-- 실행결과 cd
</script> var data = "닉네임홍길동";
var result = data.slice(0, 3) + "-" + data.slice(3, data.length);
alert(result); //닉네임-홍길동
2_substr() 메서드
var 결과 = 문자열.substr(start, length);매개변수
start : 문자열 시작 위치
length : 문자열 개수
리턴값
지정한 문자열
특정 위치의 문자열을 복사할 때 사용하는 메서드 slice()메서드와 차이점은 두 번째 매개변수 값이 마지막 위치의 인덱스 값이 아니라 길이 값이라는 점만 다르고 동일하다.
var str = "abcdef";
var str2 = str.substr(2, 2);
console.log(str); // <-- 실행결과 abcdef
console.log(str2); // <-- 실행결과 cd var data = "닉네임홍길동";
var result = data.substr(0, 3) + "-" + data.substr(3, data.length - 3);
alert(result); //실행결과 닉네임-홍길동
06: 특정 위치에 문자를 다른 문자로 변경
string 클래스 기능 중 replace()를 이용하면 특정 위치의 문자를 다른 문자로 쉽게 변경할 수 있다.
var result = 문자열.replace(searchvalue, newvalue);searchvalue 바꿔줄 문자열
newvalue 이걸로 바꿔준다.
문자열의 ?를 이름으로 변경
var data = "안녕하세요 ?님 자바스크립트에 온 걸 환영합니다.";
var result = data.replace("?", "홍길동");
alert(result);
07: 특정 위치에 문자 제거
특정 위치에 문자열을 제거하는 기능은 따로 없다. 여러 문자열 메서드를 이용해 만들어야 한다. 특정 위치의 문자 제거 역시 추가와 동일한 방법으로 slice()메서드와 substr메서드를 이용한다.
예제) data에 들어있는 - 문자 제거하기
var data = "닉네임-홍길동";
var result = data.slice(0, 3) + data.slice(4, data.length);
alert(result);
'javaScript > J Query & 스크립트' 카테고리의 다른 글
| 자바스크립트 공식사이트 (0) | 2022.02.07 |
|---|---|
| .off('click') .on('click') 와 .on('click')의 차이 (0) | 2022.01.04 |
| Math 클래스 : Math.min(), Math.max() (0) | 2019.08.14 |
| Math 클래스 (0) | 2019.08.12 |
| 타이머 함수 소개 - setInterval() (0) | 2019.08.05 |
댓글