JavaScript String 객체

JavaScript String 객체

 

프로그래밍에서 문자열은 일반적으로 문자 인코딩과 관련된 문자를 대표하는 일련의 값을 저장하는 자료형입니다. 문자열 자료형으로 선언된 변수의 경우, 일반적으로 미리 정의된 메모리에 자료를 할당합니다. 문자열이 소스 코드상에 보이는 경우엔 해당 문자열을 String literal 이라고 합니다. 

 

JavaScript의 String 객체는 문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공하는 래퍼(wrapper) 객체입니다. 변수 또는 객체가 문자열을 값으로 가지고 있다면 String 객체의 별도 생성없이 String 객체의 프로퍼티와 메소드를 사용할 수 있습니다.

 

 

1. 문자열

---

1.1. 문자열 선언

 

JavaScript에서는 문자 하나당 UTF-16 코드 문자가 사용됩니다. 문자열은 String 객체, 문자열 리터럴, 템플릿 리터럴을 이용하여 선언이 가능합니다.

 

// String 전역 객체
const str1 = String('string');
console.log(str1);  // 'string'
 
// 문자열 리터럴
const str2 = 'string_literal';
console.log(str2);  // 'string_literal'
 
// 템플릿 리터럴
const str3 = `${'template'}_literal`;
console.log(str3);  // 'template_literal'

 

