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

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

자바스크립트 문자열 메서드 (JavaScript String Methods) 에는 다음과 같은 것이 있습니다.

메서드		설명
charAt()	특정 인덱스 (위치) 의 문자를 찾아 줍니다.
charCodeAt()	특정 인덱스에 있는 문자의 유니코드 (Unicode) 를 알려 줍니다.
concat()	두개 이상의 문자 (strings) 를 조합하여, 조합된 문자의 복사본 (copy) 을 돌려 줍니다.
fromCharCode()	유니코드 값 (Unicode values) 을 문자 (characters) 로 변환합니다.
indexOf()	문자열 (string) 에서 특정 값이 맨 처음 발견된 위치를 알려 줍니다.
lastIndexOf()	문자열 (string) 에서 특정 값이 맨 마지막 발견된 위치를 알려 줍니다.
localeCompare()	현재 위치 (the current locale) 에서 두 문자열 (strings) 을 비교합니다.
match()		정규 표현 (regular expression, 찾는 단어) 에 대해 일치하는 부분을 문자열 (string) 에서 찾고, 일치한 단어를 반환 합니다.
replace()	문자열 (string) 에서 값을 찾아서, 새로운 값으로 대체한 새로운 문자열 (string) 를 반환합니다.
search()	문자열 (string) 에서 값을 찾아서, 일치하는 위치를 반환합니다.
slice()		문자열 (string) 의 일부를 추출 (extracts) 하여 새로운 문자로 반환합니다.
split()		문자열 (string) 를 부분 문자열 (substrings) 의 배열로 분리합니다.
substr()	문자 () 의 일부를 시작 위치에서 부터 얼마간의 단어 (characters) 까자를 추출 (extracts) 합니다.
substring()	문자열 (string) 의 일부를 정해진 두 위치 사이만 추출 (extracts) 합니다.
toLocaleLowerCase()	문자열 (string) 를 소문자 (lowercase letters) 로 변환합니다. 이 때 언어 및 지역 설정 (locale) 을 참조 합니다.
toLocaleUpperCase()	문자열 (string) 를 대문자 (uppercase letters) 로 변환합니다. 이 때 언어 및 지역 설정 (locale) 을 참조 합니다.
toLowerCase()	문자열 (string) 를 소문자 (lowercase letters) 로 변환합니다.
toString()	문자 객체 값 (the value of a String object) 을 반환합니다.
toUpperCase()	문자열 (string) 를 대문자 (uppercase letters) 로 변환합니다.
trim()		문자 () 의 양쪽 끝의 공백 (whitespace) 을 제거 합니다.
valueOf()	문자 객체 원형 값 (the primitive value of a String object) 을 반환합니다.

---

이 글자에서 글자 라는 단어는 몇 번째 텍스트에서 처음 나타날까요?

indexOf() 메서드는 문자열 (string) 의 특정 텍스트가 첫번 째 나타나는 위치 를 알려 줍니다.

<p id="indexOf1">이 글자에서 글자 라는 단어는 몇 번째 텍스트에서 처음 나타날까요?</p>

<button onclick="myFunction()">알아 보기</button>

<p id="indexOf2"></p>

<script>
function myFunction() {
var indexOf3 = document.getElementById("indexOf1").innerHTML.indexOf("글자");
document.getElementById("indexOf2").innerHTML = indexOf3;
}
</script>

이와 유사하게 lastIndexOf() 메서드는 문자열의 특정 텍스트가 맨 마지막에 나타나는 위치 (the index of the last occurrence) 를 알려 줍니다.

indexOf() 와 lastIndexOf() 메서드는 그 텍스트가 발견되지 않으면 -1 을 반환합니다.

자바스크립트도 0 (zero) 부터 위치를 카운트 합니다. 0 이 문자열의 첫번째 위치이고, 1이 두번째 위치 ...

이 메서드 들은 단어 찾기 할 때, 단어의 시작위치를 알려주는 두번째 매개변수 (parameter) 로 활용됩니다.

---

search() 메서드는 특정한 값을 문자열 에서 찾아서, 일치하는 위치를 반환합니다.

search() 메서드는 특정한 값을 문자열 에서 찾아서, 일치하는 위치를 반환합니다.

<p id="search1">search() 메서드는 특정한 값을 문자열 에서 찾아서, 일치하는 위치를 반환합니다.</p>

