자바스크립트 문자열 객체 정리

안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 문자열 객체 정리를 해보도록 하겠습니다.

at(), charAt(), charCodeAt(), charPointAt(), concat(), localeCompare(), normalize(), padEnd(), padStart(), repeat() 메서드에 대해 정리해 보도록 하겠습니다 ~

 

at() 메서드

at() 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다.

at() 메서드는 charAt() 메서드와 유사하지만, charAt() 메서드와 달리 유니코드 문자열에서 작동합니다. 또한 at() 메서드는 인덱스가 문자열 길이를 벗어나는 경우 undefined를 반환합니다.

 

기본 예제

const str = 'Hello World';
console.log(str.at(0));  // "H"
console.log(str.at(6));  // "W"
console.log(str.at(11)); // d
console.log(str.at(20)); // undefined

위 예제에서 문자열 str에서 각각 인덱스 0, 6, 11의 문자를 반환합니다. 마지막으로 인덱스 20은 문자열 길이를 벗어나므로 undefined를 반환합니다.

 

charAt()

charAt() 메서드는 지정한 숫자 (index)를 받아, 문자열에서 해당 되는 인덱스의 단일문자를 반환합니다.

문자열에서 인자로 넘긴 index에 해당하는 문자형 데이터를 반환해주는 함수입니다.

<script>
    var Sample = "Hello";
    var result = Sample.charAt(1);

    document.write(result);
</script>

sample 변수에 문자열 데이터 "HELLO"를 초기화합니다.

sample.charAt(1) 함수를 호출하고 그 결과를 result 변수에 담아둡니다.

문자열 데이터의 index는 1부터 시작하며 "HELLO" 문자열에선 두 번째 문자형 데이터인 e를 반환합니다.

 

charCodeAt()

charCodeAt() 메서드는 지정한 숫자(index)를 받아 문자열에서 해당되는 인덱스의 유니코드 정수 값을 반환합니다.

const str = "youna";

// index를 적지 않는다면? -> 맨 앞의 문자의 아스키코드를 리턴한다.

console.log(str.charCodeAt(0)) //121
console.log(str.charCodeAt(1)) //111
console.log(str.charCodeAt(2)) //117
console.log(str.charCodeAt(7)) //nan
console.log(str.charCodeAt(99)) //nan
str.charCodeAt();

charCodeAt()은 전달받은 인덱스에 위치한 문자의 UTF-16 코드를 반환합니다.. (0 ~ 65535)

주어진 인덱스에 대한 UTF-16 코드를 나타내는 0 부터 65535 사이의 정수를 반환합니다 

범위 밖으로 넘어갔을 경우 NaN (charAt의 경우 " " 빈 문자열 반환) 

 

charPointAt() 

charPointAt() 메서드는 지정한 숫자(index)를 받아 문자열에서 해당 되는 인덱스의 유니코드 포인트 정수 값을 반환합니다.

string.charPointAt(index(필수))

📌  codePointAt() 메소드는 사파리, 익스플로러에서 지원하지 않습니다.

유니코드는 모든 시스템에서 일관되게 문자를 표현하기 위한 산업표준입니다.

charPointAt()은 인덱스에 위치한 문자의 UTF-16 코드를 반환합니다. (0 ~ 65535)

 

concat()

concat() 메서드는 매개변수로 전달 된 문자열을 받아 결합된 새로운 문자열을 반환합니다.

string.concat(str1(필수), str2.....strN(옵션)).

str1과 strN을 합친 값을 리턴한다. 문자열들 값은 변경되지 않습니다.

concatenation(접합)의 줄임말입니다.

 

기본 예제

const result = 'Hello'.concat(' ', 'world', '!');
console.log(result); // Hello world!

s1="생활"
s2="코딩"
s3="-"
s4="자바스크립트로 배우는 프로그래밍"
s5=s1.concat(s2,s3,s4) //생활코딩-자바스크립트로 배우는 프로그래밍

파라미터로 문자열 이외의 다른 타입도 넣을 수 있습니다.

''.concat(null); // null
''.concat(1, 2); // 12
''.concat(true, false); // truefalse
''.concat({ name : 'apple'}); // [object Object]
''.concat([1, 2]); // 1,2

 

localeCompare()

localeCompare() 메서드는 문자열과 문자열을 비교하여 수치(음수,양수,0)을 반환합니다.

 

