Language/JavaScript [JavaScript] String 객체 / 메소드

Dexter_- 2018. 10. 19. 14:24

728x90

자바스크립트에서의 문자열 표현

자바스크립트에서 문자열 리터럴은 큰따옴표("")나 작은따옴표('')를 사용하여 손쉽게 만들 수 있다.

🔔 예제)


var firstStr = "이것도 문자열입니다.";      // 큰따옴표를 사용한 문자열
var secondStr = '이것도 문자열입니다.';     // 작은따옴표를 사용한 문자열
var thirdStr = "나의 이름은 '홍길동'이야."  // 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있음.
var fourthStr = '나의 이름은 "홍길동"이야.' // 큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있음.

문자열의 길이

자바스크립트에서 문자열의 길이는 length 프로퍼티에 저장된다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript String Object</title>
</head>
<body>
    <h1>문자열의 길이</h1>
    <script>
        var strKor = "한글";
        var strEng = "abcABC";
        document.write(strKor.length + "<br>");    // 2
        document.write(strEng.length);            // 6
   </script>
</body>
</html>

실행 결과

문자열의 길이

오랫동안 사용되어 온 아스키(ASCII) 인코딩 환경에서 영문자는 한 글자당 1바이트, 한글은 한 글자당 2바이트로 표현된다. 하지만 UTF-8 인코딩 환경에서는 영문자는 한 글자당 1바이트, 한글은 한 문자당 3바이트로 표현된다.

자바스크립트의 length 프로퍼티는 해당 문자열의 총 바이트 수를 저장하는 것이 아닌 글자의 개수만을 저장한다.

이스케이프 시퀀스(escape sequence)

자바스크립트는 더욱 다양한 문자 표현을 위해 여러 가지 이스케이프 시퀀스(escape sequence) 방식을 제공한다.

자바스크립트에서 제공하는 이스케이프 시퀀스 방식은 다음과 같다.

16진수 이스케이프 시퀀스(hexadecimal escape sequence)
유니코드 이스케이프 시퀀스(unicode escape sequence)
유니코드 코드 포인트 이스케이프(unicode code point escape)

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript String Object</title>
</head>
<body>
    <h1>이스케이프 시퀀스</h1>
    <script>
        // 16진수 이스케이프 시퀀스로 \x 다음은 16진수 수로 인식됨.
        document.write('\xA2' + "<br>");
        // 유니코드 이스케이프 시퀀스로 \u 다음은 유니코드로 인식됨.
        document.write('\u00A2' + "<br>");
        // ECMAScript 6부터 새롭게 추가된 유니코드 코드 포인트 이스케이프 방식임.
        document.write(String.fromCodePoint(0x00A2) + "<br>");
   </script>
</body>
</html>

실행 결과

이스케이프 시퀀스

💡 TIP ? String.fromCodePoint() 메소드는 사파리, 익스플로러에서 지원하지 않는다.

긴 문자열 리터럴을 나누어 표현하기

자바스크립트에서는 길이가 긴 문자열 리터럴을 보기 좋게 표현하기 위해서 역 슬래시(\)나 결합(+) 연산자를 사용할 수 있다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript String Object</title>
</head>
<body>
    <h1>긴 문자열 리터럴 나누어 표현하기</h1>

    <p>이렇게 줄이 나뉜 문자열은 코드 내에서만 표현되며, 웹 페이지에서는 기존과 같이 하나의 문자열로 표현됩니다.</p>
    <script>
        document.write("이 문자열은 아주 긴 문자열입니다. \
            따라서 몇 번에 걸친 줄 나누기가 필요합니다. \
            자바스크립트에서는 역슬래시와 문자 결합 연산자를 이용하여 줄을 나눌 수 있습니다.<br>");
        document.write("이 문자열은 아주 긴 문자열입니다." + 
            " 따라서 몇 번에 걸친 줄 나누기가 필요합니다." + 
            " 자바스크립트에서는 역슬래시와 문자 결합 연산자를 이용하여 줄을 나눌 수 있습니다.");
   </script>
</body>
</html>

실행 결과

긴 문자열 리터럴 나누어 표현하기

이렇게 줄이 나뉜 문자열은 코드 내에서만 표현되며, 웹 페이지에서는 기존과 같이 하나의 문자열로 표현됩니다.

💡 TIP ? 역 슬래시(\)를 사용한 방식은 ECMAScript의 표준 방식이 아니다. 따라서 특정 웹 브라우저에서는 정상적으로 표현되지 않을 수 있다.

String 객체

