• Q&A
  • 회원가입
  • 로그인

[Basic] JS - String Methods - JS문자열메서드

2,222  
JavaScript String Methods JS 문자열 메서드


시작 전 알아둘 것

① JS는 순서를 0부터 시작함. (예) 첫 번재는 0, 두 번재는 1, 세 번째는 2, 네 번째는 3 .......
② 순서를 셀 땐 공백까지 포함해서 셈. (예) 홈짱닷컴 homzzang.com 문자열에서 homzzang은 5번째에 처음 나타남.
음수, 즉, 순서를 오른쪽에서 왼쪽으로 셀 때는 -1부터 시작함. (예) 가장오른쪽 첫 번째 -1, 가장 오른쪽 두 번째 -2, ......




1. 문자열에서 특정 문자열 위치 찾는 법

1. indexOf("찾을문자열") : 문자열 내에서 특정 문자열이 처음 나타나는 위치가 몇 번째인지 보여줌. 

<p id="yamette">홈짱닷컴 homzzang.com By 홈짱</p>

<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>
function myFunction() {
    var str = document.getElementById("yamette").innerHTML; // 아이디가 yamette인 문자열에서
    var pos = str.indexOf("홈짱");  // 홈짱 문자열이 처음 나타나는 게 몇 번째냐?
    document.getElementById("sinbi").innerHTML = pos; // 결과값 0 즉, 문자열 가장 첫 번째 처음 나타남.
}
</script>



결과값: 0


2. lastIndexOf("찾을문자열") : 문자열 내에서 특정 문자열이 마지막으로 나타나는 위치가 몇 번째인지 보여줌. 

<p id="yamette">홈짱닷컴 homzzang.com By 홈짱</p>

<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>
function myFunction() {
    var str = document.getElementById("yamette").innerHTML; // 아이디가 yamette인 문자열에서
    var pos = str.lastIndexOf("홈짱");  // 홈짱 문자열이 마지막으로 나타나는 게 몇 번째냐?
    document.getElementById("sinbi").innerHTML = pos; // 결과값 21 즉, 21번째 마지막으로 나타남.
}
</script>



3. index("찾을문자열") lastIndexOf("찾을문자열") 둘다, 찾고자 하는 문자열이 존재 안 할 경우 결과값은 -1이다.

<p id="yamette">홈짱닷컴 homzzang.com By 홈짱</p>

<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>
function myFunction() {
    var str = document.getElementById("yamette").innerHTML; // 아이디가 yamette인 문자열에서
    var pos = str.indexOf("HTML");  // HTML 문자열이 몇 번째에 처음 나타나냐?
    document.getElementById("sinbi").innerHTML = pos; // 결과값 -1  (즉, 안 나타난다)
}
</script>



4. search("찾을문자열") : 문자열 내에서 특정 문자열이 처음 나타나는 위치가 몇 번째인지 보여줌. 
                                        indexOf()와 같지만, 정규표현식에서 indexOf()보다 훨씬 강력한 기능 수행함. 

<p id="yamette">홈짱닷컴 homzzang.com By 홈짱</p>

<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>
function myFunction() {
    var str = document.getElementById("yamette").innerHTML; // 아이디가 yamette인 문자열에서
    var pos = str.search("홈짱");  // 홈짱 문자열이 처음 나타나는 게 전체 문자열에서 몇 번째냐?
    document.getElementById("sinbi").innerHTML = pos; // 결과값 0 즉, 문자열 가장 첫 번째 처음 나타남.
}
</script>





2. 문자열에서 특정 문자열을 추출하는 법

1. slice(시작위치, 끝위치)  : 시작위치부터 끝위치 바로 앞까지 출력. 음수 가능.
2. substring(시작위치, 끝위치) : 시작위치부터 끝위치 바로 앞까지 출력. 음수 불가능 
3. substr(시작위치, 시작위치부터길이)




2-1. slice(시작위치, 끝위치)

1. slice(시작위치, 끝위치) 시작위치부터 시작해 끝위치 바로 앞까지 찾아라.

<p id="homzzang"></p>

<script>
var str = "HTML, CSS, JS";
document.getElementById("homzzang").innerHTML = str.slice(6,9); // 결과값 CSS  즉, 6번째부터 시작해 9번째 앞까지
</script>



2. slice(시작위치, 끝위치) 시작위치 끝위치가 둘다 음수인 경우엔 마지막 위치부터 계산. (끝에선 -1부터 시작함)
   아래 예제 경우, 오른쪽에서 7번째 있는 글자부터 시작해 4번째 바로 앞까지 출력함.

<p id="homzzang"></p>

