My Melody Kawaii

JAVASCRIPT

자바스크립트 문자열 객체

younajeong 2023. 4. 22. 23:49

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90

문자열 객체

 

자바스크립트에서 문자열은 문자들의 집합을 나타내는 데이터 타입입니다. 이러한 문자열 데이터를 다루기 위해 자바스크립트는 String객체를 제공합니다. String객체는 문자열을 생성하고 다양한 문자열 조작 기능을 제공합니다. 

 

at()

at()메서드는 인덱스를 전달받아 해당 위치의 문자를 반환합니다. 만약 인데스 문자열 길이를 넘어선 경우 undefined를 반환합니다.

 

let str = "hello";
console.log(str.at(1)); //e
console.log(str.at(10)); //undefined

 

at(1)은 문장열 hello 에서 인덱스 1의 위치에 있는 문자 e 를 반환합니다. at(10)은 문자열의 길이가 5이므로 해당 인덱스가 유효하지 않기 때문에 undefined를 반화낳ㅂ니다. 

 

charAt()

chartAt()메서드는 문자열에서 특정 위치의 문자를 반환합니다. 인덱스를 전달받아 해당 위치의 문자를 반환합니다. 만약 인덱스가 문자열 길이를 넘어선 경우 빈 문자열 ('')를 반환합니다.

 

