[JS] 자바스크립트 문자열 객체 메서드 알아보기!!

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Leeyanggoo

[JS] 자바스크립트 문자열 객체 메서드 알아보기!! 본문

2023/JavaScript

[JS] 자바스크립트 문자열 객체 메서드 알아보기!!

Leeyanggoo 2023. 4. 22. 22:16

문자열 객체?

문자열 객체는 자바스크립트 자료형 중 원시 유형의 하나로 문자열을 다루기 위한 기본 자료형입니다.

문자열 객체는 연속된 유니코드 문자들의 시퀀스를 표현하며, 다양한 문자열 조작 메서드를 제공합니다.

이 메서드들을 사용하여 문자열의 길이를 구하거나, 부분 문자열을 추출하고, 문자열을 검색, 대체, 병합 및 분할하는 등의 작업을 수행할 수 있습니다.

문자열 객체는 원시 문자열과 관련하여 불변성을 가지며, 메서드를 사용하여 새로운 문자열을 생성하더라도 원본 문자열은 변하지 않습니다.

01. at()

"문자열".at(인덱스)

인덱스(index)를 받아, 문자열에서 해당 인덱스의 문자를 반환합니다.
음수 인덱스를 사용하면 문자열의 뒤에서부터 위치를 계산합니다.
인덱스가 범위를 벗어날 경우 'undefined'을 반환합니다.

{
const str = '𐐀hello world';

console.log(str.at(0)); // '𐐀'
console.log(str.at(1)); // 'h'
console.log(str.at(7)); // 'w'
console.log(str.at(-1)); // 'd'
console.log(str.at(20)); // undefined
}

02. chartAt()

"문자열".chartAt(위치값)

문자열에서 특정 문자의 위치를 가져옵니다.
배열처럼 대괄호([])를 이용해 문자열의 위치를 인덱스처럼 활용할 수 있습니다.

{
let str = "Hello"

str.charAt(1)	//"H"
str[5]	//"o"
}

03. charCodeAt()

"문자열".charCodeAt(인덱스)

지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 유니코드 정수 값을 반환합니다.
인덱스가 범위를 벗어날 경우 'NaN'을 반환합니다.

{
const str = 'hello world';

console.log(str.charCodeAt(1)); // 101 (유니코드 'e'의 값)
console.log(str.charCodeAt(6)); // 119 (유니코드 'w'의 값)
console.log(str.charCodeAt(20)); // NaN
}

04. codePointAt()

"문자열".codePointAt(인덱스)

지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 유니코드 정수 값을 반환합니다.
인덱스가 범위를 벗어날 경우 'undefined'을 반환합니다.
charCodeAt() 메서드와 달리, 코드 포인트 값을 반환하므로 16비트 이상의 문자열도 올바르게 처리할 수 있습니다.

{
const str = '𐐀hello world';

console.log(str.codePointAt(0)); // 66304 (유니코드 '𐐀'의 값)
console.log(str.codePointAt(1)); // 56384 (유니코드 대리 서로집합 A의 값)
console.log(str.codePointAt(7)); // 119 (유니코드 'w'의 값)
console.log(str.codePointAt(20)); // undefined
}

05. concat()

"문자열1".concat(문자열2, 문자열3, ...)

여러 개의 문자열을 입력 받아, 이들을 연결하여 새로운 문자열을 반환합니다.
원본 문자열은 변경되지 않으며, 새로운 문자열이 반환됩니다.
'+' 연산자를 사용하는 것보다는 성능이 다소 느리지만, 여러 문자열을 한 번에 연결할 때 유용합니다.

{
const str1 = 'Hello';
const str2 = 'World';
const str3 = '!';

console.log(str1.concat(str2, str3)); // 'HelloWorld!'
console.log(str1); // 'Hello' (원본 문자열은 변경되지 않음)
}

06. includes() 🐾

"문자열".includes(검색값, [위치값])

문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다.
대소문자를 구별합니다.

