🍭🦩💚

01. at()

at()
  • 문자열에서 특정 인덱스에 위치한 문자를 반환하는 메서드입니다.
  • 이 메서드는 문자열의 유니코드 코드 포인트를 기준으로 작동하며, 문자열에서 유효한 인덱스 범위를 벗어난 경우 undefined를 반환합니다.
  • charCodeAt() 메서드와 유사하지만, UTF-16이 아닌 전체 유니코드를 지원합니다.
const str = '👨‍👩‍👦';

console.log(str.at(0)); // "👨‍👩‍👦" 중 첫 번째 문자 > 이모지와 조합 문자열에서 첫 번째 문자인 "👨 : MAN (U+1F468)"를 반환
console.log(str.at(1)); // "👨‍👩‍👦" 중 두 번째 문자 > 이모지와 조합 문자열에서 두 번째 문자 "‍👩 : WOMAN (U+1F469)"를 반환
console.log(str.at(2)); // "👨‍👩‍👦" 중 세 번째 문자 > 이모지와 조합 문자열에서 세 번째 문자 "‍👦 : BOY (U+1F466)"를 반환

02. charAt()

charAt()
  • 문자열에서 특정 인덱스에 위치한 문자를 반환하는 메서드입니다.
  • 이 메서드는 at()와 유사하지만, at()은 코드 포인트를 기준으로 작동하는 반면, charAt()은 유니코드 코드 단위를 기준으로 작동합니다.
  • 따라서 일부 유니코드 문자는 여러 코드 단위로 인코딩되므로, charAt()는 이러한 문자를 처리하는 데 있어서 일부 문제가 있을 수 있습니다.
const str = "hello world";

console.log(str.charAt(0)); // "h" > 문자열 "hello world"에서 첫 번째 문자인 "h"를 반환
console.log(str.charAt(1)); // "e" >  두 번째 문자 "e"를 반환
console.log(str.charAt(6)); // " " > 7번째 문자인 공백(space)을 반환

03. charCodeAt()

charCodeAt()
  • 문자열에서 특정 인덱스에 위치한 문자의 유니코드 코드 포인트 값을 반환하는 메서드입니다.
  • 이 메서드는 charAt()와 유사하지만, charAt()이 문자 자체를 반환하는 반면, charCodeAt()은 해당 문자의 코드 포인트 값을 반환합니다.
  • 이 메서드는 문자열에서 특정 위치의 문자를 비교하는 등의 작업에 유용하게 사용됩니다.
  • 주어진 문자열에서 특정 인덱스 위치에 있는 문자의 UTF-16 코드 유닛 값을 반환합니다.
const str = "hello world";

console.log(str.charCodeAt(0)); // 104 > 문자열 "hello world"에서 첫 번째 문자인 "h"의 UTF-16 코드 유닛 값을 반환
console.log(str.charCodeAt(1)); // 101 > 두 번째 문자 "e"의 UTF-16 코드 유닛 값을 반환
console.log(str.charCodeAt(6)); // 32 > 7번째 문자인 공백(space)의 UTF-16 코드 유닛 값을 반환

04. charPointAt()

charPointAt()
  • 문자열에서 주어진 인덱스에 대한 코드 포인트를 나타내는 10진수 값을 반환하는 메서드입니다.
  • 이 메서드는 at() 메서드와 유사하지만, 문자열에서 주어진 위치의 코드 포인트가 두 개 이상의 16 비트 코드 단위로 인코딩 된 경우, 이 메서드는 올바른 코드 포인트 값을 반환합니다.
  • 대소문자를 구별합니다.
const str = '😀👍';

charAt(0) // 😀 > 문자의 첫 번째 코드 단위만 반환
charCodeAt(0) // 55357 (😀의 UTF-16 코드 유닛 중 첫 번째 유닛)
str.at(0) // 😀 주어진 문자열에서 0번째 위치의 유니코드 코드 포인트를 나타내는 문자열을 반환
str.charCodeAt(0) // 55357 (😀의 UTF-16 코드 유닛 중 첫 번째 유닛)

