반응형
7.4 공백 삭제와 문자열 패딩
자바스크립트에서 문자열에 포함된 공백을 삭제하거나 문자열을 틀정 문자열로 채우는 작업이 필요할 때가 있다. 이에 관련된 String 객체의 메서드를 표로 정리하면 다음과 같다.
| 공백 삭제와 문자열 패딩 메서드 | |
| 메서드 | 설명 |
| trim() | 문자열 양 쪽 끝 공백을 삭제한 문자열을 반환함 |
| trimStart() | 문자열 앞에 있는 공백을 삭제한 문자열을 반환함 |
| trimEnd() | 문자열 뒤에 있는 공백을 삭제한 문자열을 반환함 |
| padStart() | 문자열 앞을 특정 문자열로 채운 문자열을 반환함 |
| padEnd() | 문자열 뒤를 특정 문자열로 채운 문자열을 반환함 |
7.4.1 trim() 메서드
trim 메서드는 문자열 양쪽 끝에 있는 공백을 삭제하는 데 사용된다. 다음 예제에서 문자열 str1 앞쪽에는 5개의 공백이 포함되고 뒤쪽에는 7개의 공백이 포함되어 있다. trim() 메서드로 이 공백을 삭제하는 방법에 대해 알아보자.
| 예제 7-12. trim() 메서드로 문자열 양쪽 끝 공백 삭제하기 | trim.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = " javascript string ";
let str2 = str1.trim();
text = "";
text += str2 + "<br>";
text += str1.length + "<br>";
text += str2.length;
document.getElementById("show").innerHTML = text;
</script>| 예제 7-12. trim() 메서드로 문자열 양쪽 끝 공백 삭제하기 | trim.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = " javascript string ";
// 문자열 str1 선언
let str2 = str1.trim();
/* 메서드 trim()를 사용해서 변수 st1의 문자열의 공백을 삭제하고
그 값을 변수 str2에 저장 */
text = "";
text += str2 + "<br>";
text += str1.length + "<br>";
// 문자열 변수 str1의 길이 값을 문자열 변수 text에 저장하고 개행
text += str2.length;
// 문자열 변수 str2의 길이 값을 문자열 변수 text에 저장.
document.getElementById("show").innerHTML = text;
</script>str.trim()은 문자열 ' javascript '에서 'javascript string' 양쪽 끝에 있는 공백을 삭제한 후 문자열을 반환한다.
7.4.2 trimStart() 메서드
trimStart() 메서드는 문자열 앞쪽에 있는 공백만 삭제한다. 다음 예제를 통해서 trimStart() 메서드와 trim() 메서드의 차이점을 확인해보자.
| 예제 7-13. trimStart() 메서드로 문자열 앞 공백 삭제하기 | trim_start.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = " javascript string "
let str2 = str1.trimStart();
text = "";
for (let x of str2) {
if (x == " ")
text += "#"
else
text += x;
}
text += "<br>";
text += str1.length + "<br>";
text += str2.length;
document.getElementById("show").innerHTML = text;
</script>| 예제 7-13. trimStart() 메서드로 문자열 앞 공백 삭제하기 | trim_start.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = " javascript string "
let str2 = str1.trimStart();
/* 메서드 trimStart() 변수를 이용해서 문자열 앞의 공백을 삭제한 후
변수 str2에 저장 */
text = "";
// 문자열 변수 text를 선언하고 공백을 저장
for (let x of str2) {
/* for of 문 선언 변수 str2의 문자열을 차례대로 읽어와서
중괄호 안의 코드에서 반복한다. */
if (x == " ")
text += "#"
else
text += x;
}
text += "<br>";
text += str1.length + "<br>";
// 문자열 str1의 길이를 출력한 다음 개행한다.
text += str2.length;
// 문자열 str2의 길이를 출력한다.
document.getElementById("show").innerHTML = text;
</script>
7.4.3 trimEnd() 메서드
trimEnd() 메서드는 문자열 뒤쪽에 있는 공백을 삭제하는 데 사용된다. 다음 예제에서는 앞 예제 7-13에서 trimStart() 메서드 대신 trimEnd() 메서드를 사용한다.
| 예제 7-14. trimEnd() 메서드로 문자열 뒤 공백 삭제 | trim_end.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = " javascript string ";
let str2 = str1.trimEnd();
text = "";
for (let x of str2) {
if (x==" ")
text += "#"
else
text += x;
}
text += "<br>";
text += str1.length + "<br>";
text += str2.length;
document.getElementById("show").innerHTML = text;
</script>| 예제 7-14. trimEnd() 메서드로 문자열 뒤 공백 삭제 | trim_end.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = " javascript string ";
let str2 = str1.trimEnd();
/* 문자열 변수 str1에 trimEnd() 메서드를 적용해서 반환
문자열의 뒤 공백이 없어진다. */
text = "";
// 공백을 모두 #으로 바꾸는 for 문
for (let x of str2) {
// for of 문 선언
if (x==" ")
text += "#"
else
text += x;
}
text += "<br>";
text += str1.length + "<br>";
text += str2.length;
document.getElementById("show").innerHTML = text;
</script>
7.4.4 padStart() 메서드
padStart() 메서드는 문자열 앞 쪽에 특정 문자열을 채우는 데 사용된다. 다음 예제를 통해서 padStart() 메서드의 사용법에 대해 알아보자.
| 예제 7-15. padStart() 메서드로 앞 쪽 문자열 채우기 | pad_start.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "268";
let str2 = str1.padStart(5, "0");
let str3 = str1.padStart(6, "#");
text = "";
text += str2 + "<br>";
text += str3;
document.getElementById("show").innerHTML = text;
</script>| 예제 7-15. padStart() 메서드로 앞 쪽 문자열 채우기 | pad_start.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "268";
let str2 = str1.padStart(5, "0");
/* padStart() 메서드 사용 변수 str1에 저장된 문자열앞에 0을 2개 채운다.
5는 전체 문자열의 자릿수가 5로 만들라는 의미이다. */
let str3 = str1.padStart(6, "#");
/* padStart() 메서드 사용 변수 str1에 저장된 문자열 앞에 #를 3개 채운다.
0이 있는 곳에도 채운다. 6은 전체 문자열의 자릿수를 6으로 만들라는 의미이다. */
text = "";
text += str2 + "<br>";
// 변수 str2에 저장된 문자열을 출력하고 개행한다.
text += str3;
// 변수 str3에 저장된 문자열을 출력한다.
document.getElementById("show").innerHTML = text;
</script>
7.4.5 padEnd() 메서드
padEnd() 메서드는 padStart()와 거의 유사하다. padEnd() 메서드는 padStart() 메서드와 달리 문자열 뒤쪽을 특정 문자열로 채우는데 이용된다.
| 예제 7-16. padEnd() 메서드로 뒤에 문자열 채우기 | pad_end.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "35";
let str2 = str1.padEnd(5, "0");
let str3 = str1.padEnd(6, "x");
text = "";
text += str2 + "<br>";
text += str3;
document.getElementById("show").innerHTML = text;
</script>| 예제 7-16. padEnd() 메서드로 뒤에 문자열 채우기 | pad_end.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "35";
let str2 = str1.padEnd(5, "0");
// 변수 str1에 저장된 문자열 뒤에 0을 채워서 총 5자릿수로 만든다.
let str3 = str1.padEnd(6, "x");
/* 변수 str1에 저장된 문자열 뒤에 x를 채워서 총 6자릿수로 만든다.
9에도 채운다. */
text = "";
text += str2 + "<br>";
text += str3;
document.getElementById("show").innerHTML = text;
</script>
7.5 문자열 검색
자바스크립트에서 문자열 내에 있는 특정 문자열을 검색하거나 특정 문자열의 위치를 알아야 할 때가 있다. 문자열 검색에 관련되어 자주 사용되는 메서드를 표로 정리하면 다음과 같다.
| 문자열 검색 메서드 | |
| 메서드 | 설명 |
| indexOf() | 문자열에서 특정 문자열이 처음 발생한 위치(인덱스)를 반환함 검색 시작 위치를 지정할 수 있다. |
| lastIndexOf() | 문자열에서 특정 문자열이 마지막 발생한 위치(인덱스)를 반환함 |
| search() | indexOf()와 거의 유사 문자열에서 특정 문자열이 처음 발생한 위치(인덱스)를 반환함 정규 표현식(regular expression) 사용 가능 |
| match() | 특정 문자열이 매칭되는지를 체크해서 그 결과를 배열로 반환한다. 정규 표현식(regular expression) 사용 가능 |
| includes() | 특정 문자열이 포함되어 있으면 true를 반환하고, 그렇지 않으면 false를 반환함 |
| startsWith() | 특정 문자열로 시작하면 true를 반환하고, 그렇지 않으면 false를 반환함 |
| endWith() | 특정 문자열로 끝나면 true를 반환하고, 그렇지 않으면 false를 반환함 |
7.5.1 indexOf() 메서드
indexOf() 메서드는 문자열에서 특정 문자열이 처음 발생하는 위치를 반환한다. 만약 특정 문자열이 문자열 내에 존재하지 않으면 -1를 반환한다.
| 예제 7-17. indexOf() 메서드 사용 예 | index_of.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "하늘의 별 따기. 하늘이 무너져도 솟아날 구멍이 있다.";
let idx1 = str1.indexOf("하늘");
let idx2 = str1.indexOf("하늘", 4);
text = "";
text += idx1 + "<br>";
text += idx2;
document.getElementById("show").innerHTML = text;
</script>| 예제 7-17. indexOf() 메서드 사용 예 | index_of.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "하늘의 별 따기. 하늘이 무너져도 솟아날 구멍이 있다.";
let idx1 = str1.indexOf("하늘");
/* indexOf() 메서드를 사용해서 문자열 "하늘"이 처음 발생한 위치(인덱스) 반환
0을 반환하게 된다. */
let idx2 = str1.indexOf("하늘", 4);
/* indexOf() 메서드를 사용해서 인덱스 4번째 문자열 부터 문자열 "하늘"이 처음
발생한 위치(인덱스) 반환. 앞에 인덱스 0에 "하늘"이 있지만, 4번째 부터 검색을 시작하기
때문에 10을 반환하게 된다. */
text = "";
text += idx1 + "<br>";
text += idx2;
document.getElementById("show").innerHTML = text;
</script>
7.5.2 lastIndexOf() 메서드
lastIndex() 메서드는 문자열에서 특정 문자열이 마지막으로 발생하는 위치를 반환한다. 만약 특정 문자열이 문자열 내에 존재하지 않으면 -를 반환한다.
| 예제 7-18. lastIndexOf() 사용 예 | last_index_of.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "공든 탑이 무너지랴. 공자 앞에서 문자 쓴다.";
let idx = str1.lastIndexOf("공");
document.getElementById("show").innerHTML = idx;
</script>| 예제 7-18. lastIndexOf() 사용 예 | last_index_of.html | 코드 분석 |
<p id="show"></p>
<script>
let str1 = "공든 탑이 무너지랴. 공자 앞에서 문자 쓴다.";
let idx = str1.lastIndexOf("공");
/* lastIndexOf() 메서드를 이용해서 문자열 "공"이 마지막으로
발생하는 위치를 반환했다. 12가 반환된다. */
document.getElementById("show").innerHTML = idx;
</script>
7.5.3 search() 메서드
search() 메서드는 indexOf() 메서드와 같이 특정 문자열이 처음 발생하는 위치를 반환한다. search() 메서드에서는 일반 문자열 검색뿐 아니라 정규 표현식(regular expression)도 검색에 이용 가능하다. 정규 표현식에 대해서는 8장에서 자세히 설명한다.
다음 코드를 통해서 search() 메서드의 사용법에 대해서 알아보자.
| 예제 7-19. search() 메서드 사용 예 | search.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "No pain no gain. No pain no gain.";
let idx1 = str1.search("pain");
let idx2 = str1.search("No");
let idx3 = str1.search("no");
let idx4 = str1.search(/no/i);
let idx5 = str1.search("yes");
text = "";
text += idx1 + "<br>";
text += idx2 + "<br>";
text += idx3 + "<br>";
text += idx4 + "<br>";
text += idx5;
document.getElementById("show").innerHTML = text;
</script>| 예제 7-19. search() 메서드 사용 예 | search.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "No pain no gain. No pain no gain.";
let idx1 = str1.search("pain");
/* search() 메서드를 사용해서 변수 str1에서 문자열 "pain"이 처음 발생하는
위치를 반환한다. 3이 반환된다.*/
let idx2 = str1.search("No");
let idx3 = str1.search("no");
let idx4 = str1.search(/no/i);
/* search() 메서드를 사용해서 변수 str1에서 대소문자 상관없이
문자열 no가 처음 발생되는 위치를 반환한다. 0이 반환된다. */
let idx5 = str1.search("yes");
text = "";
text += idx1 + "<br>";
text += idx2 + "<br>";
text += idx3 + "<br>";
text += idx4 + "<br>";
text += idx5;
document.getElementById("show").innerHTML = text;
</script>
7.5.4 match() 메서드
match() 메서드는 문자열 내에 정규 표현식으로 표현된 특정 문자열이 존재하는지를 검사해서 그 결과를 배열 형태로 반환한다.
다음 코드를 통해서 match() 메서드의 사용법에 대해서 알아보자.
| 예제 7-20. match() 메서드 사용 예 | match.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "I am A student. I am from korea";
let arr = str1.match(/a/gi);
let text="";
for (let i=0; i<=arr.length-1; i++) {
text += arr[i] + "<br>";
}
document.getElementById("show").innerHTML = text;
</script>| 예제 7-20. match() 메서드 사용 예 | match.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "I am A student. I am from korea";
let arr = str1.match(/a/gi);
/* match()메서드를 사용해서 문자열 변수 str1의 문자열에
대소문자 구별없이 a가 있는지 검사하고 그 결과를 배열 형태로 반환 */
let text="";
for (let i=0; i<=arr.length-1; i++) {
text += arr[i] + "<br>";
// arr[i]에 있는 대소문자 a가 개행되서 출력된다.
}
document.getElementById("show").innerHTML = text;
</script>
7.5.5 includes() 메서드
includes() 메서드는 문자열 내에 특정 문자열이 존재하는지 검색해서 그 문자열이 존재하면 true를 반환하고 그렇지 않으면 false를 반환한다.
다음 코드를 통해서 includes() 메서드의 사용법에 대해 알아보자.
| 예제 7-21. includes() 메서드 사용 예 | includes.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "강물도 오래 흐르면 바위에 구멍을 뚫는다.";
let result1 = str1.includes("바위");
let result2 = str1.includes("사과");
let text="";
text += result1 + "<br>";
text += result2;
document.getElementById("show").innerHTML = text;
</script>| 예제 7-21. includes() 메서드 사용 예 | includes.html | 코드 원문 |
<p id="show"></p>
<script>
let str1 = "강물도 오래 흐르면 바위에 구멍을 뚫는다.";
let result1 = str1.includes("바위");
/* 메서드 includes()를 사용해서 문자열 str1에 "바위"가 있는지
검색해서 결과값에 따라서 true 혹은 false를 반환한다.
문자열 안에 "바위"가 있으므로 true가 반환된다." */
let result2 = str1.includes("사과");
/* 메서드 includes()를 사용해서 문자열 str1에 "사과"가 있는지
검색해서 결과값에 따라서 true 혹은 false를 반환한다.
문자열 안에 "사과"가 없으므로 false가 반환된다." */
let text="";
text += result1 + "<br>";
text += result2;
document.getElementById("show").innerHTML = text;
</script>
반응형
'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글
| 예제로 배우는 자바스크립트 요약 및 코드 분석 8장 8.3 (0) | 2023.10.13 |
|---|---|
| 예제로 배우는 자바스크립트 요약 및 코드 분석 8장 8.1 ~ 8.2 (0) | 2023.10.12 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 7장 7.1~7.3 (0) | 2023.10.11 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 6장 6-3~6-4 (0) | 2023.10.11 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 6장 6.1~6.2 (0) | 2023.10.10 |