j16. 자바스크립트 문자열 메서드 2/2

자바스크립트 문자열 메서드 2/2

아래 긴 문장의 단어를 모두 대문자로 바꾸어 봅시다.

"Rehab" is a song recorded by Barbadian singer Rihanna (pictured) for her third studio album, Good Girl Gone Bad (2007). Def Jam Recordings serviced the song to contemporary hit radio in the United States on October 6, 2008, as the eighth and final single from the album, and released it in Britain as a CD single on December 8.

영어 문자열 들은 대문자 소문자 변환을 할 수 있는데, toUpperCase() 메서드는 대문자로 전환해 줍니다.

<p>아래 긴 문장의 단어를 모두 대문자로 바꾸어 봅시다.</p>

<button onclick="toUpperCase1Function()">toUpperCase() 메서드로 대문자로 바꾸기</button>

<p id="toUpperCase1">"Rehab" is a song recorded by Barbadian singer Rihanna (pictured) for her third studio album, Good Girl Gone Bad (2007). Def Jam Recordings serviced the song to contemporary hit radio in the United States on October 6, 2008, as the eighth and final single from the album, and released it in Britain as a CD single on December 8.</p>

<script>
function toUpperCase1Function() {
var text = document.getElementById("toUpperCase1").innerHTML;
document.getElementById("toUpperCase1").innerHTML = text.toUpperCase();
}
</script>

이와 마찬가지로 toLowerCase() 메서드는 문자열을 모두 소문자 (lower case) 로 바꿉니다.

---

concat() 메서드는 둘 이상의 문자열을 합치는데, 더하기 연산자도 동일하게 문자열을 합칩니다.

concat() 메서드는 두개 이상의 문자열 (strings) 을 합칩니다.

그런데 이 concat() 메서드 대신에 더하기 연산자 (plus operator) 를 사용해도 결과는 같습니다.

<p>concat() 메서드는 둘 이상의 문자열을 합치는데, 더하기 연산자도 동일하게 문자열을 합칩니다.</p>

<p id="concat1"></p>
<p id="concat2"></p>

<script>
var text1 = "제 이름은 ";
var text2 = "자바스크립트";
document.getElementById("concat1").innerHTML = text1.concat(" ",text2);
document.getElementById("concat2").innerHTML = text1 + text2;
</script>

---

charAt() 메서드는 문자열에서 주어진 위치의 문자를 반환합니다.

문자열 문자 (String character) 를 추출하는 방법에는 2 가지의 안전한 방법의 메서드 (safe methods) 가 있습니다.

	charAt(position)
	charCodeAt(position)

<p>charAt() 메서드는 문자열에서 주어진 위치의 문자를 반환합니다.</p>

<p id="charAt1"></p>

<script>
var str = "charAt() 메서드는 문자열에서 주어진 위치의 문자를 반환합니다.";
document.getElementById("charAt1").innerHTML = str.charAt(0);
</script>

위에서는 0번째 문자, 즉 c 가 반환되었습니다.

---

charCodeAt() 메서드는 문자열 에서 지정된 인덱스 (index, 위치) 에 있는 문자의 유니코드 (unicode) 를 반환합니다. 에서 charCodeAt(0) 으로 첫번째 문자의 유니코드 를 알아봅니다.

charCodeAt() 메서드는 문자열 에서 지정된 인덱스 (index, 위치) 에 있는 문자의 유니코드 (unicode) 를 반환합니다.

<p>charCodeAt() 메서드는 문자열 에서 지정된 인덱스 (index, 위치) 에 있는 문자의 유니코드 (unicode) 를 반환합니다. 에서 charCodeAt(0) 으로 첫번째 문자의 유니코드 를 알아봅니다.</p>

<p id="charCodeAt1"></p>

<script>
var str = "charCodeAt() 메서드는 문자열 에서 지정된 인덱스 (index, 위치) 에 있는 문자의 유니코드 (unicode) 를 반환합니다.";
document.getElementById("charCodeAt1").innerHTML = str.charCodeAt(0);
</script>

---

반면, 아래와 같은 코드를 본 적이 있을 텐데, 배열 형태로 문자열 에 접근 하는 경우입니다.

이 방법은 안전한 방법이 아닙니다.

var str = "str[0] 은 배열 형태로 문자열 에 접근 하는 경우입니다.";
str[0];                   // s 를 리턴 합니다.

이것은 안전하지도 않고 결과를 예측하기도 어렵습니다.

예를 들면 IE7 이하에서는 동작하지 않습니다.
문자열을 배열 처럼 보이게 만들었는데, 실제로는 배열이 아닙니다.
str[0] = "c" 처럼 쓰면 에러도 없지만, 그렇게 작동 하지도 않습니다.
그래서 배열처럼 문자열을 읽으려면, 먼저 문자열을 배열로 변환하는 것이 좋습니다.

---

문자열 (string) 은 split() 메서드로 배열 (array) 로 변환될 수 있습니다.

문자열 (string) 은 split() 메서드로 배열 (array) 로 변환될 수 있습니다.

<p>문자열 (string) 은 split() 메서드로 배열 (array) 로 변환될 수 있습니다.</p>

<button onclick="split1Function()">arr[0] 즉, 배열의 맨 첫 값은 무엇일까요?</button>

<p id="split1"></p>

<script>
function split1Function() {
var str = "문자열 (string) 은 split() 메서드로 배열 (array) 로 변환될 수 있습니다.";
var arr = str.split(" ");
document.getElementById("split1").innerHTML = arr[0];
}
</script>

---

만일 구분자를 생략한다면 즉, split() 인 경우는, index [0] 에 모든 문자열이 담기게 됩니다.

반면 구분자가 "" 인 경우, 즉 split("") 인 경우는, 한 글자씩 (single characters) 나누어 각 배열 요소에 담게 됩니다.

<p id="split2"></p>

<script>
var str = "split";
var arr = str.split("");
var text = "";
var i;
for (i = 0; i < arr.length; i++) {
text += arr[i] + "<br>"
}
document.getElementById("split2").innerHTML = text;
</script>

---

[광고] Udemy 동영상 강의로 보기