05. concat()

concat()
  • 문자열과 문자열 또는 문자열과 다른 데이터 유형을 결합하여 새로운 문자열을 만드는 메서드입니다.
  • 기존 문자열을 변경하지 않고, 새로운 문자열을 반환합니다.
  • 문자열을 결합하는 데 유용합니다.
const str1 = 'Hello';
const str2 = 'World'; 

str1.concat(str2) // HelloWorld
str1.concat(' ', str2, '!') // Hello World!

06. includes()

"문자열".includes(검색값, [위치값])
  • 문자열 포함 여부를 검색하여, 주어진 값과 일치하는 불린(true, false)을 반환합니다.
  • 문자열 포함 여부를 검색하여, 주어진 값과 일치하는 것이 없으면 false을 반환합니다.
  • 대소문자를 구별합니다.
"javascript reference".includes("javascript"); //true
"javascript reference".includes("j"); //true
"javascript reference".includes("J"); //false
"javascript reference".includes("a"); //true
"javascript reference".includes("reference"); //true
"javascript reference".includes("reference", 11); //true
"javascript reference".includes("reference", 12); //false

07. indexOf()

"문자열".indexOf(검색값, [위치값])
  • 문자열을 검색하여, 주어진 값과 일치하는 첫 번째 위치값(index)을 반환합니다.
  • 문자열을 검색하여, 주어진 값과 일치하는 것이 없으면 -1을 반환합니다.
  • 대소문자를 구별합니다.
"javascript refercence".indexOf("javascript"); //0
"javascript refercence".indexOf("javascripts"); //-1 중요!
"javascript refercence".indexOf("j"); //0
"javascript refercence".indexOf("J"); //1 대소문자 구별
"javascript refercence".indexOf("ja"); //0
"javascript refercence".indexOf("jv"); //-1
"javascript refercence".indexOf("refercence"); //11 빈 칸도 자릿수에 포함
"javascript refercence".indexOf("r"); //6
"javascript refercence".indexOf("re"); //11
"javascript refercence".indexOf("javascript", 0); //', 숫자'는 javascript를 0부터 찾으라는 위치값을 나타냄
"javascript refercence".indexOf("javascript", 1); //-1
"javascript refercence".indexOf("refercence", 0); //11
"javascript refercence".indexOf("refercence", 11); //11
"javascript refercence".indexOf("refercence", 12); //-1
"javascript refercence".indexOf("r", 7); //11
"javascript refercence".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

09. localeCompare()

localeCompare()
  • 두 개의 문자열을 비교하여 정렬 순서를 결정하는 메서드입니다.
  • 로케일별로 문자열을 비교할 수 있으므로, 다국어 지원 웹 사이트나 애플리케이션에서 문자열을 정렬하는 데 유용하게 사용됩니다.
  • 로케일별로 문자열을 비교하여 정렬 순서를 결정하며, 두 문자열이 동일한 경우 0을, 첫 번째 문자열이 두 번째 문자열보다 작은 경우 음수를, 첫 번째 문자열이 두 번째 문자열보다 큰 경우 양수를 반환합니다.
const str1 = 'apple';
const str2 = 'banana'; 

str1.localeCompare(str2) // 음수 값을 반환 > 즉, 'apple'이 'banana'보다 먼저 나와야 하는 정렬 순서를 나타냄

10. match()

"문자열".match(검색값)
"문자열".match(정규식표현)
  • 문자열(정규식)을 검색하고, 문자열(배열)을 반환합니다.
  • 문자열을 검색하여, 주어진 값과 일치하는 것이 없으면 null을 반환합니다.
  • 대소문자를 구별합니다.
  • match() 메서드는 문자값(배열)을 반환하고, search() 메서드는 위치값(숫자)을 반환합니다.
