본문 바로가기
programming/javascript

자바스크립트 문자열 문자 또는 단어 추출하기 extracting string character

by 개코 - 개발과 코딩 2021. 11. 12.

자바스크립트 개발시 문자 하나하나 출력을 할 경우가 생긴다. 이 때 사용되는 메서드는 charAt() 과 charCodeAt() 이다. 두번째의 경우 웹페이지의 보안이 필요할 때 사용될 수 있을 것이다. 배열처럼 접근하는 방법 또한 가능하다. string[] 방식으로 인덱스번호를 넣으면 된다. 이 3가지의 공통점은 문자열에 정해진 인덱스번호를 사용한다는 점이며, 차이가 있다면 charCodeAt() 메서드는 UTF-16 코드를 출력한다.

 

자바스크립트 문자열 문자 또는 단어 추출하기
extracting string character

자바스크립트의 문자열은 문자의 집합이다.

다른 언어들도 마찬가지다.

문자열을 단어로써 배열 컬렉션으로 만드는 것이 가능한 이유가 여기에 있다.

엄밀히 말하면 문자열은 string 이고, 문자는 char 이다.

자바스크립트는 단어 또한 string 으로 처리한다.

그럼에도 문자 하나하나 추출할 수 있다.

문자 추출 방법

자바스크립트 개발을 할 때 문자하나하나 추출하여 조작할 때가 생긴다.

물론, 그런 경우는 거의 없을 테지만 특정 단어만 강조하고 싶을 경우가 그런경우이기도 하다.

상당히 귀찮은 작업이다.

그렇기에 그냥 알고만 넘어가자

자바스크립트 문자열에서 문자를 추출하는 방법은 아래와 같다.

  • charAt() 메서드 사용
    인덱스번호를 사용하여 문자를 추출한다.
  • charCodeAt() 메서드 사용
    인덱스번호를 사용하여 문자를 추출하지만 숫자형 UTF-16 코드를 추출한다. 
  • string[] 사용하여 배열처럼 접근하여 사용
    인덱스번호를 사용하여 문자를 추출한다.

샘플코드

위에서 제시한 메서드들은 인덱스를 기반으로 동작한다.

즉, 숫자로 접근하여 사용이 가능하다.

string 이란 문자의 0번째 문자는 s 이다.

이런 식이다.

간단한 코드를 작성해 본다.

<!DOCTYPE html>
<html>
    <body>

        <h1>자바스크립트 문자열 공백 없애기</h1>

        <script>

            console.log("----------");

            let vStr = "블랙핑크";

            console.log(typeof(vStr), vStr);

            console.log("----------");

            let vChar;

            vChar = vStr.charAt(2);
            console.log(typeof(vChar), vChar);

            vChar = vStr.charCodeAt(2);
            console.log(typeof(vChar), vChar);

            vChar = vStr[2];
            console.log(typeof(vChar), vChar);

            console.log("----------");

        </script>
        
    </body>
</html>

위의 코드에서 사용한 메서드와 배열처럼 사용한 것에 인덱스번호를 사용한 것에 주목하자.

문자열의 문자위치는 0부터 시작하는 것을 알 수 있는 것이기도 하다.

VB 에서는 1부터 시작했던거 같은 기억이 있지만, 헷갈린다.

어쨌든 자바스크립트 개발시에 문자를 추출하려면 인덱스번호를 사용한다는 것을 기억하면 된다.

결과화면을 보자.

원본문자열을 먼저 출력하고, 메서드의 사용과 배열처럼 사용한 것의 결과를 잘 보여준다.

 

반응형

댓글