문자열 선언시 Single Quotation(') 또는 Double Quotation(")을 사용할 수 있습니다. 혼용이 가능하여 어느 것을 사용하여도 상관이 없지만 SyntaxError 방지를 위해 시작과 끝에는 반드시 같은 것을 사용해주어야 합니다.

 

또한 문자열은 선언된 이후에는 변경이 불가능합니다. 따라서 문자열을 변경할 경우 새로운 문자열을 선언하게 됩니다.

 

1.2. 문자열 형태

 

JavaScript에서 문자열은 유사배열(Array Like) 형태로 참조가 가능합니다. length 프로퍼티를 가지고 있고 index를 사용하여 접근이 가능합니다.

 

const str = 'Harry';
console.log(str); // 'Harry'
console.log(str.length);  // 5
console.log(str[0]);  // 'H'
console.log(str[1]);  // 'a'
console.log(str[2]);  // 'r'
console.log(str[3]);  // 'r'
console.log(str[4]);  // 'y'

 

1.3. 템플릿 리터럴

 

템플릿 리터럴(Template Literal)은 Backtick(`) 문자를 사용하여 선언이 가능합니다. 개행 문자를 따로 쓰지 않더라도 개행 문자를 인식하며 표현식을 사용하여 문자열을 삽입할 수 있습니다. 표현식은 문자열로 타입이 변환됩니다.

 

const value = 'Harry'
const str1 = value + '\nPotter';
const str2 = `${value}
Potter`;
 
console.log(str1 === str2); // true

 

템플릿의 raw 프로퍼티는 다음과 같이 원시 문자열을 반환해줍니다.

 

String.raw 태그함수를 사용할 경우 템플릿을 입력한 대로 출력할 수 있습니다.

 

const str = String.raw`Harry \n ${'Potter'}`;
console.log(str); // Harry \n Potter

 

태그함수를 별도로 만들어 원시 문자열을 반환하려면 템플릿의 raw 프로퍼티를 아래와 같이 사용해줍니다.

 

const rawTag = function(strings) {
    return strings.raw[0];
}
 
const rawStr = rawTag`Harry \n Potter`;
console.log(rawStr);  // Harry \n Potter

 

 

2. String 생성자

---

String 생성자를 이용하여 String 객체 생성이 가능합니다. 생성시 함께 전달된 파라미터는 모두 문자열로 변환됩니다.

 

let strObj = new String('Harry');
console.log(strObj);  // String {"Harry"} 
          
strObj = new String(123);
console.log(strObj);  // String {"123"}
 
strObj = new String(undefined);
console.log(strObj);  // String {"undefined"}

 

new 연산자를 이용하여 String 객체를 생성하지 않고 String 전역 객체를 호출하면 문자열 리터럴을 반환합니다.

 

let strLiteral = String('Harry');
 
console.log(typeof strLiteral); // string
console.log(strLiteral);  // 'Harry'

 

문자열을 사용할 때는 일반적으로 Primitie Type의 문자열을 사용합니다.

 

const str = 'Harry';
const strObj = new String('Harry');
 
console.log(str == strObj);  // true
console.log(str === strObj); // false
 
console.log(typeof str);    // string
console.log(typeof strObj); // object

 

 

3. String 객체의 Property

---

String 객체는 length 프로퍼티를 가지고 있는 유사배열입니다.

 

3.1. String.length

 

length 프로퍼티는 문자열 내의 문자 개수를 반환합니다.

 

const str = 'Harry';
console.log(str.length); // 5

 

 

4. String 객체의 Method

---

4.1. toString()

 

toString() 메서드는 해당 객체를 설명하는 문자열을 반환합니다. alert처럼 문자열이 기대되는 곳에서 문자열이 아닌 객체를 사용할 경우 시스템은 암시적으로 toString() 메서드를 호출합니다.

 

// String.toString()
 
const number = 1;
console.log(typeof number); // number
console.log(typeof number.toString());  // string
console.log(number.toString()); // '1'

 

4.2. charAt()

 

charAt() 메서드는 파라미터로 받은 index에 해당하는 위치의 문자를 반환합니다. index의 범위는 0 ~ (문자열.length - 1) 사이의 정수이며 범위를 벗어난 경우 빈 문자열을 반환합니다.

 

// String.charAt(pos: number)
 
const str = 'Harry';
 
console.log(str.charAt(0)); // 'H'
console.log(str.charAt(str.length - 1));  // 'y'
console.log(str.charAt(1000));  // ''
 
for(let i=0; i<str.length; i++) {
    console.log(str.charAt(i));
    console.log(str[i]);  // String 객체는 유사배열이므로 배열과 유사하게 접근이 가능
}

 

4.3. concat()

 

concat() 메서드는 파라미터로 전달받은 1개 이상의 문자열과 연결하여 새로운 문자열을 반환합니다. concat() 메서드를 사용하는 것보다는 '+', '+=' 와 같은 할당연산자를 사용하는 것이 성능상에서 더 유리합니다.

 

// String.concat(...strings: string[])
 
const name = 'Harry';
console.log(name.concat(' ', 'Potter')); // 'Harry Potter'

 

4.4. indexOf()

 

indexOf() 메서드는 대상 문자열에서 파라미터로 전달받은 문자열을 검색하여 시작 위치의 index를 반환합니다. 일치하는 문자열이 없는 경우 -1을 반환합니다.

 

// String.indexOf(searchString: string, position?: number)
 
const str = 'Hello World';
console.log(str.indexOf('H'));  // 0
console.log(str.indexOf('ld')); // 9
console.log(str.indexOf('Wo', 8)); // -1

 

4.5. lastIndexOf()

 

lastIndexOf() 메서드는 대상 문자열에서 파라미터로 전달받은 문자열을 검색하여 마지막 위치의 index를 반환합니다. 일치하는 문자열이 없는 경우 -1을 반환하고 두번째 파라미터가 전달되었을 경우엔 indexOf() 메서드와는 다르게 역방향으로 검색이 이루어집니다.

 

// String.lastIndexOf(searchString: string, position?: number)
 
const str = 'Hello World';
console.log(str.lastIndexOf('o'));  // 7
console.log(str.lastIndexOf('l')); // 9
console.log(str.lastIndexOf('e', 1)); // 1
console.log(str.lastIndexOf('e', 0)); // -1

 

4.6. replace()

 

replace() 메서드는 대상 문자열에서 첫번째 파라미터로 전달받은 문자열 또는 정규표현식을 두번째 파라미터로 대체하여 새로운 문자열로 반환합니다. 원본 문자열은 변경되지 않습니다. 검색된 문자열이 여러개 존재할 경우엔 첫번째 문자열만 대체됩니다.

 

// String.replace(searchValue: string | RegExp, replaceValue: string | replacer: (substring: string, ...args: any[]) => string)
 
const str = '010-1234-5678';
console.log(str.replace('-', '_'));  // '010_1234-5678'
console.log(str.replace(/[^0-9]/g, '')); // '01012345678'

 

4.7. split()

 

split() 메서드는 대상 문자열에서 첫번째 파라미터로 전달받은 문자열 또는 정규표현식을 검색하여 분리한 후 각각의 문자열로 이루어진 배열을 반환합니다. 원본 문자열은 변경되지 않습니다.

 

// String.split(separator: string | RegExp, limit?: number)
 
const str = '010-1234-5678';
console.log(str.split()); // ["010-1234-5678"]
console.log(str.split('-')); // ["010", "1234", "5678"]
console.log(str.split('-', 2)); // ["010", "1234"]

 

4.8. substring()

 

substring() 메서드는 start index 부터 end index 바로 이전까지의 문자열을 반환합니다.

 

// String.substring(start: number, end?: number)
 
const str = 'Harry Potter';
console.log(str.substring(0, 5)); // 'Harry'
console.log(str.substring(5, 0)); // 'Harry' (첫번째 파라미터 > 두번째 파라미터인 경우 두 파라미터는 교환됨)
console.log(str.substring(6)); // 'Potter' (두번쨰 파라미터가 생략된 경우 해당 문자열의 끝까지 반환됨)
console.log(str.substring(-1)); // 'Harry Potter' (파라미터가 0 또는 NaN인 경우 0으로 취급됨)
console.log(str.substring(0, 50)); // 'Harry Potter' (파라미터 > 문자열의 길이인 경우 파라미터는 문자열의 길이로 취급됨)

 

4.9. slice()

 

slice() 메서드는 substring() 메서드와 동일하지만 파라미터로 음수를 전달할 수 있습니다.

 

// String.slice(start?: number, end?: number)
 
const str = 'Harry Potter';
console.log(str.slice(-6)); // 'Potter' (파라미터가 0 또는 NaN인 경우 뒤에서 역순으로 반환됨)
console.log(str.slice(0)); // 'Harry Potter'
console.log(str.slice(0, 5)); // 'Harry'

 

4.10. toLowerCase()

 

toLowerCase() 메서드는 문자열의 모든 문자를 소문자로 변경합니다.

 

// String.toLowerCase()
 
const str = 'Harry Potter';
console.log(str.toLowerCase()); // 'harry potter'

 

4.11. toUpperCase()

 

toUpperCase() 메서드는 문자열의 모든 문자를 대문자로 변경합니다.

 

// String.toUpperCase()
 
const str = 'Harry Potter';
console.log(str.toUpperCase()); // 'HARRY POTTER'

 

4.12. trim()

 

trim() 메서드는 문자열 양 끝의 공백을 제거한 문자열을 반환합니다.

 

// String.trim()
 
const str = '     Harry Potter     ';
console.log(str.trim()); // 'Harry Potter'

 

4.13. repeat()

 

repeat() 메서드는 파라미터로 전달받은 숫자만큼 대상 문자열을 반복하여 새로운 문자열을 반환합니다.

 

// String.repeat(count: number)
 
const str = 'Harry';
console.log(str.repeat(0)); // '' (파라미터가 0인 경우 빈 문자열을 반환)
console.log(str.repeat(2)); // 'HarryHarry'
console.log(str.repeat(2.5)); // 'HarryHarry'
console.log(str.repeat(-1)); // RangeError: Invalid count value

 

4.14. includes()

 

includes() 메서드는 대상 문자열에 파라미터로 전달받은 문자열이 포함되어 있는지 검사하여 Boolean 타입으로 반환합니다.

 

// String.includes(searchString: string, position?: number)
 
const str = 'Harry Potter';
console.log(str.includes('Harry')); // true
console.log(str.includes(' ')); // true
console.log(str.includes('Harry', 0)); // true
console.log(str.includes('Harry', 5)); // false
console.log(str.includes('potter')); // false

 

이상으로 JavaScript의 String 객체에 대해 알아봤습니다.

 

 

※ Reference

 

• poiemaweb.com, String 레퍼 객체, https://poiemaweb.com/js-string
• medium.com/@pks2974, Javascript 와 String 문자열, https://medium.com/@pks2974/javascript-%EC%99%80-string-%EB%AC%B8%EC%9E%90%EC%97%B4-b1b3fccb0e27
• ko.wikipedia.org, 문자열, https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%9E%90%EC%97%B4
• eblee-repo.tistory.com, [JavaScript] ES6 템플릿 리터럴에 대해 알아보자!!, https://eblee-repo.tistory.com/38