두 문자열을 비교하여 문자열 정렬 순서를 기준으로 비교합니다.

이 메서드는 비교 대상 문자열을 유니코드 순서로 비교하는 것이 아니라, 지역화된 문자열 정렬 순서를 기준으로 비교합니다.

localeCompare() 메서드는 두 개의 인수를 사용합니다.

첫 번째 인수는 비교 대상 문자열이고, 두 번째 인수는 선택적으로 비교 기준을 설정하는 로케일(locale) 문자열입니다.

localeCompare() 메서드의 반환 값은 세 가지 중 하나입니다.

비교 대상 문자열이 기준 문자열보다 작으면 음수를 반환합니다.

비교 대상 문자열이 기준 문자열과 같으면 0을 반환합니다.

비교 대상 문자열이 기준 문자열보다 크면 양수를 반환합니다.

const str1 = "apple";
const str2 = "banana";
console.log(str1.localeCompare(str2)); // -1 (apple is less than banana)
console.log(str2.localeCompare(str1)); // 1 (banana is greater than apple)
console.log(str1.localeCompare(str1)); // 0 (apple is equal to apple)

문자열을 사용하는 방법

const str1 = "돈가스";
const str2 = "라면";
console.log(str1.localeCompare(str2, "ko-KR")); // -1 (돈가스 is less than 라면)
console.log(str2.localeCompare(str1, "ko-KR")); // 1 (라면 is greater than 돈가스)
console.log(str1.localeCompare(str1, "ko-KR")); // 0 (돈가스 is equal to 돈가스)

 

normalize()

normalize() 메서드는 주어진 문자열을 정규화된 형태로 반환합니다.

유니코드 문자열을 정규화합니다. 이 메서드는 문자열 내부의 유니코드 코드 포인트를 표준화된 형식으로 변환하여 문자열을 안정적인 형식으로 만듭니다. normalize() 메서드는 인수로 정규화 형식(normalization form)을 받으며, 기본값은 "NFC"입니다.

const str = "c\u0301afe";
console.log(str); // "ćafe"
console.log(str.normalize()); // "café"

위의 예제에서 문자열 str은 "ćafe"입니다.

normalize() 메서드를 사용하여 이 문자열을 "NFC" 형식으로 정규화하면 "café"가 반환됩니다.

 

padEnd() 

padEnd() 메서드는 주어진 길이에 맞게 뒤 문자열을 채우고 새로운 문자열을 반환합니다.

현재 문자열의 끝에 지정된 길이만큼 다른 문자열을 추가하여 문자열의 전체 길이를 지정합니다. 추가될 문자열은 기본값으로 공백입니다.

기본 예제

const str = "Hello";
console.log(str.padEnd(10)); // "Hello     "
console.log(str.padEnd(10, "!")); // "Hello!!!!"

문자열 str은 "Hello"입니다. padEnd() 메서드를 사용하여 이 문자열을 전체 길이가 10이 되도록 채우면, 문자열 끝에 공백이 추가됩니다. 두 번째 예제에서는 padEnd() 메서드를 사용하여 ! 문자를 추가하여 문자열을 채웁니다.

 

padStart() 

padStart() 메서드는 주어진 길이에 맞게 앞 문자열을 채우고 새로운 문자열을 반환합니다.

현재 문자열의 시작 부분에 지정된 길이만큼 다른 문자열을 추가하여 문자열의 전체 길이를 지정합니다. 추가될 문자열은 기본값으로 공백입니다.

 

기본 예제

const str = "Hello";
console.log(str.padStart(10)); // "     Hello"
console.log(str.padStart(10, "!")); // "!!!!Hello"

문자열 str은 "Hello"입니다. padStart() 메서드를 사용하여 이 문자열을 전체 길이가 10이 되도록 채우면, 문자열 앞에 공백이 추가됩니다. 두 번째 예제에서는 padStart() 메서드를 사용하여 ! 문자를 추가하여 문자열을 채웁니다.

 

repeat() 

repeat() 메서드는 주어진 횟수만큼 반복 복사하여 새로운 문자열을 반환합니다.

기본 예제

const str = "Hello";
console.log(str.repeat(3)); // "HelloHelloHello"

문자열 str은 "Hello"입니다. repeat() 메서드를 사용하여 이 문자열을 세 번 반복하면 "HelloHelloHello"가 반환됩니다.

 

 

🥰 오늘도 감사합니당