01. at()

"문자열".at(인덱스)
  • 문자열에서 지정된 인덱스에 해당하는 문자를 반환합니다.
  • 이 메소드는 문자열의 charAt() 메소드와 유사하지만, 인덱스가 문자열의 범위를 벗어날 경우 undefined를 반환합니다. 
{
    "javascript reference".at();         //j
    "javascript reference".at(0);      //j
    "javascript reference".at(3);      //a
    "javascript reference".at(11);     //r
    "javascript reference".at(20);     //undefined

    "javascript reference".at(-1);     //e
    "javascript reference".at(-2);     //c
    "javascript reference".at(-3);     //n
    "javascript reference".at(-100);   //undefined
}

02. charAt()

"문자열".charAt(숫자)
  • 문자열에서 특정 인덱스에 해당하는 문자를 반환합니다.
  • 지정된 인덱스가 범위를 벗어나면, 빈 문자열을 반환합니다.
{
    "javascript reference".charAt();         //j
    "javascript reference".charAt(0);      //j
    "javascript reference".charAt(1);      //a
    "javascript reference".charAt(2);      //v
    "javascript reference".charAt(11);     //r
    "javascript reference".charAt(20);     //빈문자열
}

03. charCodeAt()

"문자열".charCodeAt(숫자)
  • 문자열에서 지정된 위치에 있는 문자의 유니코드 값을 반환합니다.
  • 유니코드는 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 말합니다. 
{
    "javascript reference".charCodeAt();         //106
    "javascript reference".charCodeAt(0);      //106
    "javascript reference".charCodeAt(1);      //97
    "javascript reference".charCodeAt(2);      //118
    "javascript reference".charCodeAt(3);      //97
    "javascript reference".charCodeAt(11);     //114
    "javascript reference".charCodeAt(12);     //101
    "javascript reference".charCodeAt(20);     //NaN
    "javascript reference".charCodeAt(-1);     //NaN
}
자바스크립트에서 유니코드(Unicode)는 전 세계의 문자와 기호를 나타내기 위한 표준 인코딩 시스템입니다. 이는 문자열을 작성하거나 처리할 때 사용됩니다.

유니코드는 16진수 값으로 나타내어지며, 각 문자 및 기호에 대해 고유한 코드 포인트를 제공합니다. 이 코드 포인트는 U+XXXX 형식으로 표시됩니다. 여기서 XXXX는 16진수 값입니다.

자바스크립트에서는 유니코드를 지원하기 위해 '\uXXXX'와 같은 이스케이프 시퀀스를 사용하여 문자열 내에 특수 문자를 나타냅니다. 이를 통해 자바스크립트에서 다양한 언어의 문자를 표현할 수 있습니다.

04. codePointAt()

"문자열".codePointAt(숫자)
  • 문자열에서 지정된 위치에 있는 유니코드 코드 포인트 값을 반환합니다.
  • charCodeAt()는 16비트 유니코드 값을 반환하는 데 반해, codePointAt()는 21비트 유니코드 코드 포인트 값을 반환합니다. 
{
    "javascript reference".codePointAt();         //106
    "javascript reference".codePointAt(0);      //106
    "javascript reference".codePointAt(1);      //97
    "javascript reference".codePointAt(2);      //118
    "javascript reference".codePointAt(3);      //97
    "javascript reference".codePointAt(11);     //114
    "javascript reference".codePointAt(12);     //101
    "javascript reference".codePointAt(20);     //undefined
    "javascript reference".codePointAt(-1);     //undefined
}

05. concat()

"문자열".concat("문자열")
  • 문자열이나 배열을 합쳐서 새로운 문자열 또는 배열을 반환하는 메서드입니다.
  • 문자열의 경우, concat() 메서드는 호출된 문자열에 인수로 전달된 문자열을 덧붙인 새로운 문자열을 반환합니다.
  • 배열의 경우, concat() 메서드는 호출된 배열에 인수로 전달된 배열을 덧붙인 새로운 배열을 반환합니다. 
{
    const str = "javascript";

    str.concat("reference");                //javascriptreference
    str.concat(" ","reference");            //javascript reference
    str.concat("& ","reference");           //javascript& reference
    str.concat("❣️", "reference")           //javascript❣️reference

    const arr = ["javascript", "reference"];

    arr.concat("react")                 // ['javascript', 'reference', 'react']
    arr.concat(" ", "react")            // ['javascript', 'reference', ' ', 'react']
    arr.concat("&", ["react", "jquery"])      // ['javascript', 'reference', '&', 'react', 'jquery']
}

06. includes()

"문자열".indexOf(검색값, [위치값])
  • 문자열 포함 여부를 검색하여, 불린(true, 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 reference".indexOf("javascript");   //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");   // 11
    "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", 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
}

09. localeCompare()

"문자열".localeCompare("문자열")
  • 두 개의 문자열을 비교하고, 첫 번째 문자열이 두 번째 문자열보다 정렬 순서상 앞에 오는 경우 음수를 반환하며, 두 번째 문자열이 첫 번째 문자열보다 앞에 오는 경우 양수를 반환합니다. 
{
    const str1 = "apple";
    const str2 = "banana";
    const str3 = "cat";
    const str4= "diary";
    const str5= "apple";

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

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(/Reference/g); //null
    "javascript reference".match(/r/); //r
    "javascript reference".match(/r/g); //r r r
    "javascript reference".match(/w/g); //null
    "javascript reference".match(/R/ig); //r r r
}

