5.20 Javascript String

기본자료형 string을 위한 레퍼(wrapper) 객체

String 객체는 기본자료형인 string을 다룰 때 유용한 프로퍼티와 메서드를 제공하는 레퍼(wrapper) 객체이다. 변수 또는 객체 속성이 문자열을 값으로 가지고 있다면 String 객체의 별도 생성없이 String 객체의 속성과 메서드를 사용할 수 있다.

기본자료형이 wrapper 객체의 메서드를 사용할 수 있는 이유는 기본자료형으로 프로퍼티나 메소드를 호출할 때 기본자료형과 연관된 wrapper 객체로 일시적으로 변환되어 프로토타입 객체를 공유하게 되기 때문이다.

var str = "Hello world!";
var res = str.toUpperCase();

console.log(res); // 'HELLO WORLD!'

위에서 기본자료형 문자열을 담고 있는 변수 str이 String.prototype.toUpperCase() 메서드를 호출할 수 있는 것은 변수 str의 값이 일시적으로 wrapper객체로 변환되었기 때문이다.

사용 빈도가 높은 프로퍼티와 메서드만을 설명한다.

1. String Constructor

String 객체는 String() 생성자 함수를 통해 생성할 수 있다. 이때 전달된 인자는 모두 문자열로 변환된다.

new String(value);
var strObj = new String("Lee");
console.log(strObj); // String {0: "L", 1: "e", 2: "e", length: 3, [[PrimitiveValue]]: "Lee"}

var strObj = new String(1);
console.log(strObj); // String {0: "1", length: 1, [[PrimitiveValue]]: "1"}

var strObj = new String(undefined);
console.log(strObj); // String {0: "u", 1: "n", 2: "d", 3: "e", 4: "f", 5: "i", 6: "n", 7: "e", 8: "d", length: 9, [[PrimitiveValue]]: "undefined"}

new 연산자를 사용하지 않고 String() 생성자 함수를 호출하면 String 객체가 아닌 문자열 리터럴을 반환한다. 이때 형 변환이 발생할 수 있다.

var x = String('Lee');

console.log(typeof x, x); // string Lee

일반적으로 문자열를 사용할 때는 기본자료형의 문자열을 사용한다.

var x = "Lee";
var y = new String("Lee");

console.log(x == y);  // true
console.log(x === y); // false

console.log(typeof x); // string
console.log(typeof y); // object

2. String Property

2.1 String.length

문자열 내의 문자 갯수를 반환한다.

var str = 'Hello';
console.log(str.length); // 5

str = '안녕하세요';
console.log(str.length); // 5

3. String Method

3.1 String.prototype.charAt()

매개변수로 전달한 index 번호에 해당하는 위치의 문자를 반환한다. index 번호는 0 ~ (문자열 길이 - 1) 사이의 정수이다.

index

str.charAt(index)
var str = 'Hello';
console.log(str.charAt(0)); // H
console.log(str.charAt(1)); // e
console.log(str.charAt(2)); // l
console.log(str.charAt(3)); // l
console.log(str.charAt(4)); // o
console.log(str.charAt(5)); // ''

지정한 index가 범위(0 ~ str.length-1)를 벗어난 경우 빈문자열을 반환한다.

3.2 String.prototype.indexOf()

문자열 내에 매개변수로 전달된 문자 또는 문자열이 처음 발견된 곳의 index를 반환한다. 발견하지 못한 경우 -1을 반환한다.

str.indexOf(searchValue[, fromIndex])
// searchValue: 검색할 문자 또는 문자열
// fromIndex : 검색 시작 index (생략할 경우, 0)
var str = 'Hello World';

console.log(str.indexOf('l'));  // 2
console.log(str.indexOf('or')); // 7
console.log(str.indexOf('or' , 8)); // -1

3.3 String.prototype.lastIndexOf()

문자열 내에 매개변수로 전달된 문자 또는 문자열이 마지막으로 발견된 곳의 index를 반환한다. 발견하지 못한 경우 -1을 반환한다.

2번째 인수(fromIndex)가 전달되면 검색 시작 위치를 fromIndex으로 이동하여 역방향으로 검색을 시작한다. 이때 검색 범위는 0 ~ fromIndex이다.

str.lastIndexOf(searchValue[, fromIndex])
// searchValue: 검색할 문자 또는 문자열
// fromIndex  : 검색 시작 index (생략할 경우, 문자열 길이 - 1)
var str = 'Hello World';

console.log(str.lastIndexOf('World')); // 6
console.log(str.lastIndexOf('l'));     // 9
console.log(str.lastIndexOf('o', 5));  // 4
console.log(str.lastIndexOf('o', 8));  // 7
console.log(str.lastIndexOf('l', 10)); // 9

console.log(str.lastIndexOf('H', 0));  // 0
console.log(str.lastIndexOf('W', 5));  // -1
console.log(str.lastIndexOf('x', 8));  // -1

lastIndexOf

3.4 String.prototype.replace()

