javascript

javascript 문자열 메서드에 대해 알아봅시다.

IC 2023. 4. 23.

01. at( )

const str = "Hello, World!";
console.log(str.at(0)); // "H"
console.log(str.at(6)); // ","
console.log(str.at(-1)); // "!"

위 예시에서 at() 메서드는 str 문자열에서 지정된 인덱스 위치에 해당하는 문자를 반환합니다.

첫 번째 console.log() 문에서는 인덱스 0에 해당하는 문자인 "H"가 출력됩니다.

두 번째 console.log() 문에서는 인덱스 6에 해당하는 문자인 ","가 출력되며,

마지막 console.log() 문에서는 문자열의 끝에서 첫 번째 문자에 해당하는 인덱스 -1에 해당하는 문자인 "!"가 출력됩니다.

at() 메서드는 문자열에서 유효한 인덱스를 사용하여 문자를 반환하며, 인덱스가 문자열의 범위를 벗어나면 undefined를 반환합니다.


02. charAt( )

const str = "Hello, world!";
console.log(str.charAt(0)); // "H"
console.log(str.charAt(6)); // ","
console.log(str.charAt(12)); // "!"

위 예시에서 charAt() 메서드는 str 문자열에서 지정된 인덱스 위치에 해당하는 문자를 반환합니다.

첫 번째 console.log() 문에서는 인덱스 0에 해당하는 문자인 "H"가 출력됩니다.

두 번째 console.log() 문에서는 인덱스 6에 해당하는 문자인 ","가 출력되며,

마지막 console.log() 문에서는 인덱스 12에 해당하는 문자인 "!"가 출력됩니다.

 

다음은 인덱스가 유효하지 않은 경우 charAt() 메서드가 빈 문자열을 반환하는 예시입니다.

const str = "Hello, world!";
console.log(str.charAt(-1)); // ""
console.log(str.charAt(20)); // ""

위 예시에서는 문자열의 범위를 벗어나는 인덱스를 사용하였으므로 charAt() 메서드는 빈 문자열("")을 반환합니다.


03. charCodeAt( )

const str = "Hello, world!";
console.log(str.charCodeAt(0)); // 72
console.log(str.charCodeAt(6)); // 44
console.log(str.charCodeAt(12)); // 33

위 예시에서 charCodeAt() 메서드는 str 문자열에서 지정된 인덱스 위치에 해당하는 문자의 UTF-16 코드 유닛 값을 반환합니다.

첫 번째 console.log() 문에서는 인덱스 0에 해당하는 문자인 "H"의 UTF-16 코드 유닛 값인 72가 출력됩니다.

두 번째 console.log() 문에서는 인덱스 6에 해당하는 문자인 ","의 UTF-16 코드 유닛 값인 44가 출력되며,

마지막 console.log() 문에서는 인덱스 12에 해당하는 문자인 "!"의 UTF-16 코드 유닛 값인 33이 출력됩니다.

다음은 인덱스가 유효하지 않은 경우 charCodeAt() 메서드가 NaN을 반환하는 예시입니다.

const str = "Hello, world!";
console.log(str.charCodeAt(-1)); // NaN
console.log(str.charCodeAt(20)); // NaN

위 예시에서는 문자열의 범위를 벗어나는 인덱스를 사용하였으므로 charCodeAt() 메서드는 NaN을 반환합니다.


04. charPointAt( )

const str = "Hello, 🌎!";
console.log(str.codePointAt(0)); // 72
console.log(str.codePointAt(7)); // 127757

위 예시에서 charPointAt() 메서드는 str 문자열에서 지정된 인덱스 위치에 해당하는 문자의 유니코드 코드 포인트 값을 반환합니다.

첫 번째 console.log() 문에서는 인덱스 0에 해당하는 문자인 "H"의 유니코드 코드 포인트 값인 72가 출력됩니다.

두 번째 console.log() 문에서는 인덱스 7에 해당하는 문자인 "🌎"의 유니코드 코드 포인트 값인 127757이 출력됩니다.

다음은 surrogate pair(대체 쌍)를 가진 문자열에서 charPointAt() 메서드를 사용하는 예시입니다.

const str = "😃👍🏻";
console.log(str.codePointAt(0)); // 128515
console.log(str.codePointAt(1)); // 128077
console.log(str.codePointAt(2)); // 127995

위 예시에서는 charPointAt() 메서드가 surrogate pair를 가진 문자열에서 각 문자의 코드 포인트 값을 반환합니다.

첫 번째 console.log() 문에서는 첫 번째 surrogate인 "😃"의 코드 포인트 값인 128515가 출력되며,

두 번째 console.log() 문에서는 두 번째 surrogate인 "👍🏻"의 코드 포인트 값인 128077이 출력됩니다.

마지막 console.log() 문에서는 이모지를 구성하는 문자 중 마지막 문자인 "🏻"의 코드 포인트 값인 127995가 출력됩니다.


05. concat( )

const str1 = "Hello";
const str2 = "World";
const str3 = "!";
const newStr = str1.concat(", ", str2, str3);

console.log(str1);    // "Hello"
console.log(str2);    // "World"
console.log(str3);    // "!"
console.log(newStr);  // "Hello, World!"