<script>
var str = "HTML, CSS, JS";
document.getElementById("homzzang").innerHTML = str.slice(-7,-4); // 결과값 CSS  즉, 오른쪽부터 계산해 찾음.
</script>



3. slice(시작위치) 즉, 끝위치가 없이 시작위치만 있을 경우, 시작위치부터 시작해 나머지 문자열 전부를 추출.

<p id="homzzang"></p>

<script>
var str = "HTML, CSS, JS";
document.getElementById("homzzang").innerHTML = str.slice(6); // 결과값 CSS, JS  즉, 6번째부터 전부 출력
</script>



<p id="homzzang"></p>

<script>
var str = "HTML, CSS, JS";
document.getElementById("homzzang").innerHTML = str.slice(-7); // 결과값 CSS, JS  즉, 오른쪽 7번째부터 전부
</script>



4. 음수 위치 표시. 즉 오른쪽부터 계산하는 것은 익스플로러 8 이하 버전에서는 작동 안 함.




2-2. substring(시작위치, 끝위치)

1. substring(시작위치, 끝위치)는 기본적인 것은 slice(시작위치, 끝위치)와 같으나, 다른 점은 음수를 가질 수 없음.

<p id="homzzang"></p>

<script>
var str = "HTML, CSS, JS";
document.getElementById("homzzang").innerHTML = str.substring(6,9); // 결과값 CSS  즉, 6번째부터 시작해 9번째 앞까지
</script>



2. substring(시작위치) 즉, 끝위치가 없이 시작위치만 있을 경우, 시작위치부터 시작해 나머지 문자열 전부를 추출.

<p id="homzzang"></p>

<script>
var str = "HTML, CSS, JS";
document.getElementById("homzzang").innerHTML = str.substring(6); // 결과값 CSS, JS  즉, 6번째부터 전부 출력
</script>





2-3.  substr(시작위치, 추출길이)

1. 첫 번째 인자는 slice()처럼 시작위치이나, 두 번째 인자는 slice()와 달리 추출할 문자열 길이입니다.

<p id="homzzang"></p>

<script>
var str = "HTML, CSS, JS";
document.getElementById("homzzang").innerHTML = str.substr(6, 3); // 결과값 CSS  즉, 6번째부터 시작해 3글자
</script>


2. 시작위치를 나타내는 수가 음수일 경우, 오른쪽부터 계산. 이 경우, -1부터 시작함.

3. 추출길이를 나타내는 수는 음수가 올 수 없음. 왜냐면, 추출할 문자열의 길이를 나타내기 때문임.

4. 추출길이를 생략하면, 시작위치부터 시작해 나머지 전부를 추출함.

<p id="homzzang"></p>

<script>
var str = "HTML, CSS, JS";
document.getElementById("homzzang").innerHTML = str.substr(6); // 결과값 CSS  즉, 6번째부터 나머지 전부
</script>





3. 문자열을 내용을 대체

1. replace(찾을 문자열, 대체할 문자열)은 문자열 내 특정 문자열을 다른 문자열로 대체함.

<button onclick="myFunction()">클릭</button>

<p id="sinbi">홈짱닷컴으로 오세요!</p>

<script>
function myFunction() {
    var str = document.getElementById("sinbi").innerHTML;  // 아이디가 sinbi인 문자열을 찾아 변수 str에 할당해라
    var txt = str.replace("홈짱닷컴","homzzang.com"); // 문자열에서 홈짱닷컴을 찾아 homzzang.com으로 교체해라.
    document.getElementById("sinbi").innerHTML = txt; //아이디가 sinbi인 문자열에 바뀐 문자열로 출력시켜라.
}
</script>


결과값: homzzang.com으로 오세요!


2. replace(찾을 문자열, 대체할 문자열)은 찾을 문자열에 정규표현식을 취할 수 있음.




4. 대소문자 전환

1. toUpperCase()은 소문자를 대문자로 바꿈.

<button onclick="myFunction()">클릭</button>

<p id="sinbi">homzzang.com</p>

<script>
function myFunction() {
    var text = document.getElementById("sinbi").innerHTML; // 아이디 sinbi에 담긴 문자열을 변수 text에 할당
    document.getElementById("sinbi").innerHTML = text.toUpperCase(); //대문자로 전환해 아이디 sinbi에 출력
}
</script>


결과값: HOMZZANG.COM


2. toLowerCase()는 대문자를 소문자로 바꿈.

<button onclick="myFunction()">클릭</button>

<p id="sinbi">HOMZZANG.COM</p>

<script>
function myFunction() {
    var text = document.getElementById("sinbi").innerHTML; // 아이디 sinbi에 담긴 문자열을 변수 text에 할당
    document.getElementById("sinbi").innerHTML = text.toLowerCase(); // 소문자로 바꿔, 아이디 sinbi에 출력
}
</script>