첫번째 인수로 전달된 문자열 또는 정규표현식을 대상 문자열에서 검색하여 두번째 인수로 전달된 문자열로 대체한다. 검색된 문자열이 복수 존재할 경우 첫번째로 검색된 문자열만 대체된다.

str.replace(pattern, replacement[, flags])
// pattern: 검색 대상 문자열 또는 정규표현식
// replacement: 치환 문자열
var str = 'Hello Hello';

var replacedStr = str.replace('Hello', 'Lee');
console.log(replacedStr);
console.log(str);

replacedStr = str.replace(/hello/gi, 'Lee'); // 정규표현식
console.log(replacedStr);
console.log(str);

첫번째 인자에는 문자열 또는 정규표현식이 전달된다. 문자열의 경우 첫번째 검색 결과만이 대체되지만 정규표현식을 사용하면 다양한 방식으로 검색할 수 있다.

위의 예에서 /hello/는 패턴이라하며 검색할 대상을 의미한다. gi는 flag라 하는데 g(global)는 문자열 내에 패턴과 일치하는 모든 문자열을 검색하라는 의미이고 i(ignore)는 대소문자를 구분하지 말라는 의미이다.

자세한 내용는 RegExp를 참조 바란다.

3.5 String.prototype.split()

첫번째 인수로 전달된 문자열 또는 정규표현식을 대상 문자열에서 검색하여 문자열을 구분한 후 분리된 각 문자열로 이루어진 배열을 반환한다.

인수가 없는 경우, 대상 문자열 전체를 단일 요소로 하는 배열을 반환한다.

str.split([separator[, limit]])
// separator: 구분 대상 문자열 또는 정규표현식
// limit: 구분 대상수의 한계를 나타내는 정수
var str = 'How are you doing?';

var splitStr = str.split(' ');
console.log(splitStr); // [ 'How', 'are', 'you', 'doing?' ]

splitStr = str.split();
console.log(splitStr); // [ 'How are you doing?' ]

splitStr = str.split('');
console.log(splitStr); // [ 'H','o','w',' ','a','r','e',' ','y','o','u',' ','d','o','i','n','g','?' ]

splitStr = str.split(' ', 3);
console.log(splitStr); // [ 'How', 'are', 'you' ]

splitStr = str.split('o');
console.log(splitStr); // [ 'H', 'w are y', 'u d', 'ing?' ]

3.6 String.prototype.substring()

첫번째 인수로 전달된 index에 해당하는 문자부터 두번째 인수로 전달된 index에 해당하는 문자의 바로 이전 문자까지를 모두 반환한다. 이때 첫번째 인수 < 두번째 인수의 관계가 성립된다.

  • 첫번째 인수 > 두번째 인수 : 두 인수는 교환된다.
  • 두번째 인수가 생략된 경우 : 해당 문자열의 끝까지 반환한다.
  • 인수 < 0 또는 NaN인 경우 : 0으로 취급된다.
  • 인수 > 문자열의 길이(str.length) : 인수는 문자열의 길이(str.length)으로 취급된다.
str.substring(indexA[, indexB])
// indexA: 0 ~ 해당문자열 길이 -1 까지의 정수
// indexB: 0 ~ 해당문자열 길이까지의 정수
var str = 'Hello World'; // str.length == 11

var res = str.substring(1, 4);
console.log(res); // ell

// 첫번째 인수 > 두번째 인수 : 두 인수는 교환된다.
res = str.substring(4, 1);
console.log(res); // ell

// 두번째 인수가 생략된 경우 : 해당 문자열의 끝까지 반환한다.
res = str.substring(4);
console.log(res); // o World

// 인수 < 0 또는 NaN인 경우 : 0으로 취급된다.
res = str.substring(-2);
console.log(res); // Hello World

// 인수 > 문자열의 길이(str.length) : 인수는 문자열의 길이(str.length)으로 취급된다.
res = str.substring(1, 12);
console.log(res); // ello World

res = str.substring(11);
console.log(res); // ''

res = str.substring(20);
console.log(res); // ''

res = str.substring(0, str.indexOf(" ")+1);
console.log(res); // 'Hello'

res = str.substring(str.indexOf(" ")+1, str.length);
console.log(res); // 'World'

3.7 String.prototype.toLowerCase()

문자열의 문자를 모두 소문자로 변경한다.

var str = "Hello World!";

var res = str.toLowerCase();
console.log(res); // hello world!

3.8 String.prototype.toUpperCase()

문자열의 문자를 모두 대문자로 변경한다.

var str = "Hello World!";

var res = str.toUpperCase();
console.log(res); // HELLO WORLD!

3.9 String.prototype.trim()

문자열 양쪽 끝에 있는 공백 문자를 제거한 문자열을 반환한다.

var str = "   foo  ";
var trimmedStr = str.trim();
console.log(trimmedStr);
console.log(str);

이때 해당 문자열 자신은 변경되지 않는다. 문자열은 변경 불가능한 값(immutable value)이기 때문이다.

Reference

Back to top
Close