Crocus

자바스크립트 스트링 메서드

자바스크립트 개발 환경은 Microsoft Visual Studio 2015 버전 HTML 기능 및 Chrome을 이용하고 있습니다.

이번에는 String Method에 대해 한번 보고자 한다.

String Method에 대한 모든 메소드 레퍼런스는 아래 링크를 참조하자.

https://www.w3schools.com/jsref/jsref_obj_string.asp

메서드가 너무 많으니 대표적인 메서드를 알아보자.

메서드 내용에 대해 알아보기 전에 이 내용부터 하나 알고 가면 좋을 것 같다.

var a = "crocus"로 했을 때의 type과

var b = new String("crocus")로 했을 때의 type은 서로 다름을 알아두자.

그리고 이 내용과 함께 상수 풀 :: http://www.crocus.co.kr/476 내용도 알아두면 매우 좋을 것 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
 
        <p id="test">dd</p>
        <script>
            var a = "crocus";
            var b = new String("crocus");
            
            document.getElementById("test").innerHTML =
                'var a = \"crocus\" 의 type :: ' + typeof (a) +
                "<br>" + 'var b = new string(\"crocus\") 의 type :: ' + typeof (b);
            
        </script>
 
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus

클릭하시면 결과 화면을 확인 할 수 있습니다.

아래부터는 결과 화면을 따로 볼 수 없도록 해두었습니다.

결과가 궁금하신분은 코드 복사 붙여넣기를 통해 직접 확인을 하셔야합니다.

Length

length는 문자열의 길이를 반환해준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
 
        <p id="test">dd</p>
        <script>
            var str = "www.crocus.co.kr";
            var len = str.length;
 
            document.getElementById("test").innerHTML = 'str :: ' + str + '<br>' + 'len :: ' + len;
            
        </script>
 
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus

indexOf()

스트링 내부에서 찾고자 하는 스트링의 첫번째 인덱스를 찾아준다.

즉, 두번 이상 나오면, 첫번째 스트링의 인덱스를 알려준다.

이때 해당하는 스트링이 존재하지 않는다면 -1을 반환한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
 
        <p id="test"></p>
        <script>
            var str = "www.crocus.co.kr is crocus blog!";
            var index = str.indexOf("crocus");
 
            document.getElementById("test").innerHTML = 'str :: ' + str + '<br>' + 'index :: ' + index;
            
        </script>
 
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus

lastIndexOf()

위의 indexOf()와 반대가 되는 것. 가장 마지막에 발견된 스트링의 인덱스를 반환해준다.

이때 해당하는 스트링이 존재하지 않는다면 -1을 반환한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
 
        <p id="test"></p>
        <script>
            var str = "www.crocus.co.kr is crocus blog!";
            var index = str.lastindexOf("crocus");
 
            document.getElementById("test").innerHTML = 'str :: ' + str + '<br>' + 'index :: ' + index;
            
        </script>
 
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus

slice()

slice 메서드는 구간의 문자열을 반환해준다.

이때 slice(시작점, 끝점 + 1)을 해주어야한다.

이때 아래에서 slice(4,10)을 통해 crocus라는 문자열을 추출했는데

slice(-12,-6)을 해도 crocus가 나온다.( !부터 -1이라 생각하고 뒤로 간다 생각해보면 된다.)

그리고 slice(시작점)으로 표기한다면 해당 시작점부터 끝까지 문자열을 출력한다.

(slice(20) == slice(-12)와 같다 여기서는)

** 하지만 익스플로러 8 이전 버전에서는 음수 인덱스가 동작하지 않는다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
 
        <p id="test"></p>
        <script>
            var str = "www.crocus.co.kr is crocus blog!";
            var slicing = str.slice(4, 10);
 
            document.getElementById("test").innerHTML = 'str :: ' + str + '<br>' + 'slicing :: ' + slicing;
            
        </script>
 
    </body>
</html>
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus

substring()

substring() 메서드는 slice() 메서드와 동일하다.

차이점은 음수 인덱싱이 불가능 하다는 점이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
 
        <p id="test"></p>
        <script>
            var str = "www.crocus.co.kr is crocus blog!";
            var get = str.substring(4, 10);
 
            document.getElementById("test").innerHTML = 'str :: ' + str + '<br>' + 'get :: ' + get;
            
        </script>
 
    </body>
</html>
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus

substr()

substr의 인자는 다음과 같다.

substr(시작점, 길이)

즉, var str = "www.crocus.co.kr is crocus blog!"; 일때 substr(4,6)이면 crocus만 나오게 된다.

이때 길이를 주지 않고 substr(4)로 한다면 crocus.co.kr is crocus blog!가 나타난다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
 
        <p id="test"></p>
        <script>
            var str = "www.crocus.co.kr is crocus blog!";
            var get = str.substr(4,6);
 
            document.getElementById("test").innerHTML = 'str :: ' + str + '<br>' + 'get :: ' + get;
            
        </script>
 
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus

replace()

replace(찾을문자열, 바꿀문자열)

찾을 문자열을 찾고, 그 찾은 문자열을 바꿀 문자열을 통해 바꿔버린다.

즉 아래에서 crocus가 CROCUS로 바뀐다.

이때 첫번째로 찾은 문자열만 바꿔주고 모든 것을 다 바꾸는 것은 아니다.

그리고 replace를 이용하면 해당 문자열에서 바꿔 반환하는게 아닌 새로운 문자열(new string)을 반환하는 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
 
        <p id="test"></p>
        <script>
            var str = "www.crocus.co.kr is crocus blog!";
            var get = str.replace("crocus","CROCUS");
 
            document.getElementById("test").innerHTML = 'str :: ' + str + '<br>' + 'get :: ' + get;
            
        </script>
 
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus

이때 만약 모든 문자열을 다 바꾸고 싶다면 /g 플래그를 이용한다.

(대소문자 구분없이 변경하고 싶다면 /i 플래그를 이용한다.)

더 많은 자바스크립트 정규 표현식은 https://www.w3schools.com/js/js_regexp.asp 여기서 확인 할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
 
        <p id="test"></p>
        <script>
            var str = "www.crocus.co.kr is crocus blog!";
            var get = str.replace(/crocus/g,"CROCUS");
 
            document.getElementById("test").innerHTML = 'str :: ' + str + '<br>' + 'get :: ' + get;
            
        </script>
 
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus

split()

split(구분지을 char) 을 이용하여 , 혹은 . 혹은 다양한 문자를 구분자로 이용하여 분리시킬 수 있다.

이렇게 아래처럼

var get = str.split('.'); 을 하면 get에는 .을 기준으로 배열이 생기게 된다.

즉, get = {"www", "crocus", "co", "kr is crocus blog!"}로 생성된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
 
        <p id="test"></p>
        <script>
            var str = "www.crocus.co.kr is crocus blog!";
            var get = str.split('.');
            var ans = "";
 
            for (var i = 0; i < get.length; i++)
                ans += get[i] + '<br>';
            
            document.getElementById('test').innerHTML = ans;
 
        </script>
 
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus

저작자표시 비영리 변경금지

'Basic > JavaScript' 카테고리의 다른 글

자바스크립트 애니메이션 이용하는 방법 (0)	2017.09.23
자바스크립트 DOM(Document Object Model) (0)	2017.09.23
자바스크립트 이벤트 사용 방법 (0)	2017.09.21
자바스크립트 Number 메서드 (0)	2017.09.20
자바스크립트 null과 undefined차이 (0)	2017.09.20

Crocus

자바스크립트 스트링 메서드

'Basic > JavaScript' 카테고리의 다른 글

티스토리툴바