[Javascript] 자바스크립트 표준 객체 - String 객체와 메소드

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

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

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

 

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

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

16진수 이스케이프 시퀀스(hexadecimal escape sequence)

• 16진수 이스케이프 시퀀스로 \x 다음은 16진수 수로 인식된다.

'\xA2';

유니코드 이스케이프 시퀀스(unicode escape sequence)

• 유니코드 이스케이프 시퀀스로 \u 다음은 유니코드로 인식된다.

'\u00A2';

유니코드 코드 포인트 이스케이프(unicode code point escape)

• ECMAScript 6부터 새롭게 추가된 유니코드 코드 포인트 이스케이프 방식이다.

// String.fromCodePoint() 메소드는 사파리, 익스플로러에서 지원하지 않는다
String.fromCodePoint(0x00A2);

 

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

• 자바스크립트에서는 길이가 긴 문자열 리터럴을 보기 좋게 표현하기 위해서 역 슬래시 \ 나 결합 + 연산자를 사용할 수 있다.
• 역 슬래시 \ 를 사용한 방식은 ECMAScript의 표준 방식이 아니므로 특정 웹 브라우저에서는 정상적으로 표현되지 않을 수도 있다.

document.write("이 문자열은 아주 긴 문자열입니다. \
따라서 몇 번에 걸친 줄 나누기가 필요합니다. \
자바스크립트에서는 역슬래시와 문자 결합 연산자를 사용하여 줄을 나눌 수 있습니다.");

document.write("이 문자열은 아주 긴 문자열입니다." + 
" 따라서 몇 번에 걸친 줄 나누기가 필요합니다." + 
" 자바스크립트에서는 역슬래시와 문자 결합 연산자를 사용하여 줄을 나눌 수 있습니다.");

 

String 객체

• 자바스크립트에서 문자열은 보통 문자열 리터럴을 사용하여 표현하지만, 문자열을 나타낼 때 new 연산자를 사용하여 명시적으로 String 객체를 생성할 수도 있으며 이러한 String 객체는 문자열 값을 감싸고 있는 래퍼(wrapper) 객체다.

String 생성자

• String 객체는 String 생성자 함수를 통해 생성할 수 있다. 이때 전달된 인자는 모두 문자열로 변환된다.
• new 연산자를 사용하지 않고 String 생성자 함수를 호출하면 String 객체가 아닌 문자열 리터럴을 반환한다. 이때 형 변환이 발생할 수 있다.
• 일반적으로 문자열을 사용할 때는 원시 타입 문자열을 사용한다.

var str = "JavaScript";
var strObj = new String("JavaScript");

console.log(str);              // "JavaScript"
console.log(strObj);           // "JavaScript"

console.log(str == strObj);  // 문자열 값이 같으므로, true를 반환
console.log(str === strObj); // 문자열 값은 같지만 타입이 다르므로, false를 반환

console.log(typeof str);       // string
console.log(typeof strObj);    // object

 

String 프로퍼티

String.length

• 문자열 내의 문자 갯수를 반환하며 해당 문자열의 총 바이트 수를 저장하는 것이 아닌 글자의 개수만을 저장한다.
• String 객체는 length 프로퍼티를 소유하고 있으므로 유사 배열 객체이다.
• 오랫동안 사용되어 온 아스키(ASCII) 인코딩 환경에서 영문자는 한 글자당 1바이트 한글은 한 글자당 2바이트로 표현되지만, UTF-8 인코딩 환경에서는 영문자는 한 글자당 1바이트, 한글은 한 문자당 3바이트로 표현된다.

var strKor = "한글";
var strEng = "abcABC";
strKor.length;           // 2
strEng.length;           // 6

 

String 메소드

• String 객체의 모든 메소드는 언제나 새로운 문자열을 반환한다. 문자열은 변경 불가능(immutable)한 원시 값이기 때문이다.

String.fromCharCode() 메소드

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

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

String.fromCodePoint() 메소드

• String.fromCodePoint() 메소드는 쉼표로 구분되는 일련의 코드 포인트(code point)에 해당하는 문자들로 구성된 문자열을 반환하며, 사파리, 익스플로러에서 지원하지 않는다.

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

String.raw() 메소드

• String.raw() 메소드는 템플릿 문자열(template string)의 원형을 반환한다.

 

String.prototype 메소드

• 모든 String 인스턴스는 String.prototype으로부터 메소드와 프로퍼티를 상속받으며, 이렇게 상속받은 String.prototype 메소드를 이용하면 다음과 같은 문자열 작업을 할 수 있다.
• String 인스턴스의 값은 변경될 수(immutable) 없으므로, 모든 String 메소드는 결괏값으로 새로운 문자열을 생성하여 반환한다.

문자열에서의 위치 찾기

• indexOf()와 lastIndexOf() 메소드는 String 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치나 마지막으로 등장하는 위치를 반환한다.
• 이 메소드들은 문자열을 찾기 시작할 String 인스턴스의 위치를 두 번째 인수로 전달할 수 있으며, 만약 전달받은 특정 문자나 문자열을 찾을 수 없을 때는 -1을 반환한다.