<button onclick="myFunction1()">메서드 라는 단어의 위치는?</button>

<p id="search2"></p>

<script>
function myFunction1() {
var search3 = document.getElementById("search1").innerHTML.search("메서드");
document.getElementById("search2").innerHTML = search3;
}
</script>

위에서 보았다 시피, 위의 두개의 메서드들, indexOf() 와 search() 는 동일합니다.

이들은 동일한 매개변수 (parameters) 를 갖고, 또 동일한 값을 반환합니다.

두 메서드는 동일하지만, search() 메서드가 훨씬 검색 값 (search values) 이 다양합니다.

나중에 검색 값 (search values) 에 대해서는 정규 표현 (regular expressions) 할 때, 알아 보겠습니다.

---

문자열의 일부를 추출 하는 방법은 3가지가 있습니다.

	slice(start, end)
	substring(start, end)
	substr(start, length)

---

slice() 메서드는 문자열의 일부를 추출하여, 새로운 문자열로 반환합니다. 에서 2에서 5까지를 추출하였습니다.

slice() 메서드는 문자열의 일부를 추출하고, 추출된 부분을 새로운 문자열로 반환합니다.

이 메서드는 2 개의 매개변수 (parameters) 를 갖는데, 시작 위치와 끝 위치 입니다.

<p>slice() 메서드는 문자열의 일부를 추출하여, 새로운 문자열로 반환합니다. 에서 2에서 5까지를 추출하였습니다.</p>

<p id="slice1"></p>

<script>
var str = "slice() 메서드는 문자열의 일부를 추출하여, 새로운 문자열로 반환합니다.";
document.getElementById("slice1").innerHTML = str.slice(2,5);
</script>

이때 만일 매개변수 (parameter) 가 음의 값 (negative) 을 갖으면, 그 위치는 문자열의 맨 끝에서부터 꺼꾸로 카운트 합니다.

또한 두번째 매개변수 (the second parameter) 를 누락 시키면, 이 메서드는 문자열의 나머지 전체를 자릅니다.

그런데 음의 수 (Negative) 위치값은 IE8 및 그 이전 버전에서는 동작하지 않습니다.

---

substring() 메서드는 slice() 메서드와 유사합니다.

차이점은 substring() 은 음의 인덱스 값 (negative indexes) 을 사용할 수 없습니다.

여기서도 두번째 매개변수 (second parameter) 를 누락 시키면, substring() 은 문자열의 나머지 전체를 자를 것입니다.

---

substr() 메서드는 문자열의 일부를 추출해서, 새로운 문자열로 반환합니다. 에서 3부터 3개의 문자를 추출하였습니다.

substr() 메서드도 slice() 와 유사 합니다.

차이점은 두번째 매개변수 (the second parameter) 가 추출할 부분의 길이 (the length of the extracted part) 를 지정한다는 것만 다릅니다.

<p>substr() 메서드는 문자열의 일부를 추출해서, 새로운 문자열로 반환합니다. 에서 3부터 3개의 문자를 추출하였습니다.</p>

<p id="substr1"></p>

<script>
var str = "substr() 메서드는 문자열의 일부를 추출해서, 새로운 문자열로 반환합니다.";
document.getElementById("substr1").innerHTML = str.substr(3,3);
</script>

첫번째 매개변수 (parameter) 가 음수 (negative) 이면, 그 위치는 문자열의 끝에서부터 꺼꾸로 카운트 합니다.

두번째 매개변수 는 음수가 될수 없는데, 이것은 길이를 정의하기 때문입니다.

만일 두번째 매개변수 를 누락 시킨다면, substr() 은 문자열의 나머지 전체를 자를 것입니다.

---

replace() 메서드는 문자열 에서 특정 값을 다른 값으로 교체합니다. 에서 교체를 대체로 바꾸어 봅시다.

replace() 메서드는 문자열 에서 특정 값을 다른 값으로 교체합니다.

replace() 메서드는 문자열 에서 특정 값을 다른 값으로 교체합니다.

<p>replace() 메서드는 문자열 에서 특정 값을 다른 값으로 교체합니다. 에서 교체를 대체로 바꾸어 봅시다.</p>

<button onclick="myFunction2()">교체를 대체로 말을 바꿉니다.</button>

<p id="replace1">replace() 메서드는 문자열 에서 특정 값을 다른 값으로 교체합니다.</p>

