7장 문자열
문자열은 하나 이상의 문자를 의미한다. 자바스크립트에서는 문자열 처리를 위해 다양한 String 객체의 메서드를 제공한다. 7장에서는 문자열에서 특정 문자열을 추출하는 방법과 문자열을 다른 문자열로 치환하는 방법 등에 대해서 공부한다. 또 한 문자열에 포함된 공백을 삭제하는 방법과 문자열을 병합하고 특정 문자를 문자열 앞뒤에 채우는 방법에 대해서 배운다. 마지막으로 문자열에서 특정 문자열을 검색하는 다양한 방법에 대해서 학습한다.
7.1 문자열이란?
자바스크립트 문자열(string)은 텍스트를 저장하고 처리하는데 사용된다. 2장에서 설명한 것과 같이 문자열에서는 문자들을 큰 따옴표(") 또는 작은 따옴표(')로 감싼다. 그리고 경우에 따라서는 백틱(`)을 사용하는 템플릿 문자열을 사용할 수도 있다. 자바스크립트에서 문자열은 웹 페이지의 인코딩 방식과는 별개로 항상 UTF-16 방식을 따른다.
7.1.1 특정 문자 찾기
문자열은 하나 이상의 문자들로 구성된다. 다음 예제를 통해서 문자열에서 인덱스를 이용해서 문자를 읽는 방법에 대해 알아보자.
| 예제 7-1. 문자열에서 특정 문자 읽기 | string.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "안녕하세요.";
let text = "";
text += str1[0] + "<br>";
text += str1[2] + "<br>";
text += str1[4];
document.getElementById("show").innerHTML = text;
</script>| 예제 7-1. 문자열에서 특정 문자 읽기 | string.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "안녕하세요.";
let text = "";
text += str1[0] + "<br>";
// str1[0]은 문자열 변수 str1의 첫번째 문자를 나타낸다.
text += str1[2] + "<br>";
// str1[2]은 문자열 변수 str1[2]의 세번째 문자를 나타낸다.
text += str1[4];
// str1[4]은 문자열 변수 str1[4]의 다섯번째 문자를 나타낸다.
document.getElementById("show").innerHTML = text;
</script>문자열 괄호([]) 안에 사용되는 숫자를 인덱스(index)라고 한다. 문자열의 인덱스는 0부터 시작한다.
7.1.2 문자 반복 일기
다음은 문자열 '안녕하세요'의 각 문자를 For 문을 이용해서 반복해서 읽어오는 예이다.
| 예제 7-2. 문자열의 각 문자 For 문으로 읽어오기 | string2.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "안녕하세요.";
let text = "";
for (let i=0; i<=str1.length-1; i++) {
text += str1[i] + "<br>";
}
document.getElementById("show").innerHTML = text;
</script>| 예제 7-2. 문자열의 각 문자 For 문으로 읽어오기 | string2.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "안녕하세요.";
// 문자열 변수 str1 선언
let text = "";
// 문자열 변수 text에 null 지정
for (let i=0; i<=str1.length-1; i++) {
text += str1[i] + "<br>";
// 문자열 변수 str[1]의 첫번째 문자를 변수 text에 저장
}
document.getElementById("show").innerHTML = text;
</script>str1.length는 문자열 '안녕하세요.'의 길이를 의미하며 그 값은 6이 된다. 반복 루프에서 변수 i는 0, 1, 2, ... 4의 값을 가진다. 반복 루프가 종료되면 그림 7-2에서와 같이 '안녕하세요.'에 잇는 각 문자가 세로로 출력된다.
7.2 문자열 추출
자바스크립트에서 문자열(string)내에 포함된 특정 문자열을 추출하는 데는 다음의 String 객체의 두가지 메서드가 많이 사용된다.
| 특정 문자열을 추출하는 String 객체의 메서드 | |
| 메서드 | 설명 |
| slice(start, end) | slice()는 문자 시작 위치와 끝 위치를 기준으로 문자열을 추출함 인덱스 start부터 인덱스 end-1까지의 문자열을 추출함 |
| substr(start, length) | substr()은 시작 위치와 추출하는 개수를 지정함 인덱스 start부터 length 개수의 문자열을 추출함 |
7.2.1 slice() 메서드
slice() 메서드는 문자열 내 특정 문자의 시작 위치와 끝 위치를 기준으로 문자열을 추출한다.
| 예제 7-3. slice() 메서드로 문자열 추출하기 | slice.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "가는 말이 고와야 오는 말이 곱다.";
let text = "";
text += str1.slice(3, 8) + "<br>";
text += str1.slice(3) + "<br>";
text += str1.slice(-5);
document.getElementById("show").innerHTML = text;
</script>| 예제 7-3. slice() 메서드로 문자열 추출하기 | slice.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "가는 말이 고와야 오는 말이 곱다.";
let text = "";
text += str1.slice(3, 8) + "<br>";
// slice() 메서드를 이용해서 문자열 인덱스 3번째 부터 8번째 까지 문자열을 추출한다.
text += str1.slice(3) + "<br>";
// slice() 메서드를 이용해서 문자열 인덱스 3번째 부터 끝까지 문자열을 추출한다.
text += str1.slice(-5);
// slice() 메서드를 이용해서 문자열의 끝에서 5개의 문자열을 추출한다.
document.getElementById("show").innerHTML = text;
</script>
7.2.2 substr() 메서드
substr() 메서드는 문자열 내에서 특정 문자의 시작 위치와 추출하는 개수를 지정해서 문자열을 추출한다. 다음 예제를 통해서 substr() 메서드의 사용법에 대해서 알아보자.
| 예제 7-4. substr() 메서드로 문자열 추출하기 | substr.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "고래 싸움에 새우 등 터진다.";
let text = "";
text += str1.substr(5, 3) + "<br>";
text += str1.substr(7) + "<br>";
text += str1.substr(-3);
document.getElementById("show").innerHTML = text;
</script>| 예제 7-4. substr() 메서드로 문자열 추출하기 | substr.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "고래 싸움에 새우 등 터진다.";
let text = "";
text += str1.substr(5, 3) + "<br>";
// 메서드 substr()를 이용해서 인덱스 5로부터 3개의 문자열을 추출한다.
text += str1.substr(7) + "<br>";
// 메서드 substr()를 이용해서 인덱스 7로부터 끝까지 문자열을 추출한다.
text += str1.substr(-3);
// 메서드 substr()을 이용해서 끝에서 세개의 문자열을 출력한다.
document.getElementById("show").innerHTML = text;
</script>
7.3 문자열 변환
자바스크립트에서 문자열 반환에 사용된 String 객체의 메서드를 표로 정리하면 다음과 같다.
| 문자열 변환에 관련된 String 객체의 메서드 | |
| 메서드 | 설명 |
| toUpperCase() | 영문 대문자로 변경한 문자열을 반환함 |
| toLowerCase() | 영문 소문자로 변경된 문자열을 반환함 |
| replace() | 첫 번째 매칭된 문자열을 다른 문자열로 치환한 문자열을 반환함 |
| replaceAll() | 매칭된 모든 문자열을 다른 문자열로 치환한 문자열을 반환함 |
| concat() | 두 개 이상의 문자열을 연결한 문자열을 반환함 |
| split() | 문자열을 특정 문자열을 기준으로 분리한 문자열을 배열로 반환함 |
7.3.1 toUpperCase() 메서드
toUpperCase() 메서드는 영문 소문자를 대문자로 변경한 문자열을 반환한다.
| 예제 7-5. toUpperCaes() 메서드로 영문 대문자 변경하기 | to_upper_case.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "Javascript";
text = "";
text += str1.toUpperCase() + "<br>";
text += str1;
document.getElementById("show").innerHTML = text;
</script>| 예제 7-5. toUpperCaes() 메서드로 영문 대문자 변경하기 | to_upper_case.html | 코드 원문 |
<p id="show"></p>
// html 태그 p 선언하고 id 값으로 show를 지정
<script>
let str1 = "Javascript";
// 문자열 변수 str1 선언하고 값으로 "Javascript" 저장
text = "";
// 문자열 변수 text 선언하고 null값을 넣는다.
text += str1.toUpperCase() + "<br>";
/* 메서드 toUpperCase()를 사용해서 문자열 변수 str1의 문자열을
모두 대문자로 만든 후 반환한다. */
text += str1;
document.getElementById("show").innerHTML = text;
</script>str1.toUpperCase()는 문자열 'Javascript'를 영문 대문자인 'JAVASCRIPT'로 변경한 문자열을 반환한다. 문자열 str1의 기존값은 변경되지 않는다.
7.3.2 toLowerCase() 메서드
toLowerCase() 메서드는 영문 대문자를 소문자로 변경한 문자열을 반환한다.
| 예제 7-6. toLowerCase() 메서드로 영문 소문자 변경하기 | to_lower_case.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "I am a student";
text = "";
text += str1.toLowerCase() + "<br>";
text += str1;
document.getElementById("show").innerHTML = text;
</script>| 예제 7-6. toLowerCase() 메서드로 영문 소문자 변경하기 | to_lower_case.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "I am a student";
text = "";
text += str1.toLowerCase() + "<br>";
/* toLowerCase() 메서드를 사용해서 변수 str1에 저장된 문자열을
모두 소문자로 만들어 반환한다. */
text += str1;
document.getElementById("show").innerHTML = text;
</script>
7.3.3 replace() 메서드
replace() 메서드는 몬자열에서 특정 문자열을 찾아 다른 문자열로 치환한다. 다음 예제를 통해서 replace() 메서드의 사용법에 대해서 알아보자.
| 예제 7-7. replace() 메서드로 문자열 치환하기 | replace.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "My friend or a friend of mine?";
let str2 = str1.replace("friend", "student");
text = "";
text += str2 + "<br>";
text += str1;
document.getElementById("show").innerHTML = text;
</script>| 예제 7-7. replace() 메서드로 문자열 치환하기 | replace.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "My friend or a friend of mine?";
let str2 = str1.replace("friend", "student");
/* 문자열 변수 str1의 문자열을 메서드 replace를 이용해서
'friend'를 'student'로 치환 */
text = "";
text += str2 + "<br>";
text += str1;
document.getElementById("show").innerHTML = text;
</script>
7.3.4 replace() 메서드
replace() 메서드는 문자열에서 특정 문자열을 찾아 매치된 모든 것들을 다른 문자열로 치환한다.
| 예제 7-8. replaceAll() 메서드로 문자열 치환하기 | replace_all.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "Apple apple apple apple apple";
let str2 = str1.replaceAll("apple", "orange");
text = "";
text += str2 + "<br>";
text += str1;
document.getElementById("show").innerHTML = text;
</script>| 예제 7-8. replaceAll() 메서드로 문자열 치환하기 | replace_all.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "Apple apple apple apple apple";
let str2 = str1.replaceAll("apple", "orange");
// replaceAll 메서드를 사용해서 문자열 'apple'를 문자열 'orange'로 변경
text = "";
text += str2 + "<br>";
text += str1;
document.getElementById("show").innerHTML = text;
</script>
7.3.5 concat() 메서드
concat() 메서드는 두 개 이상의 문자열을 서로 병합하는데 사용된다. cancat() 메서드는 기존의 문자열은 변경하지 않고 문자열들을 연결한 새로운 문자열을 반환한다.
| 예제 7-9 concat() 메서드로 문자열 연결하기 | concat.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "토끼";
let str2 = "거북이";
text = "";
text += str1.concat(str2) + "<br>";
text += str1.concat("와 ", str2) + "<br>";
text += str1;
document.getElementById("show").innerHTML = text;
</script>| 예제 7-9 concat() 메서드로 문자열 연결하기 | concat.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "토끼";
let str2 = "거북이";
text = "";
text += str1.concat(str2) + "<br>";
// 메서드 concat()를 사용해서 문자열 str1과 str2 병합하고 반환
text += str1.concat("와 ", str2) + "<br>";
/* 메서드 concat()를 사용해서 문자열 str1과 str2를 병합하는데 사이에
"와 "를 넣는다. */
text += str1;
document.getElementById("show").innerHTML = text;
</script>
7.3.6 split() 메서드
split() 메서드는 특정 문자열을 기준으로 문자열을 분리하여 배열 형태로 반환한다. 다음 예제에서는 split() 메서드를 이용해서 휴대폰 번호에 포함된 하이픈(-)을 기준으로 문자열을 분리했다.
| 예제 7-10. split() 메서드로 휴대폰 번호 분리하기 | split1.html | 코드 원문 |
<p id="show"></p>
<script>
let phone = "010-1234-5678";
let arr = phone.split("-");
text = "";
text += arr[0] + "<br>";
text += arr[1] + "<br>";
text += arr[2];
document.getElementById("show").innerHTML = text;
</script>| 예제 7-10. split() 메서드로 휴대폰 번호 분리하기 | split1.html | 코드 분석 |
<p id="show"></p>
<script>
let phone = "010-1234-5678";
let arr = phone.split("-");
// 메서드 split()를 사용해서 문자열 변수 phone의 문자열을
-를 기준으로 분리한 다음에 배열 arr[]에 차례대로 저장한다.
text = "";
text += arr[0] + "<br>";
// 배열 arr[0]에 저장된 값을 출력한 다음 개행한다.
text += arr[1] + "<br>";
text += arr[2];
document.getElementById("show").innerHTML = text;
</script>arr[0], arr[1], arr[2]는 각각 '010', '1234', '5678' 값을 가진다.
split() 메서드는 문자열을 분리해서 배열로 변환하는 데 사용된다. 다음 코드에서는 split() 메서드 호출 후 분리되어 저장된 배열의 요소를 읽어오는데 for 문을 이용하고 있다.
| 예제 7-11. split() 메서드 호출 후 for 문 이용하기 | split2.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "We are the world";
let arr = str1.split(" ");
text = "";
for (let i=0; i<=arr.length-1; i++) {
text += arr[i] + "<br>";
}
document.getElementById("show").innerHTML = text;
</script>| 예제 7-11. split() 메서드 호출 후 for 문 이용하기 | split2.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "We are the world";
let arr = str1.split(" ");
/* 메서드 str1를 이용해서 공백을 기준으로 문자열을 분리한 후
배열에 차례대로 저장한다. */
text = "";
for (let i=0; i<=arr.length-1; i++) {
text += arr[i] + "<br>";
// 배열에 저장된 값을 차례대로 변수 text에 저장한다.
}
document.getElementById("show").innerHTML = text;
</script>
'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글
| 예제로 배우는 자바스크립트 요약 및 코드 분석 8장 8.1 ~ 8.2 (0) | 2023.10.12 |
|---|---|
| 예제로 배우는 자바스크립트 요약 및 코드 분석 7장 7.4 ~ 7.5 (0) | 2023.10.12 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 6장 6-3~6-4 (0) | 2023.10.11 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 6장 6.1~6.2 (0) | 2023.10.10 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 5장 5.4~5.6 (0) | 2023.10.10 |