결과값: homzzang.com




5. concat(추가할 문자열) : 문자열 추가할 때 사용하는 메서드

1.  추가할 문자열 부분이 문자열이면 따옴표로 묶고, 변수면 따옴표로 안 묶음. 만약, 여러 개를 넣을 땐 ,(콤마)로 분리

<p id="sinbi"></p>

<script>
var text1 = "홈짱닷컴"; //  변수 text1을 선언하고, text1에 문자열 홈짱닷컴을 할당
var text2 = "homzzang.com" // 변수 text2를 선언하고, text2에 문자열 homzzang.com을 할당
document.getElementById("sinbi").innerHTML = text1.concat(" ",text2); // text1에 공백과 text2에 할당된 문자열을 추가해 아이디 sinbi에 출력
</script>



2. concat() 메서드은 + 연산자 대신에 사용 가능함.

<p id="sinbi"></p>

<script>
var text1 = "홈짱닷컴";
var text2 = "homzzang.com"
document.getElementById("sinbi").innerHTML = text1.concat(" ",text2); // concat() 메서드으로 두 문자열 합침
</script>


결과값: 홈짱닷컴  homzzang.com


<p id="sinbi"></p>

<script>
var text1 = "홈짱닷컴";
var text2 = "homzzang.com"
document.getElementById("sinbi").innerHTML = text1 + " " + text2; // + 연산자를 이용해 두 문자열 합침
</script>


결과값: 홈짱닷컴 homzzang.com



[주의1] 하나의 아이디에 두개를 모두 출력시키려고 할 경우, 나중 것만 출력됨.

<p id="sinbi"></p>
<script>
var text1 = "홈짱닷컴";
var text2 = "homzzang.com"
document.getElementById("sinbi").innerHTML = text1.concat(" ",text2); // 아이디 sinbi에 출력 (결과: 출력 X)
document.getElementById("sinbi").innerHTML = text1 + " " + text2; // 아이디 sinbi에 출력 (결과: 출력 O)
</script>

결과값:  홈짱닷컴 homzzang.com 
           즉, 먼저 적은 concat()을 이용한 것은 출력 안 되고, 나중에 적은 + 연산자를 이용한 것만 출력됨.


[주의] 두 경우 모두 출력시키려면, 아래처럼 각각의 아이디를 부여

<p id="sinbi"></p>
<p id="sinbi2"></p>
<script>
var text1 = "홈짱닷컴";
var text2 = "homzzang.com"
document.getElementById("sinbi").innerHTML = text1.concat(" ",text2); // 아이디 sinbi에 출력 (결과: 출력 O)
document.getElementById("sinbi2").innerHTML = text1 + " " + text2; // 아이디 sinb2에 출력 (결과: 출력 O)
</script>




6. 모든 문자열은 새로운 문자열을 반환할 뿐, 원래 문자열을 수정할 순 없습니다.
   즉,  문자열은 불변입니다.  문자열은 변할 순 없지만, 대체될 순 있습니다.


7. 문자열의 특정 글자를 추출하는 법은 아래 2가지가 있습니다.

1. charAt(찾을위치) : 찾을 위치의 글자 반환
2. charCodeAt(찾을위치) : 찾을 위치의 글자를 유니코드로 반환



7-1. charAt(찾을위치)  : 찾을 위치의 글자가 무슨 글자인지 알려줌.

<p id="sinbi"></p>

<script>
var str = "홈짱닷컴 homzzang.com";
document.getElementById("sinbi").innerHTML = str.charAt(0); // 0. 즉 첫 번째 글자가 무슨 자인지 출력. 결과값: 홈
</script>


결과값: 홈


7-2. charCodeAt(찾을위치)

<p id="sinbi"></p>

<script>
var str = "홈짱닷컴 homzzang.com";
document.getElementById("sinbi").innerHTML = str.charCodeAt(0); // 첫 번째 글자인 '홈'의 유니코드를 출력
</script>


결과값: 54856



8. 문자열을 배열로 접근하는 것은 불안정함.

1. 문자열을 배열로 표현한 예

<p id="sinbi"></p>

<script>
var str = "홈짱닷컴 homzzang.com";
document.getElementById("sinbi").innerHTML = str[0] + str[1]; // 문자열을 배열로 간주해, 첫 번째와 두 번째 출력
</script>


결과값: 홈짱

 
2. 문자열을 배열로 표현하면, 브라우저에 따라 다르게 나올 수 있음. 즉, 익스 7 이하 브라우저에서 작동 안 함.