<script>
function myFunction2() {
var replace2 = document.getElementById("replace1").innerHTML.replace("교체","대체");
document.getElementById("replace1").innerHTML = replace2;
}
</script>

---

replace() 메서드는 문자열 에서 특정 값을 다른 값으로 교체합니다. 에서 모든 값이란 단어를 VALUE로 바꾸어 봅시다. 여기서는 정규 표현을 사용하였습니다.

replace() 메서드는 문자열 에서 특정 값을 다른 값으로 교체합니다.

replace() 메서드는 검색 값 (search value) 으로 정규 표현 (regular expression) 을 사용할 수 있습니다.

기본값으로, replace() 함수는 맨 처음에 일치한 것을 교체합니다.

그러나, 모든 일치된 것들을 교체 하려면, 정규 표현 (regular expression) 을 g 플래그 (g flag, global match 라는 의미) 와 함께 사용해야 합니다.

<p>replace() 메서드는 문자열 에서 특정 값을 다른 값으로 교체합니다. 에서 모든 값이란 단어를 VALUE로 바꾸어 봅시다. 여기서는 정규 표현을 사용하였습니다.</p>

<button onclick="myFunction3()">값을 VALUE로 말을 바꿉니다.</button>

<p id="replace3">replace() 메서드는 문자열 에서 특정 값을 다른 값으로 교체합니다.</p>

<script>
function myFunction3() {
var replace4 = document.getElementById("replace3").innerHTML.replace(/값/g,"VALUE");
document.getElementById("replace3").innerHTML = replace4;
}
</script>

여기서 replace() 메서드는 원래 호출된 문자열을 바꾸지는 않습니다. 새로운 문자열로 반환합니다.

---

문자열 메서드는 다음 장에서 이어서 계속합니다.

<p id="indexOf1">이 글자에서 글자 라는 단어는 몇 번째 텍스트에서 처음 나타날까요?</p>

<button onclick="myFunction()">알아 보기</button>

<p id="indexOf2"></p>

<script>
function myFunction() {
var indexOf3 = document.getElementById("indexOf1").innerHTML.indexOf("글자");
document.getElementById("indexOf2").innerHTML = indexOf3;
}
</script>
<p><br /></p>


<p id="search1">search() 메서드는 특정한 값을 문자열 에서 찾아서, 일치하는 위치를 반환합니다.</p>

<button onclick="myFunction1()">메서드 라는 단어의 위치는?</button>

<p id="search2"></p>

<script>
function myFunction1() {
var search3 = document.getElementById("search1").innerHTML.search("메서드");
document.getElementById("search2").innerHTML = search3;
}
</script>
<p><br /></p>


<p>slice() 메서드는 문자열의 일부를 추출하여, 새로운 문자열로 반환합니다. 에서 2부터 5 바로전까지를 추출하였습니다.</p>

<p id="slice1"></p>

<script>
var mySliceString = "slice() 메서드는 문자열의 일부를 추출하여, 새로운 문자열로 반환합니다.";
document.getElementById("slice1").innerHTML = mySliceString.slice(2,5);
</script>
<p><br /></p>


<p>substr() 메서드는 문자열의 일부를 추출해서, 새로운 문자열로 반환합니다. 에서 3부터 3개의 문자를 추출하였습니다.</p>

<p id="substr1"></p>

<script>
var mySubString = "substr() 메서드는 문자열의 일부를 추출해서, 새로운 문자열로 반환합니다.";
document.getElementById("substr1").innerHTML = mySubString.substr(3,3);
</script>
<p><br /></p>


<p id="replace1">replace() 메서드는 문자열 에서 특정 값을 다른 값으로 교체합니다.</p>

<button onclick="myFunction2()">교체를 대체로 말을 바꿉니다.</button>

<script>
function myFunction2() {
var replace2 = document.getElementById("replace1").innerHTML.replace("교체","대체");
document.getElementById("replace1").innerHTML = replace2;
}
</script>
<p><br /></p>


<p id="replace3">replace() 메서드는 문자열 에서 특정 값을 다른 값으로 교체합니다.</p>

<button onclick="myFunction3()">값을 VALUE로 말을 바꿉니다.</button>

<script>
function myFunction3() {
var replace4 = document.getElementById("replace3").innerHTML.replace(/값/g,"VALUE");
document.getElementById("replace3").innerHTML = replace4;
}
</script>

---

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