자바스크립트에서 문자열은 보통 문자열 리터럴을 사용하여 표현한다.

하지만 문자열을 나타낼 때 new 연산자를 사용하여 명시적으로 String 객체를 생성할 수도 있다.

이러한 String 객체는 문자열 값을 감싸고 있는 래퍼(wrapper) 객체이다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>JavaScript String Object</title>
</head>
<body>
    <h1>String 객체</h1>

    <script>
        var str = "JavaScript";
        var strObj = new String("JavaScript");

        document.write(str + "<br>");                // "JavaScript"
        document.write(strObj + "<br>");            // "JavaScript"
        document.write(typeof str + "<br>");        // string
        document.write(typeof strObj + "<br>");        // object
        document.write((str == strObj) + "<br>");    // 문자열 값이 같으므로, true를 반환함.
        document.write((str === strObj));            // 문자열 값은 같지만 타입이 다르므로, false를 반환함.
   </script>
</body>
</html>

실행 결과

String 객체

String 메소드

String 메소드는 String 객체에 정의된 문자열과 관련된 작업을 할 때 사용하는 메소드이다.

String.fromCharCode()
String.fromCodePoint()

String.fromCharCode() 메소드

이 메소드는 쉼표로 구분되는 일련의 유니코드에 해당하는 문자들로 구성된 문자열을 반환한다.

🔔 예제)

String.fromCharCode(65, 66, 67); // "ABC"

String.fromCodePoing() 메소드

이 메소드는 쉼표로 구분되는 일련의 코드 포인트(code point)에 해당하는 문자들로 구성된 문자열을 반환한다.

🔔 예제)


String.fromCodePoint(65, 66, 67);    // "ABC"
String.fromCodePoint(0x2F804);    	 // "\uD87E\uDC04"
String.fromCodePoint(194564);    	 // "\uD87E\uDC04"

💡 TIP ? String.fromCodePoint() 메소드는 사파리, 익스플로러에서 지원하지 않는다.

자바스크립트 String 메소드

메소드	설명
String.fromCharCode()	쉼표로 구분되는 일련의 유니코드에 해당하는 문자들로 구성된 문자열을 반환함
String.fromCodePoint()	쉼표로 구분되는 일련의 코드 포인트(code point)에 해당하는 문자들로 구성된 문자열을 반환함
String.raw()	템플릿 문자열(template string)의 원형을 반환함

String.prototype 메소드

모든 String 인스턴스는 String.prototype으로 부터 메소드와 프로퍼티를 상속받는다.

이렇게 상속받은 String.prototype 메소드를 이용하면, 다음과 같은 문자열 작업을 할 수 있다.

문자열에서의 위치 반환
문자열에서 지정된 위치에 있는 문자 반환
문자열 추출
문자열 분리
문자열 결합
문자열의 대소문자 변환
문자열 주위의 공백 제거
정규 표현식을 이용한 문자열 조작

💡 TIP ? String 인스턴스의 값은 변경될 수(immutable)없으므로, 모든 String 메소드는 결과값으로 새로운 문자열을 생성하여 반환한다.

문자열에서의 위치 찾기

다음 메소드는 String 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치나 마지막으로 등장하는 위치를 반환한다.

indexOf()
lastIndexOf()

이 메소드들은 문자열을 찾기 시작할 String 인스턴스의 위치를 두 번째 인수로 전달할 수 있다. 만약 전달받은 특정 문자나 문자열을 찾을 수 없을 때는 -1을 반환한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>JavaScript String Method</title>
</head>
<body>
    <h1>문자열에서의 위치 찾기</h1>
    <script>
        var str = "abcDEFabc";

        document.write(str.indexOf('abc') + "<br>");        // 0
        document.write(str.indexOf('abcd') + "<br>");        // -1
        document.write(str.indexOf('abc', 3) + "<br><br>");    // 6

        document.write(str.lastIndexOf('abc') + "<br>");    // 6
        document.write(str.lastIndexOf('d') + "<br>");        // -1
        document.write(str.lastIndexOf('c'));                // 8
   </script>
</body>
</html>

실행 결과

문자열에서의 위치 찾기

문자열에서 지정된 위치에 있는 문자 반환

다음 메소드는 String 인스턴스에서 전달받은 인덱스에 위치한 문자나 문자 코드를 반환한다.