{
"javascript reference".includes("javascript");  //true
"javascript reference".includes("j");  //true
"javascript reference".includes("a");  //true
"javascript reference".includes("reference");  //true
"javascript reference".includes("reference, 11");  //true
"javascript reference".includes("reference, 12");  //false
"javascript reference".includes("J");  //false 대소문자 구별
}

07. indexOf() 🐾🐾

"문자열".indexOf(검색값, [위치값])

문자열을 검색하여, 주어진 값과 일치하는 첫 번째 위치값(index)을 반환합니다.
문자열을 검색하여 일치하는 값이 없으면 -1을 반환합니다.
대소문자를 구별합니다.

{
"javascript reference".indexOf("javascript");   //결과 : 0 (배열 순서로 0번째)
"javascript reference".indexOf("javascripts");   //결과 : -1 (일치하는 값이 없을 때)
"javascript reference".indexOf("j");   //결과 : 0
"javascript reference".indexOf("J");    //결과 : -1 (대소문자 구별)
"javascript reference".indexOf("a");   //결과 : 1 (제일 먼저 찾는 값)
"javascript reference".indexOf("ja");   //결과 : 0
"javascript reference".indexOf("jv");   //결과 : -1
"javascript reference".indexOf("reference");    //자릿수를 포함해서 계산(공백 포함)
"javascript reference".indexOf("r");    //결과 : 6 (제일 먼저 찾는 값)
"javascript reference".indexOf("re");    //결과 : 11
"javascript reference".indexOf("javascript", 0) // 결과 : 0 (뒤에 있는 숫자는 시작하는 위치 값을 뜻한다.)
"javascript reference".indexOf("javascript", 1) // 결과 : -1
"javascript reference".indexOf("reference", 0) // 결과 : 11
"javascript reference".indexOf("reference", 1) // 결과 : 11
"javascript reference".indexOf("reference", 11) // 결과 : 11
"javascript reference".indexOf("reference", 12) // 결과 : -1
"javascript reference".indexOf("r", 7)      //결과 : 11
"javascript reference".indexOf("r", 12)      //결과 : 15
}

08. lastIndexOf()

"문자열".lastIndexOf(검색값, [위치값])

문자열을 역순으로 검색하여, 주어진 값과 일치하는 첫 번째 위치값(index)을 반환합니다.
문자열을 역순으로 검색하여 일치하는 값이 없으면 -1을 반환합니다.
대소문자를 구별합니다.

{
"javascript reference".lastIndexOf("javascript");       // 0
"javascript reference".lastIndexOf("javascripts");      // -1
"javascript reference".lastIndexOf("j");                // 0
"javascript reference".lastIndexOf("a");                // 3
"javascript reference".lastIndexOf("jv");               // -1
"javascript reference".lastIndexOf("reference");        // 11
"javascript reference".lastIndexOf("r");                // 15
"javascript reference".lastIndexOf("javascript", 0);    // 0
"javascript reference".lastIndexOf("javascript", 1);    // 0
"javascript reference".lastIndexOf("reference", 0);     // -1
"javascript reference".lastIndexOf("reference", 1);     // -1
"javascript reference".lastIndexOf("reference", 11);    // 11
"javascript reference".lastIndexOf("reference", 12);    // 11

var stringName = 'coding everybody everywhere';
console.log(stringName.indexOf('every')); // 7, lastIndexOf와 indexOf의 차이
console.log(stringName.lastIndexOf('every')); // 17, lastIndexOf와 indexOf의 차이
}

09. localeCompare()

"문자열1".localeCompare(문자열2, [locales], [options])