let str = "hello";
console.log(str.charAt(1)); //e
console.log(str.chartAt(10); //''

 

charAt(1)은 문자열 hello에서 인덱스 1의 위치에 있는 문자 e를 반환합니다. charAt(10)은 문자열의 길이가 5이므로 해당 인덱스가 존재하지 않아서 빈 문자열 ('')를 반환합니다.

 

charCodeAt()

charCodeAt()메서드는 인덱스를 전달받아 해당 위치의 문자의 유니코드 코드 포인트 값을 반환합니다. 만약 인덱스가 문자열 길이를 넘어선 경우 NaN을 반환합니다.

 

let str = "hello";
console.log(str.charCodeAt(1)); // 101
console.log(str.charCodeAt(10)); // NaN

 

charCodeAt(1)은 문자열 hello에서 인덱스 1의 위치에 있는 문자 e의 유니코드 코드 포인트 값을 반환합니다. charCodeAt(10)은 문자열의 길이가 5이므로 해당 인덱스가 유효하지 않기 때문에 NaN을 반환합니다. 

 

codePointAt()

codePointAt() 메서드는 인덱스를 전달받아 해당 위치의 문자의 코드 포인트 값을 반환합니다. 만약 인덱스가 문자열 길이를 넘어선 경우 undefined를 반환합니다. 인코딩된 문자열에서 유효한 코드 포인트를 반환합니다. 이를 위해서 codePointAt()메서드는 서로 다른 두개의 UTF-16코드 유닛으로 구성된 하나의 문자를 인식할 수 있습니다.

 

let str = "😀👍";
console.log(str.codePointAt(0)); // 128512
console.log(str.codePointAt(1)); // 56845
console.log(str.codePointAt(2)); // 128077
console.log(str.codePointAt(3)); // 128077
console.log(str.codePointAt(4)); // undefined

 

문자열 😀👍는 각각 두 개의 UTF-16코드 유닛으로 구성된 두개의 이모지 문자를 포함하고 있습니다. codePointAt()메서드를 사용하여 문자열에서 각 이모지 문자 코드 포인트 값을 반환할 수 있습니다. 

 

 

concat()

'concat()'메서드는 문자열의 끝에 하나 이상의 문자열을 추가하여 새로운 문자열을 반환합니다. 문자열을 추가 할 수 있는 하나 이상의 매개변수를 전달 받으며 전달된 매개변수는 순서대로 현재 문자열의 끝에 추가됩니다.

 

let str1 = "hello";
let str2 = "world";
let str3 = "!";
let newStr = str1.concat(" ", str2, str3);
console.log(newStr); // "hello world!"

 

concat() 메서드를 사용하여 세 개의 문자열을 결합하연 새로운 문자열을 만듭니다. 이렇게 만들어진 새로운 문자열은 "hello World"입니다. 

 

localeCompare()

localeCompare() 메서드는 두 개의 문자열을 비교화여, 정렬 순서를 결정하는 값을 반환합니다. 매개변수로 비교할 문자열을 전달받으며 전달된 문자열과 현재 문자열의 정렬 순서를 비교하여 결과를 반환합니다, 반환 값은 다음과 같습니다.

 

  • 비교할 문자열이 현재 문자열보다 작으면 음수 값을 반환합니다.
  • 비교할 문자열이 현재 문자열과 같으면 0을 반환합니다.
  • 비교할 문자열이 현재 문자열보다 크면 양수 값을 반환합니다.
let str1 = "apple";
let str2 = "banana";
let str3 = "cherry";
let result1 = str1.localeCompare(str2);
let result2 = str2.localeCompare(str3);
console.log(result1); // -1
console.log(result2); // 1

 

localeCompare() 메서드를 사용하여 문자열 apple과 banna,banna와 cherry를 비교합니다. 결과값을 변수에 저장하여 출력합니다. 결과값이 음수이면 첫 번째 문자열이 더 작은 것이며, 양수이면 두번째 문자열이 더 큰 것입니다. localeCompare()메서드는 현재 로케일 설정에 따라 문자열을 비교합니다. 따라서 문자열을 비교할 때 로케일 설정을 고려하여 비교하는 것이 중요합니다. 이를 위해서 localeCompare()메서드의 매개변수로 로케일 설정을 전달할 수 있습니다.

 

 

*로케일: 국가 및 언어 설정

 

normalize()

normalize()메서드는 유니코드 정규화를 수행하여, 문자열의 일관성을 보장합니다. 유니코드는 문자를 표현하는 다양한 방법을 제고앟ㅂ니다. 예를어 é 는 일반적으로 e 와 ´로 표현됩니다. 이러한 다양한 표현 방법은 일관성이 없고, 같은 문자라고 인식이 되지 않을 수 있습니다. normalize()메서드는 이러한 문제를 해결하기 위해 유니코드 정규화를 수행합니다.

 

normalize()메서드는 매개변수를 전달받으며 전달된 매개변수는 유니코드 정규화의 방법을 지정합니다. 매개변수로는 NFC,NFD,NFKC,NFKD중 하나를 전달 할 수 있습니다. 

 

  • NFC : 조합형으로 문자를 정규화합니다.
  • NFD : 분해형으로 문자를 정규화합니다.
  • NFKC : 조합성을 기준으로 문자를 정규화합니다.
  • NFKD :  분해성을 기준으로 문자를 정규화합니다.

 

let str = "café";
let normalizedStr = str.normalize("NFD");
console.log(normalizedStr); // "cafe\u0301"

 

매개 변수 안의 문자열을 normalize()를 사용하여 NFD방식으로 정규화합니다. 이렇게 정규화된 문자열은 cafe와  ´의 결합으로 이루어진 문자열인 cafe\u0301입니다.

 

padEnd()

padEnd()메서드는 문자열의 끝 부분에 지정된 길이만큼 다른 문자열을 채워 넣습니다. 이 메서드는 대개 문자열을 특정 길이에 맞추기 위해 사용됩니다. padEnd()메서드는 두 개의 매개변수를 받으며 첫 번째 매개변수는 문자열의 최종 길이이며, 두 번째 매개변수는 채워 넣을 문자열입니다. 만약 두 번째 매개변수를 생략하면, 공백 문자열이 기본값으로 사용됩니다.

 

let str = "hello";
let paddedStr = str.padEnd(10, "!");
console.log(paddedStr); // "hello!!!!!"

 

padEnd()메서드를 사용하여 총 길이가 10이 되도록 늘립니다. 이때, 끝 부분에는 !문자열이 사용됩니다. 따라서 겨로가적으로 hello뒤에 !문자열이 5개 추가되어 hello!!!! 느낌표가 5개 추가됩니다.

 

padStart()

padStart() 메서드는 문자열의 앞 부분에 지정된 길이만큼 다른 문자열을 채워 넣습니다. 이 메서드는 대개 문자열을 특정 길이에 맞추기 위해 사용됩니다. padStart() 메서드는 두개의 매개변수를 받으며 첫 번째 매개변수는 문자열의 최종 길이이며, 두 번째 매개변수는 채워 넣을 문자열입니다. 만약 두 번째 매개변수를 생략하면, 공백 문자열이 기본값으로 사용됩니다.

 

let str = "hello";
let paddedStr = str.padStart(10, "!");
console.log(paddedStr); // "!!!!!hello"

 

위의 예시에서 문자열 hello를 메서드를 사용하여 총 길이가 10이 되도록 늘립니다. 이때, 앞 부분에는 ! 문자열이 사용됩니다. 따라서 결과 적으로 ! 문자열이 5개 추가된 뒤에 hello가 출력됩니다.

 

repeat()

repeat() 메서드는 문자열을 주어진 횟수만큼 반복해서 새로운 문자열 생성합니다. 이 메서드는 반복을 통해 문자열을 만드는 데 유용합니다. repeat() 메서드는 하나의 매개변수를 받습니다. 이 매개변수는 문자열을 반복하는 횟수를 나타냅니다. 이 매개변수가 0 이하의 값이라며, 빈 문자열이 반환됩니다.

 

let str = "hello";
let repeatedStr = str.repeat(3);
console.log(repeatedStr); // "hellohellohello"

 

repeat()메서드를 사용하여 세 번 반복합니다. 따라서 결과적으로 hello문자열이 세 번 반복되어 hellohellohello가 출력됩니다.