12. normalize()

"문자열(유니코드 문자열)".normalize("정규화 방식")
  • 유니코드 문자열 정규화를 수행합니다.
  • 문자열을 인자로 받아서, 유니코드의 특정 문자들을 같은 문자로 치환하여 문자열을 표준화(normalize)합니다. 
{
    console.log("webstoryboy".normalize("NFC"))     //webstoryboy
    console.log("webstoryboy".normalize("NFD"))     //webstoryboy
    console.log("webstoryboy".normalize("NFKC"))    //webstoryboy
    console.log("webstoryboy".normalize("NFKD"))    //webstoryboy
}
NFC: 정규형 정준 결합(Normalization Form Canonical Composition)
NFD : 정규형 정준 분해(Normalization Form Canonical Decomposition)
NFKC : 정규형 호환성 결합(Normalization Form Compatibility Composition)
NFKD : 정규현 호환성 분해(Normalization Form Compatibility Decomposition)
유니코드 문자열(Unicode string)은 유니코드 문자 집합을 기반으로 구성된 문자열입니다. 유니코드는 전 세계의 모든 문자를 표현하기 위한 국제 표준 문자 코드 규약입니다. 이 규약은 ASCII 문자 집합으로 표현되는 문자 이외에도, 중국어, 한국어, 일본어 등의 문자를 비롯한 수천 가지의 문자를 포함하고 있습니다.

13. padEnd()

"문자열".padEnd(문자열의 길이, [매개변수])
  • 문자열을 지정된 길이만큼 다른 문자열로 채워 넣는 역할을 합니다.
  • 두 개의 매개 변수를 사용합니다. 첫 번째 매개 변수는 원하는 전체 길이이고, 두 번째 매개 변수는 문자열을 채울 다른 문자열입니다.
  • 첫 번째 매개 변수보다 원래 문자열의 길이가 더 작은 경우 두 번째 매개 변수의 문자열이 추가됩니다. 
{
    "javascript reference".padEnd(20);                  //javascript reference
    "javascript reference".padEnd(21, '-');             //javascript reference-
    "javascript reference".padEnd(25, '✨');            //javascript reference✨✨✨✨✨
    "javascript reference".padEnd(30, '@');             //javascript reference@@@@@@@@@@
    "javascript reference".padEnd(26, " react");        //javascript reference react
}

14. padStart()

"문자열".padStart(문자열의 길이, [매개변수])
  • 문자열의 시작 부분에 다른 문자열을 추가하여 지정된 길이에 도달하도록 만듭니다.
  • 첫 번째 매개 변수는 전체 길이이고, 두 번째 매개 변수는 채울 다른 문자열입니다.
  • 첫 번째 매개 변수보다 원래 문자열의 길이가 더 작은 경우, 두 번째 매개 변수의 문자열이 시작 부분에 추가됩니다. 
{
    "javascript reference".padStart(20);                  //javascript reference
    "javascript reference".padStart(21, '-');             //-javascript reference
    "javascript reference".padStart(25, '✨');            //✨✨✨✨✨javascript reference
    "javascript reference".padStart(30, '@');             //@@@@@@@@@@javascript reference
    "javascript reference".padStart(26, " react");        //reactjavascript reference
}

15. repeat()

"문자열".repeat(반복할 횟수)
  • 문자열을 지정된 횟수만큼 반복하여 새로운 문자열을 반환합니다.
  • 매개 변수는 반복 횟수를 나타내는 양의 정수입니다. 0 또는 음수가 매개 변수로 전달되면 빈 문자열을 반환합니다. 
{
    "JAVASCRIPT".repeat(3);     //JAVASCRIPTJAVASCRIPTJAVASCRIPT
    "CSS".repeat(2);            //CSSCSS
    "HTML ".repeat(3);           //HTML HTML HTML 
    "REACT".repeat(2);          //REACTREACT
}

18. search()

"문자열".search(검색값)
"문자열".search(정규식표현)
  • 문자열(정규식)을 검색하고, 위치값(숫자)을 반환합니다.
  • 문자열을 검색하여, 주어진 값과 일치하는 것이 없으면 -1을 반환합니다.
  • 대소문자를 구별합니다.
{
    "javascript reference".search("javascript");//0
    "javascript reference".search("reference");//11
    "javascript reference".search("r");//6
    "javascript reference".search("a");//1
    "javascript reference".search("jv");//-1
    "javascript reference".search("J");//-1
    "javascript reference".search(/reference/);//11(정규식 표현)
    "javascript reference".search(/Reference/);//-1
    "javascript reference".search(/Reference/i);//11(i는 소문자로 인식해줍니다.)
    "javascript reference".search(/[a-z]/g);//0  
}

19. slice()

"문자열".slice(시작위치, [끝나는 위치])
  • 시작 위치에서 종료 위치 값을 추출하여 새로운 문자열을 반환합니다. 
{
    "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
    "javascript".slice(-1);         //t
    "javascript".slice(-2);         //pt
    "javascript".slice(-3);         //ipt
    "javascript".slice(-3, -1);     //ip
    "javascript".slice(-3, -2);     //i
}

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
}

32. trimStart()

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