문자열1과 문자열2를 현지화된 순서에 따라 비교합니다.
문자열1이 문자열2보다 작은 경우 음수, 같을 경우 0, 큰 경우는 양수
선택적으로 'locales'와 'options' 인수를 사용하여 비교 방법을 커스터마이즈할 수 있습니다.
locales : 지역 설정을 사용하면, 해당 지역의 언어 규칙에 따라 문자열을 비교합니다.
options : 객체 형태로 옵션을 지정할 수 있습니다.
usage : 'sort' 또는 'search'를 지정하여 비교 목적에 따른 최적화를 선택할 수 있습니다.
sensitivity : 'base', 'accent', 'case', 'variant' 중 하나를 지정하여 문자열 비교의 정확도를 조절할 수 있습니다.
ignorePunctuation : 불리언 값으로, 구두점 무시 여부를 지정할 수 있습니다.
numeric : 불리언 값으로, 숫자를 숫자로서 비교할지 여부를 지정할 수 있습니다.
caseFirst : 'upper' 또는 'lower'를 지정하여 대소문자를 먼저 비교할지를 결정할 수 있습니다.

{
const str1 = 'apple';
const str2 = 'banana';
const str3 = 'Apple';

console.log(str1.localeCompare(str2)); // -1
console.log(str1.localeCompare(str3)); // 1
console.log(str1.localeCompare(str1)); // 0

const str1 = 'ä';
const str2 = 'z';
console.log(str1.localeCompare(str2, 'en')); // -1 (영어 규칙에 따라 비교)

const str1 = 'apple';
const str2 = 'Apple';
console.log(str1.localeCompare(str2, undefined, { sensitivity: 'case' })); // -1
}

10. match() 🐾

"문자열".match(검색값)
"문자열".match(정규식표현)

문자열(정규식)을 검색하고, 문자열(배열)을 반환합니다.
문자열을 검색하여 일치하는 값이 없으면 null을 반환합니다.
대소문자를 구별합니다.
match() 메서드는 문자값(배열)을 반환하고, search() 메서드는 위치값(숫자)를 반환합니다.

{
"javascript reference".match("javascript");  //javascript (배열 안에 있는 "javascript"가 나온 것)
"javascript reference".match("reference");  //reference (배열 안에 있는 문자를 반환한다)
"javascript reference".match("r");  //r (배열 안에 있는 문자를 반환한다)
"javascript reference".match("R");  //null
"javascript reference".match(/reference/);  //reference
"javascript reference".match(/R/);  //null
"javascript reference".match(/Reference/i);  //reference
"javascript reference".match(/r/);  //r
"javascript reference".match(/r/g);  //r r r (문자열 안에 있는 모든 r 반환)
"javascript reference".match(/w/g);  //null
"javascript Rreference".match(/r/ig);  //r R r
"javascript Rreference".match(/R/ig);  //r R r
}

11. matchAll()

"문자열".matchAll(정규표현식)

문자열에서 정규 표현식과 일치하는 모든 부분을 찾아, 이터러블 객체로 반환합니다.
반환된 이터러블 객체의 각 요소는, 일치하는 부분에 대한 정보를 담고 있는 RegExpExecArray 객체입니다.
일치하는 부분이 없을 경우, 빈 이터러블 객체를 반환합니다.
정규 표현식에 'g' 플래그(global 검색)를 사용하지 않으면, 무한 루프가 발생할 수 있으므로 주의해야 합니다.
이터러블(iterable) 객체
이터러블 객체는 반복 가능한 객체입니다. 즉, for...of 문 등 반복문을 사용하여 순회할 수 있는 객체입니다.
배열, 문자열, Map, Set 등 다양한 자료구조가 이터러블 객체입니다.
RegExpExecArray 객체
정규 표현식의 exec() 메서드나 문자열의 match() 메서드의 반환 값으로 사용되는 객체입니다.
일치하는 부분에 대한 정보를 담고 있습니다.
배열과 유사한 구조로, [0] 인덱스에 전체 일치 문자열이 저장되며, [1], [2], ...에는 그룹화된 일치 항목이 저장됩니다.
추가적으로 index 프로퍼티(일치하는 부분의 시작 인덱스)와 input 프로퍼티(원본 문자열)를 가지고 있습니다.

{
const str = 'Hello, my name is John Doe. I live in New York.';
const regex = /\b\w+\b/g; // 단어 경계에 위치한 연속된 문자들을 찾는 정규 표현식

for (const match of str.matchAll(regex)) {
console.log(match[0]);
}
// 출력: Hello, my, name, is, John, Doe, I, live, in, New, York
}