3. 배열로 보이게 만들 뿐, 실제로 배열은 아님. 즉, 배열 짝퉁일 뿐임.

4. 위 예에서, str[0] = 홈이 에러를 내지는 않지만, 그렇다고 유효한 것은 아님

5. 문자열을 배열로 접근 원하면, 일단 먼저 진짜 배열로 전환하는 게 필요함.



9. 문자열을 배열로 전환하는 법

1. split() 메서드을 이용해 문자열을 배열로 전환 가능함. (예)  split(배열 만든 방법)

2. 배열 만드는 방법에 아래 3가지가 있음.

1. , (콤마)를 이용하는 법
2. 공백을 이용하는 법
3. | (세로막대)를 이용하는 법. |(세로막대)는 Shift키를 누른 상태에서 엔터키 위의 \키를 입력하면 됨.



2-1. split(",") : (콤마)을 이용해 문자열을 배열로 전환하는 법

<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>
function myFunction() {
    var str = "홈,짱,닷,컴"; // 문자열을 한자 한자 ,(콤마)로 분리
    var arr = str.split(","); //  위에서 ,(콤마)를 이용해 배열로 만들었음을 표시.
    document.getElementById("sinbi").innerHTML = arr[0] + arr[1]; // 배열의 첫 번째와 두 번째 것을 출력
}
</script>


결과값: 홈짱


2-2. split(" ") : 공백을 이용해 문자열을 배열로 전환하는 법


<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>
function myFunction() {
    var str = "홈 짱 닷 컴"; // 문자열을 한자 한자 공백으로 분리
    var arr = str.split(" "); //  위에서 공백을 이용해 배열로 만들었음을 표시. 즉, "와 "사이에 한칸 띄어 공백 줌
    document.getElementById("sinbi").innerHTML = arr[0] + arr[1]; // 배열의 첫 번째와 두 번째 것을 출력
}
</script>


결과값: 홈짱


2-3. split("|") : |(세로막대)를 이용해 문자열을 배열로 전환하는 법

<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>
function myFunction() {
    var str = "홈|짱|닷|컴"; // 문자열을 한자 한자 |(세로막대)로 분리
    var arr = str.split("|"); //  위에서 |(세로막대)로 배열 만들었음을 표시
    document.getElementById("sinbi").innerHTML = arr[0] + arr[1]; // 배열의 첫 번째와 두 번째 것을 출력
}
</script>


결과값: 홈짱


3. split() 메서드에 배열을 만든 방법을 안 적을 경우엔, 첫 번째 배열에 모든 문자열을 출력시킴.

<button onclick="myFunction()">클릭</button>

<p id="sinbi"></p>

<script>
function myFunction() {
    var str = "홈|짱|닷|컴"; // 일단 문자열을 한자 한자 ,(콤마)로 분리해 나열
    var arr = str.split(); //  배열을 만든 방법을 안 적음.
    document.getElementById("sinbi").innerHTML = arr[0] + arr[1]; // 첫 번째 배열에 모든 문자열 출력, 두 번째 별은 undefined (정의 안 됨) 출력
}
</script>


결과값: 홈|짱|닷|컴undefined


4. split("") : 배열을 만든 방법 부분에 따옴표만 적으면, 문자열을 한 글자씩 나눠 배열을 만드라는 의미임.

<p id="sinbi"></p>

<script>
var str = "홈짱닷컴 homzzang.com"; // 변수 str 선언 후, 문자열 홈짱닷컴 homzzang.com을 할당
var arr = str.split(""); // 문자열을 한 글자 단위로 나눠 배열 만듦. 총 17개 즉, 0 ~16 배열. arr[0] = 홈, arr[16] = m
var text = ""; // 변수 text를 선언하고, 아래 계산식 결과의 문자열이 들어갈 부분을 따옴표로 표시함. ※ 출력에 사용 
var i; // 변수 i를 선언 ※ for 반복문에 사용
for (i = 0; i < arr.length; i++) { // i = 0 첫 번째부터 시작, i < arr.length 배열 길이 17보다 작다면 계속 반복, i++ 하나 씩 증가
    text += arr[i] + "<br>" // i번째 배열과 <br>요소를 text 변수에 일단 더하면서 계속 text 변수에 할당
}
document.getElementById("sinbi").innerHTML = text; // 변수 text에 할당된 문자열을 아이디 sinbi 요소에 출력 
</script>


결과값:






h
o
m
z
z
a
n
g
.
c
o
m




나중에 더 자세히 다룰 예정임, 오늘은 이 정도로.. . 아, 피곤해. ㅡㅡ;

찾아주셔서 감사합니다. Since 2012