charAt()
charCodeAt()
charPointAt()

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>JavaScript String Method</title>
</head>
<body>
    <h1>문자열에서 지정된 위치에 있는 문자 반환</h1>
    <script>
        var str = "abcDEFabc";

        document.write(str.charAt(0) + "<br>");            // a
        document.write(str.charAt(10) + "<br>");        // 빈 문자열
        document.write(str.charCodeAt(0) + "<br>");        // 97
        document.write(str.codePointAt(0));                // 97
   </script>
</body>
</html>

실행 결과

문자열에서 지정된 위치에 있는 문자 반환

💡 TIP ? codePointAt() 메소드는 사파리, 익스플로러에서 지원하지 않는다.

문자열 추출

다음 메소드는 String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자열만을 추출하여 만든 새로운 문자열을 반환한다.

slice()
substring()
substr()

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>JavaScript String Method</title>
</head>
<body>
    <h1>문자열 추출</h1>
    <script>
        var str = "abcDEFabc";

        document.write(str.slice(2, 6) + "<br>");        // cDEF
        document.write(str.slice(-4, -2) + "<br>");        // Fa
        document.write(str.slice(2) + "<br>");            // cDEFabc

        document.write(str.substring(2, 6) + "<br>");    // cDEF
        document.write(str.substr(2, 4));                // cDEF
   </script>
</body>
</html>

실행 결과

문자열 추출

문자열 분리

다음 메소드는 String 인스턴스를 구분자(separator)를 기준으로 나눈 후, 나뉜 문자열을 하나의 배열로 반환한다.

split()

split() 메소드는 인수로 구분자를 전달하지 않으면, 전체 문자열을 하나의 배열 요소로 가지는 길이가 1인 배열을 반환한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript String Method</title>
</head>
<body>
    <h1>문자열 추출</h1>
    <script>
        var str = "자바스크립트는 너무 멋져요! 그리고 유용해요.";

        document.write(str.split() + "<br>");        // 구분자를 명시하지 않으면 아무런 동작도 하지 않음.
        document.write(str.split("") + "<br>");        // 한 문자("")씩 나눔.
        document.write(str.split(" ") + "<br>");    // 띄어쓰기(" ")를 기준으로 나눔.
        document.write(str.split("!"));                // 느낌표("!"")를 기준으로 나눔.
   </script>
</body>
</html>

실행 결과

문자열 추출

문자열 결합

다음 메소드는 String 인스턴스에 전달받은 문자열을 결합한 새로운 문자열을 반환한다.

concat()

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>JavaScript String Method</title>
</head>
<body>
    <h1>문자열 결합</h1>
    <script>
        var str = "자바스크립트";

        document.write(str + "<br>");
        document.write(str.concat("는 너무 멋져요!") + "<br>");
        document.write(str.concat("는 너무 멋져요!", " 그리고 유용해요!" + "<br>"));
        document.write(str);
   </script>
</body>
</html>

실행 결과

문자열 결합

위의 예제에서 여러 번 concat() 메소드를 실행한 후의 변수 str의 문자열은 여전히 처음과 같다. 이처럼 자바스크립트에서 String 인스턴스의 값은 변경될 수(immutable) 없다. 따라서 모든 String메소드는 결과값으로 새로운 문자열을 생성하여 반환한다.

문자열의 대소문자 변환

다음 메소드는 String 인스턴스의 모든 문자를 대문자나 소문자로 변환한 새로운 문자열을 반환한다.

toUpperCase()
toLowerCase()

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript String Method</title>
</head>
<body>
    <h1>문자열의 대소문자 변환</h1>
    <script>
        var str = "JavaScript";

        document.write(str.toUpperCase() + "<br>"); // JAVASCRIPT
        document.write(str.toLowerCase());             // javacript
   </script>
</body>
</html>

실행 결과

문자열의 대소문자 변환

문자열 주위의 공백 제거

다음 메소드는 String 인스턴스의 양 끝에 존재하는 모든 공백과 줄 바꿈 문자(LF, CR 등)를 제거한 새로운 문자열을 반환한다.

trim()

trim() 메소드는 String 인스턴스의 문자열 값 그 자체에는 영향을 주지 않는다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>JavaScript String Method</title>
</head>
<body>
    <h1>문자열 주위의 공백 제거</h1>
    <script>
        var str = "      JavaScript    ";

        document.write(str.trim());
   </script>    
</body>
</html>

실행 결과

문자열 주위의 공백 제거

정규 표현식을 이용한 문자열 조작

다음 메소드는 인수로 전달받은 정규 표현식을 이용하여, String 인스턴스 값에서 검색, 대조, 대체 등의 작업을 수행한다.

search()
match()
replace()