var str = "abcDEFabc";
str.indexOf('abc');        // 0  -> 자바스크립트에서 인덱스는 0부터 시작
str.indexOf('abcd');       // -1 -> 문자열을 비교할 때 문자의 대소문자를 구분
str.indexOf('abc', 3);     // 6  -> 인덱스 3부터 'abc'를 찾기 시작
str.lastIndexOf('abc');    // 6
str.lastIndexOf('d');      // -1 -> 발견하지 못한 경우 -1을 반환
str.lastIndexOf('c');      // 8

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

• charAt(), charCodeAt(), charPointAt() 메소드는 String 인스턴스에서 전달받은 인덱스에 위치한 문자나 문자 코드를 반환한다.

var str = "abcDEFabc";
str.charAt(0);      // a
str.charAt(10);     // 빈 문자열 -> 전달받은 값이 문자열 길이보다 크면 빈 문자열 반환
str.charCodeAt(0);  // 97      -> 'a'에 해당하는 UTF-16 코드를 반환
str.codePointAt(0); // 97      -> 'a'에 해당하는 유니코드 코드 포인트를 반환

문자열 추출

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

var str = "abcDEFabc";

str.slice(2, 6);     // cDEF    -> 인덱스 2부터 인덱스 5까지의 문자열 추출
str.slice(-4, -2);   // Fa      -> 음수로 전달된 인덱스는 문자열 뒤에서부터 시작
str.slice(2);        // cDEFabc -> 종료 인덱스가 전달되지 않으면 문자열 끝까지 추출

str.substring(2, 6); // cDEF
str.substr(2, 4);    // cDEF

문자열 분리

• split() 메소드는 String 인스턴스를 구분자를 기준으로 나눈 후, 나뉜 문자열을 하나의 배열로 반환한다. 원본 문자열은 변경되지 않는다.
• split() 메소드는 인수로 구분자를 전달하지 않으면, 전체 문자열을 하나의 배열 요소로 가지는 길이가 1인 배열을 반환한다.

var str = "자바스크립트는 너무 멋져요! 그리고 유용해요.";
str.split();    // 구분자를 명시하지 않으면 아무런 동작도 하지 않음
str.split("");  // 한 문자("")씩 나눔
str.split(" "); // 띄어쓰기(" ")를 기준으로 나눔
str.split("!"); // 느낌표("!")를 기준으로 나눔

문자열 결합

• concat() 메소드는 String 인스턴스에 전달받은 문자열을 결합한 새로운 문자열을 반환합니다.
• concat 메소드를 사용하는 것보다는 +, += 할당 연산자를 사용하는 것이 성능상 유리하다.

var str = "자바스크립트";

str;                                  // 자바스크립트
str.concat("는 멋져요!");               // 자바스크립트는 멋져요!
str.concat("는 멋져요!", " 유용해요.");   // 자바스크립트는 멋져요! 유용해요!
str;                                 // 자바스크립트

문자열의 대소문자 변환

• toUpperCase(), toLowerCase() 메소드는 String 인스턴스의 모든 문자를 대문자나 소문자로 변환한 새로운 문자열을 반환한다.

var str = "JavaScript";
str.toUpperCase();       // JAVASCRIPT
str.toLowerCase();       // javascript

문자열 주위의 공백 제거

• trim() 메소드는 String 인스턴스의 양 끝에 존재하는 모든 공백과 줄 바꿈 문자를 제거한 새로운 문자열을 반환하지만, String 인스턴스의 문자열 값 그 자체에는 영향을 주지 않는다.

var str = "      JavaScript    ";
str.trim();                       // JavaScript

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

• search(), match(), replace() 메소드는 인수로 전달받은 정규 표현식을 이용하여, String 인스턴스 값에서 검색, 대조, 대체 등의 작업을 수행한다.
• replace() 메소드의 경우 원본 문자열은 변경되지 않고 결과가 반영된 새로운 문자열을 반환하며, 검색된 문자열이 여럿 존재할 경우 첫번째로 검색된 문자열만 대체된다.

var targetStr = "간장 공장 공장장은 강 공장장이고, 된장 공장 공장장은 장 공장장이다."
var strReg1 = /공장/;
var strReg2 = /장공/;

targetStr.search(strReg1);        // 3
targetStr.search(strReg2);        // -1


const str = 'Hello world';
console.log(str.replace('world', 'Lee')); // Hello Lee

repeat() 메소드

• 인수로 전달한 숫자만큼 반복해 연결한 새로운 문자열을 반환한다. count가 0이면 빈 문자열을 반환하고 음수이면 RangeError를 발생시킨다.

console.log('abc'.repeat(0));   // ''
console.log('abc'.repeat(1));   // 'abc'
console.log('abc'.repeat(2));   // 'abcabc'
console.log('abc'.repeat(2.5)); // 'abcabc' (2.5 → 2)
console.log('abc'.repeat(-1));  // RangeError: Invalid count value

includes() 메소드

• 인수로 전달한 문자열이 포함되어 있는지를 검사하고 결과를 불리언 값으로 반환한다. 두번째 인수는 옵션으로 검색할 위치를 나타내는 정수이다.

const str = 'hello world';

console.log(str.includes('hello')); // true
console.log(str.includes(' '));     // true
console.log(str.includes('wo'));    // true
console.log(str.includes('wow'));   // false
console.log(str.includes(''));      // true
console.log(str.includes());        // false

// String​.prototype​.indexOf 메소드로 대체할 수 있다.
console.log(str.indexOf('hello')); // 0

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/