"javascript reference".match("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(/Reference/); //null
"javascript reference".match(/Reference/i); //reference
"javascript reference".match(/r/); //r
"javascript reference".match(/r/g); //rrr r 모두 반환
"javascript reference".match(/w/g); //null
"javascript reference".match(/R/ig); //rrr r 모두 반환

12. normalize()

normalize()
  • 문자열의 유니코드 정규화를 수행하는 메서드입니다.
  • 문자열을 NFC, NFD, NFKC, NFKD 중 하나로 정규화할 수 있습니다.
  • 유니코드 정규화는 문자열에 포함된 문자의 유니코드 표현 방식을 표준화하는 프로세스입니다.
  • 같은 문자를 여러 가지 방법으로 표현하는 경우, 이를 표준화하여 문자열을 비교하거나 검색할 때 일관성을 유지할 수 있습니다.
  • normalize() 메서드는 인자로 받는 문자열을 정규화한 새로운 문자열을 반환합니다
const str = 'caf\u00e9';

str.normalize('NFD') // cafe\u0301 > 문자 "é"를 기본 문자 "e"와 "´"를 조합한 문자열로 표현한 결과

13. padEnd()

padEnd()
  • 문자열 끝에 지정된 길이만큼 다른 문자열을 삽입하여 새로운 문자열을 생성하는 메서드입니다.
  • 기존 문자열의 길이를 확인하고, 지정된 길이보다 짧은 경우 다른 문자열을 삽입하여 길이를 늘립니다.
  • 삽입할 문자열은 첫 번째 인자로 전달되며, 두 번째 인자로 전달된 길이를 기준으로 문자열이 잘릴 수 있습니다.
const str = 'Hello';

str.padEnd(10, '!') // Hello!!!! > 원래 문자열 'Hello' 뒤에 '!' 문자를 추가하여 총 10자리로 만든 결과
str.padEnd(3, '!') // Hello > 기존 문자열의 길이가 3보다 크기 때문에 문자열이 잘리지 않았기 때문

14. padStart()

padStart()
  • 문자열 앞에 지정된 길이만큼 다른 문자열을 삽입하여 새로운 문자열을 생성하는 메서드입니다.
  • 기존 문자열의 길이를 확인하고, 지정된 길이보다 짧은 경우 다른 문자열을 삽입하여 길이를 늘립니다.
  • 삽입할 문자열은 첫 번째 인자로 전달되며, 두 번째 인자로 전달된 길이를 기준으로 문자열이 잘릴 수 있습니다.
const str = 'Hello';

str.padStart(10, '!') // !!!!Hello > 원래 문자열 'Hello' 앞에 '!' 문자를 추가하여 총 10자리로 만든 결과
str.padStart(3, '!') // Hello > 문자열의 길이가 3보다 크기 때문에 문자열이 잘리지 않았기 때문

15. repeat()

repeat()
  • 문자열을 지정된 횟수만큼 반복하여 새로운 문자열을 생성하는 메서드입니다.
  • 숫자 타입의 인자를 하나 받으며, 이 인자는 반복할 횟수를 나타냅니다.
  • 이때, 인자로 전달된 값은 0 이상의 정수이어야 합니다.
  • 만약 0 이하의 값이 전달되면 빈 문자열을 반환합니다.
const str = 'Hello';

str.repeat(3) // HelloHelloHello
str.repeat(0) // '' (빈 문자열)

18. search()

"문자열".search(검색값)
"문자열".search(정규식표현)
  • 문자열을 검색하여, 주어진 값과 일치하는 첫 번째 위치값(숫자)을 반환합니다.
  • 문자열을 검색하여, 주어진 값과 일치하는 것이 없으면 -1을 반환합니다.
  • 대소문자를 구별합니다.
"javascript reference".serch("javascript"); //0
"javascript reference".serch("reference"); //11
"javascript reference".serch("r"); //6
"javascript reference".serch("a"); //1
"javascript reference".serch("jv"); //-1
"javascript reference".serch("J"); //-1
"javascript reference".serch(/reference/); //11 정규식 표현
"javascript reference".serch(/Reference/); //-1
"javascript reference".serch(/Reference/i); //11 정규식 표현에서 i는 대문자를 소문자로 바꿔줌
"javascript reference".serch(/[a-z]/); //a부터 z까지 알파벳 전체 확인 //0

19. slice()

"문자열".slice(시작 위치, [끝나는 위치])
  • 시작 위치에서 종료 위치 값을 추출하여, 새로운 문자열을 반환합니다.
['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t'].slice(0); //['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t']
['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t'].slice(1); //['a', 'v', 'a', 's', 'c', 'r', 'i','p','t']
['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t'].slice(2); //['v', 'a', 's', 'c', 'r', 'i','p','t']
['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t'].slice(0, 1); //['j']
['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t'].slice(1, 2); //['a']
['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t'].slice(0, 2); //['j', 'a']
['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t'].slice(0, 3); //['j', 'a', 'v']
['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t'].slice(5, 10); //['c', 'r', 'i', 'p', 't']
['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t'].slice(5, -1); //['c', 'r', 'i', 'p']
['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t'].slice(5, -2); //['c', 'r', 'i']
['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t'].slice(-1); //['t']
['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t'].slice(-2); //['p','t']
['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t'].slice(-3); //['i, 'p','t']
['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t'].slice(-3, -1); //['i', 'p']
['j', 'a', 'v', 'a', 's', 'c', 'r', 'i','p','t'].slice(-3, -2); //['i']
"javascript".slice(0); //javascript
"javascript".slice(1); //avascript
"javascript".slice(2); //vascript
"javascript".slice(0, 1); //j
"javascript".slice(1, 2); //a
"javascript".slice(0, 2); //ja
"javascript".slice(0, 3); //jav
"javascript".slice(5, 10); //cript
"javascript".slice(5, -1); //crip
"javascript".slice(5, -2); //cri

22. split()

"문자열".split(구분자, [제한])
  • 문자열을 구분자로 구분하고, 여러 개의 문자열(배열)을 반환합니다.
"javascript".split(""); //['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']
"java script".split(""); //['java', 'script']
"java scr ipt".split(""); //['java', 'scr', 'ipt']
"javascript".split("", 1); //['j']
"javascript".split("", 2); //['j', 'a']
"javascript".split("", 3); //['j', 'a', 'v']
"java script".split(" ", 1); //['java']
"java script".split(" ", 2); //['java', 'script']
"javascript".split("j"); //['', 'avascript']
"javascript".split("a"); //['j', 'v', 'script']
"javascript".split("e"); //['javascript']
"java/scr/ipt".split("/"); //['java', 'scr', 'ipt']
"java&scr!ipt".split("&"); //['java', 'scr!ipt']
"java&scr!ipt".split("!"); //['java&scr', 'ipt']
"java&scr!ipt".split(/&|\!/); //['java', 'scr', 'ipt'] 정규식 표현
"javascript".split("").join(); // j, a, v, a, s, c, r, i, p, t
"javascript".split("").join("*"); // j*a*v*a*s*c*r*i*p*t
"javascript".split("").reverse().join("*"); // t*p*i*r*c*s*a*v*a*j
"javascript".split("").reverse().join("/"); // t/p/i/r/c/s/a/v/a/j

30. trim()

"문자열".trim()
  • 문자열의 앞/뒤 공백을 제거하고, 새로운 문자열을 반환합니다.
"javascript".trim(""); //'javascript'
"javascript ".trim(""); //'javascript '
" javascript ".trim(""); //' javascript '
" java script ".trim(""); //' java script '

31. trimEnd()

"문자열".trimEnd()
  • 문자열의 뒤 공백을 제거하고, 새로운 문자열을 반환합니다.
"javascript".trimEnd(""); //'javascript'
"javascript ".trimEnd(""); //'javascript '
" javascript ".trimEnd(""); //' javascript '
" java script ".trimEnd(""); //' java script '

32. trimStart()

"문자열".trimStart()
  • 문자열의 앞 공백을 제거하고, 새로운 문자열을 반환합니다.
"javascript".trimStart(""); //'javascript'
"javascript ".trimStart(""); //'javascript '
" javascript ".trimStart(""); //' javascript '
" java script ".trimStart(""); //' java script '