위 예시에서는 concat() 메서드를 사용하여 세 개의 문자열 str1, str2, str3을 연결하여 새로운 문자열 newStr을 만들었습니다.

concat() 메서드는 호출된 문자열 str1에 ", ", str2, 그리고 str3 문자열을 순차적으로 연결하여 새로운 문자열을 반환합니다. console.log() 문에서는 str1, str2, str3, 그리고 newStr의 값을 출력합니다.

다음은 빈 문자열과 문자열을 연결하는 예시입니다.

const str1 = "";
const str2 = "JavaScript";
const newStr = str1.concat("Hello, ", str2, " World!");

console.log(str1);    // ""
console.log(str2);    // "JavaScript"
console.log(newStr);  // "Hello, JavaScript World!"

위 예시에서는 빈 문자열과 "JavaScript" 문자열을 concat() 메서드를 사용하여 연결하여 새로운 문자열 newStr을 만들었습니다.

console.log() 문에서는 str1, str2, 그리고 newStr의 값을 출력합니다.


06. localeCompare()

다양한 언어와 국가에서 사용되는 문자열을 비교할 때 유용합니다. 예를 들어, "ångström"과 "angstrom"이라는 두 문자열이 있을 때, 이 두 문자열은 영어에서는 동일한 단어로 인식되지만, 스웨덴어에서는 다른 단어로 인식됩니다.

이러한 경우, localeCompare() 메서드를 사용하여 이러한 차이를 고려하여 문자열을 비교할 수 있습니다.

다음은 localeCompare() 메서드를 사용하여 문자열을 비교하는 예시입니다.

const str1 = "ångström";
const str2 = "angstrom";
const result = str1.localeCompare(str2, "sv");

console.log(result); // 1

위 예시에서 str1과 str2는 두 개의 문자열이며, localeCompare() 메서드를 사용하여 이 두 문자열을 비교합니다.

str1과 str2는 서로 다른 문자열이지만, 스웨덴어 로캘을 사용하여 비교하면 str1이 str2보다 더 뒤에 위치한다는 것을 나타내는 1을 반환합니다.

다음은 로캘을 지정하지 않고 localeCompare() 메서드를 사용하여 문자열을 비교하는 예시입니다.

const str1 = "apple";
const str2 = "banana";
const result = str1.localeCompare(str2);

console.log(result); // -1

위 예시에서 str1과 str2는 알파벳순으로 비교하면 apple이 banana보다 앞에 위치한다는 것을 나타내는 -1을 반환합니다.


07. normalize( )

    const str1 = "\u1E9B\u0323";
    const str2 = "ẛ̣";
    
    console.log(str1 === str2); // false
    console.log(str1.length); // 2
    console.log(str2.length); // 2
    
    console.log(str1.normalize() === str2.normalize()); // true
    console.log(str1.normalize().length); // 1
    console.log(str2.normalize().length); // 1

위 예시에서 str1과 str2는 두 개의 문자열이며, 서로 다른 유니코드 문자열입니다. str1과 str2는 서로 다른 문자열이지만, normalize() 메서드를 사용하여 표준화하면 동일한 문자열로 인식됩니다. 이를 통해 문자열의 정규화된 길이를 1로 줄일 수 있습니다.


08. padEnd( )

    const str = "hello";
    const padStr = " world";
    
    console.log(str.padEnd(10)); // "hello     "
    console.log(str.padEnd(10, "-")); // "hello-----"
    console.log(str.padEnd(10, padStr)); // "hello world"

위 예시에서 padEnd() 메서드는 str 문자열의 길이가 10보다 작기 때문에, 문자열 끝에 공백 문자열을 삽입하여 10자리 문자열로 만듭니다.

이때, 두 번째 매개변수로 문자열을 전달할 경우, 전달된 문자열이 삽입됩니다. 마지막으로 padEnd() 메서드의 반환 값은 문자열입니다.


09.padStart( )  

const str = "hello";
const padStr = " world";

console.log(str.padStart(10)); // "     hello"
console.log(str.padStart(10, "-")); // "-----hello"
console.log(str.padStart(10, padStr)); // "hello world"

위 예시에서 padStart() 메서드는 str 문자열의 길이가 10보다 작기 때문에, 문자열 앞쪽에 공백 문자열을 삽입하여 10자리 문자열로 만듭니다.

이때, 두 번째 매개변수로 문자열을 전달할 경우, 전달된 문자열이 삽입됩니다. 마지막으로 padStart() 메서드의 반환 값은 문자열입니다.


10. repeat( )

const str = "hello";

console.log(str.repeat(3)); // "hellohellohello"
console.log(str.repeat(0)); // ""
console.log(str.repeat(2.5)); // ""
console.log(str.repeat(-1)); // RangeError

위 예시에서, repeat() 메서드는 첫 번째 인자로 전달된 숫자만큼 문자열을 반복합니다.

전달된 숫자가 0 이하거나 소수인 경우 빈 문자열을 반환합니다.

음수를 전달하면 RangeError가 발생합니다. repeat() 메서드의 반환 값은 반복된 문자열입니다.

댓글