정규 표현식에 대한 더 자세한 사항은 자바스크립트 정규 표현식 수업에서 확인할 수 있다.

메소드	설명
indexOf()	String 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치의 인덱스를 반환함
lastIndexOf()	String 인스턴스에서 특정 문자나 문자열이 마지막으로 등장하는 위치의 인덱스를 반환함
charAt()	String 인스턴스에서 전달받은 인덱스에 위치한 문자를 반환함
charCodeAt()	String 인스턴스에서 전달받은 인덱스에 위치한 문자를 반환함
charPointAt()	String 인스턴스에서 전달받은 인덱스에 위치한 문자의 유니코드 코드 포인트(unicode code point)를 반환함
slice()	String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자열을 추출한 새 문자열을 반환함
substring()	String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자열을 추출한 새 문자열을 반환함
substr()	String 인스턴스에서 전달받은 시작 인덱스부터 길이만큼의 문자열을 추출한 새로운 문자열을 반환함
split()	String 인스턴스에서 구분자(separator)를 기준으로 나눈 후 나뉜 문자열을 하나의 배열로 반환함
concat()	String 인스턴스에 전달받은 문자열을 결합합 새로운 문자열을 반환함
toUpperCase()	String 인스턴스의 모든 문자를 대문자로 변환한 새로운 문자열을 반환함
toLowerCase()	String 인스턴스의 모든 문자를 소문자로 변환한 새로운 문자열을 반환함
trim()	String 인스턴스의 양 끝에 존재하는 공백과 모든 줄 바꿈 문자(LF, CR등)를 제거한 새로운 문자열을 반환함
search()	인수로 전달받은 정규 표현식에 맞는 문자나 문자열이 처음으로 등장하는 위치의 인덱스를 반환함
replace()	인수로 전달받은 패턴에 맞는 문자열을 대체 문자열로 변환한 새 문자열을 반환함
match	인수로 전달받은 정규 표현식에 맞는 문자열을 찾아서 하나의 배열로 반환함
includes()	인수로 전달받은 문자나 문자열이 포함되어 있는지를 검사한 후 그 결과를 불리언 값으로 반환함
startWith()	인수로 전달받은 문자나 문자열로 시작되는지를 검사한 후 그 결과를 불리언 값으로 반환함
endsWith()	인수로 전달받은 문자나 문자열로 끝나는지를 검사한 후 그 결과를 불리언 값으로 반환함
toLocaleUpperCase()	영문자뿐만 아니라 모든 언어의 문자를 대문자로 변환한 새로운 문자열을 반환함
toLocaleLowerCase()	영문자뿐만 아니라 모든 언어의 문자를 소문자로 변환한 새로운 문자열을 반환함
locaseCompare()	인수로 전달받은 문자열과 정렬 순서로 비교하여 그 결과를 정수 값으로 반환함
normalize()	해당 문자열의 유니코드 표준화 양식(Unicode Normalization Form)을 반환함
repeat()	해당 문자열을 인수로 전달받은 횟수만큼 반복하여 결합한 새로운 문자열을 반환함
toString()	String 인스턴스의 값을 문자열로 반환함
valueOf()	String 인스턴스의 값을 문자열로 반환함

728x90

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

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

[JavaScript] DOM / Document 객체 (0)	2018.10.19
[JavaScript] Array 객체 / 메소드 (0)	2018.10.19
[JavaScript] Date 객체/메소드 (0)	2018.10.18
[JavaScript] Math 객체 (0)	2018.10.18
[JavaScript] Number 메소드 (0)	2018.10.18

Embedded Software Embedded Software

자바스크립트에서의 문자열 표현

문자열의 길이

문자열의 길이

이스케이프 시퀀스(escape sequence)

이스케이프 시퀀스

긴 문자열 리터럴을 나누어 표현하기

긴 문자열 리터럴 나누어 표현하기

String 객체

String 객체

String 메소드

String.fromCharCode() 메소드

String.fromCodePoing() 메소드

자바스크립트 String 메소드

String.prototype 메소드

문자열에서의 위치 찾기

문자열에서의 위치 찾기

문자열에서 지정된 위치에 있는 문자 반환

문자열에서 지정된 위치에 있는 문자 반환

문자열 추출

문자열 추출

문자열 분리

문자열 추출

문자열 결합

문자열 결합

문자열의 대소문자 변환

문자열의 대소문자 변환

문자열 주위의 공백 제거

문자열 주위의 공백 제거

정규 표현식을 이용한 문자열 조작

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

관련글 관련글 더보기

티스토리툴바