12. normalize()

"문자열".normalize([form])

문자열의 유니코드 정규화를 수행하여, 동일한 표현을 가진 문자들을 통일된 형태로 반환합니다.
선택적 인수 'form'을 사용하여 정규화 방식을 지정할 수 있으며, 다음 중 하나의 값이 사용됩니다.
'NFC' (기본값): Normalization Form C로, 조합된 형태로 정규화합니다.
'NFD': Normalization Form D로, 분해된 형태로 정규화합니다.
'NFKC': Normalization Form KC로, 조합된 형태로 정규화하면서 호환성 구성 요소를 폐기합니다.
'NFKD': Normalization Form KD로, 분해된 형태로 정규화하면서 호환성 구성 요소를 폐기합니다.
정규화는 문자열 비교, 정렬 등의 작업에서 유용하게 사용됩니다.

{
const str1 = 'Café';
const str2 = 'Cafe\u0301'; // 'Cafe'와 분해된 악센트 기호로 표현된 문자열

console.log(str1 === str2); // false
console.log(str1.normalize()); // Café
console.log(str2.normalize()); // Café
console.log(str1.normalize() === str2.normalize()); // true
}

13. padEnd()

"문자열".padEnd(길이, [패딩문자열])

문자열의 끝에 패딩 문자열을 추가하여, 주어진 길이에 도달할 때까지 반복합니다.
선택적 인수 '패딩문자열'을 사용하여 패딩에 사용할 문자열을 지정할 수 있습니다. 지정하지 않으면 공백 문자(' ')가 사용됩니다.
원본 문자열의 길이가 이미 주어진 길이와 같거나 더 길면, 원본 문자열을 그대로 반환합니다.

{
const str = 'hello';

console.log(str.padEnd(10, '.')); // 'hello.....'
console.log(str.padEnd(3, '.')); // 'hello' (원본 문자열의 길이가 이미 3 이상이므로 변화 없음)
console.log(str.padEnd(10)); // 'hello ' (패딩 문자열을 지정하지 않으면 공백이 사용됨)
}

14. padStart()

"문자열".padStart(길이, [패딩문자열])

문자열의 시작에 패딩 문자열을 추가하여, 주어진 길이에 도달할 때까지 반복합니다.
선택적 인수 '패딩문자열'을 사용하여 패딩에 사용할 문자열을 지정할 수 있습니다. 지정하지 않으면 공백 문자(' ')가 사용됩니다.
원본 문자열의 길이가 이미 주어진 길이와 같거나 더 길면, 원본 문자열을 그대로 반환합니다.

{
const str = 'hello';

console.log(str.padStart(10, '.')); // '.....hello'
console.log(str.padStart(3, '.')); // 'hello' (원본 문자열의 길이가 이미 3 이상이므로 변화 없음)
console.log(str.padStart(10)); // ' hello' (패딩 문자열을 지정하지 않으면 공백이 사용됨)
}

15. repeat()

"문자열".repeat(횟수)

문자열을 주어진 횟수만큼 반복하여, 새로운 문자열을 생성하고 반환합니다.
횟수가 0 이면 빈 문자열을 반환합니다.
횟수가 음수거나 무한대 값인 경우, RangeError가 발생합니다.

{
const str = 'hello';

console.log(str.repeat(3)); // 'hellohellohello'
console.log(str.repeat(0)); // ''
console.log(str.repeat(1)); // 'hello'
}

'2023/JavaScript' Related Articles

Leeyanggoo

[JS] 자바스크립트 문자열 객체 메서드 알아보기!! 본문

[JS] 자바스크립트 문자열 객체 메서드 알아보기!!

문자열 객체?

01. at()

02. chartAt()

03. charCodeAt()

04. codePointAt()

05. concat()

06. includes() 🐾

07. indexOf() 🐾🐾

08. lastIndexOf()

09. localeCompare()

10. match() 🐾

11. matchAll()

12. normalize()

13. padEnd()

14. padStart()

15. repeat()

티스토리툴바