01. at()

"문자열".at(위치값)
  • 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다.
  • 문자열 내의 각 문자를 0부터 시작하는 인덱스로 취급합니다.
  • 문자열에서 위치값에 따라 특정 문자를 가져올 수 있습니다.
  • 위치값이 -인 경우 문자열의 끝에서 1부터 시작합니다.
  • 공백도 문자열로 취급합니다.
{
    "javascript reference".at("0");      //j
    "javascript reference".at("5");      //c
    "javascript reference".at("8");      //p
    "javascript reference".at("11");     //r
    "javascript reference".at("-1");     //e
    "javascript reference".at("-5");     //r
    "javascript reference".at("-11");    //t
}

02. charAt()

"문자열".charAt(위치값)
  • 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다.
  • 문자열에서 특정 위치의 문자를 반환하기 위해 사용됩니다.
  • 만약 해당 인덱스가 문자열의 범위를 벗어난 경우, 빈 문자열("")을 반환합니다.
  • 음수는 불러오지 못합니다.
{
    "javascript reference".charAt("0");      //j
    "javascript reference".charAt("5");      //c
    "javascript reference".charAt("8");      //p
    "javascript reference".charAt("11");     //r
    "javascript reference".charAt("10");     //" "
    "javascript reference".charAt("12");     //e
    "javascript reference".charAt("25");     //빈문자열
}

03. charCodeAt()

"문자열".charCodeAt(위치값)
  • 주어진 문자열에서 지정된 위치에 있는 문자의 유니코드 값을 반환합니다.
  • 유니코드는 16비트(2바이트)에서 32비트(4바이트)의 값을 사용하여 문자를 표현합니다.
  • 문자열의 각 문자를 0부터 시작하는 인덱스로 취급합니다.
  • 만약 문자열에서 존재하지 않는 인덱스를 사용하면 NaN을 반환합니다.
{
    "javascript reference".charCodeAt("0");      //106
    "javascript reference".charCodeAt("5");      //99
    "javascript reference".charCodeAt("8");      //112
    "javascript reference".charCodeAt("11");     //114
    "javascript reference".charCodeAt("-1");     //NaN
    "javascript reference".charCodeAt("10");     //32 공백
}

04. codePointAt()

"문자열".charPointAt(위치값)
  • 주어진 문자열에서 지정된 위치에 있는 문자의 코드 포인트 값을 반환합니다.
  • codePointAt() 메서드는 charCodeAt() 메서드와 달리, 대부분의 유니코드 문자를 올바르게 처리할 수 있도록 설계되었습니다.
  • codePointAt() 메서드는 16비트 문자의 코드 포인트 값만 반환하지만, codePointAt() 메서드는 16비트 이상의 모든 문자의 코드 포인트 값을 반환할 수 있습니다.
  • 만약 문자열에서 존재하지 않는 인덱스나 음수를 사용하면 undefined을 반환합니다.
{
    "javascript reference".codePointAt(0);      //106
    "javascript reference".codePointAt(5);      //99
    "javascript reference".codePointAt(8);      //112
    "javascript reference".codePointAt(11);     //114
    "javascript reference".codePointAt(-1);     //undefined
    "javascript reference".codePointAt(10);     //32
    "javascript reference".codePointAt(30);     //undefined
}

05. concat()

"문자열".concat("문자열")
  • 문자열의 끝에 하나 이상의 문자열을 추가하여 새로운 문자열을 반환합니다.
  • 기존의 문자열을 변경하지 않고, 새로운 문자열을 생성합니다.
  • 인수로 전달된 문자열을 현재 문자열 뒤에 연결하여 새로운 문자열을 반환합니다.
  • 문자열을 연결하기 위해 사용됩니다.
{
    const str1 = "java";
    const str2 = "abcd";
    const result1 = str1.concat(str2);

    console.log(result1);    // javaabcd

    const str3 = "javascript";
    const str4 = "reference";
    const result2 = str3.concat(' ', str4);

    console.log(result2);   // javascript reference
}

06. includes()

"문자열".includes(검색값, [위치값])
  • 문자열 포함 여부를 검색하여, 불린(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           값이 없으면 -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("문자열")
  • 주어진 문자열과 비교 대상 문자열을 대소문자 및 악센트 기호를 기준으로 사전순으로 비교합니다.
  • 비교 대상 문자열과 비교할 문자열을 각각 인수로 받으며, 비교 결과에 따라 -1, 0, 1의 값을 반환합니다.
  • 반환 값이 -1인 경우 비교 대상 문자열이 현재 문자열보다 앞서고, 반환 값이 1인 경우 비교 대상 문자열이 현재 문자열보다 뒤에 위치합니다.
  • 반환 값이 0인 경우 비교 대상 문자열과 현재 문자열이 동일한 문자열입니다.
{
    const str1 = 'apple';
    const str2 = 'banana';
    const str3 = 'count';
    const str4 = 'default';
    console.log(str3.localeCompare(str1)) //1
    console.log(str4.localeCompare(str2)) //1
    console.log(str2.localeCompare(str4)) //-1
    console.log(str2.localeCompare(str2)) //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);         //reference   
    "javascript reference".match(/r/);                  //r  
    "javascript reference".match(/r/g);                 //rrr   
    "javascript reference".match(/w/g);                 //null   
    "javascript reference".match(/R/ig);                //r r r 
}

12. normalize()

"문자열(유니코드 문자열)".normalize("정규화")
  • 유니코드 문자열의 정규화를 수행합니다. 이 메서드는 문자열에서 구성 요소 분해(Canonical Decomposition) 및 구성 요소 재구성(Canonical Composition)을 수행합니다.
  • 유니코드 문자열은 동일한 의미를 가지는 다양한 표현 방법을 가질 수 있습니다. 이 때문에 문자열의 일관성을 유지하기 위해 정규화가 필요합니다.
  • NFC(Canonical Composition) 및 NFD(Canonical Decomposition)를 지정할 수 있습니다. 기본값은 NFC입니다.
  • NFC: 정규형 정준 결합(Normalization Form Canonical Composition)
    NFD : 정규형 정준 분해(Normalization Form Canonical Decomposition)
    NFKC : 정규형 호환성 결합(Normalization Form Compatibility Composition)
    NFKD : 정규현 호환성 분해(Normalization Form Compatibility Decomposition)
  • 만약 생략되거나 undefined일 경우 'NFC'를 사용합니다.
{
    // 문자열
    "hellocode".normalize("NFC");  // hellocode
    "hellocode".normalize("NFD");  // hellocode
    "hellocode".normalize("NFKC");  // hellocode
    "hellocode".normalize("NFKD");  // hellocode

    // 유니코드 문자열
    const str1 = 'café';
    const str2 = 'cafe\u0301';  
    console.log(str1 === str2); // false
    console.log(str1.normalize() === str2.normalize()); // true
}

13. padEnd()

"문자열".padEnd(문자열의 길이, [선택적 매개변수])
  • 주어진 길이보다 짧은 문자열에 대해, 지정된 길이까지 다른 문자열로 채워넣는 데 사용됩니다.
  • 매개변수를 지정하지 않으면 기본값인 공백이 사용됩니다.
{
    "webstorybody".padEnd(5);     // webstorybody
    "webstorybody".padEnd(1);     // webstorybody
    "webstorybody".padEnd(20);     // webstorybody
    "webstorybody".padEnd(20, ';');     // webstorybody;;;;;;;;
    "webstorybody".padEnd(15, '🍖');     // webstorybody🍖🍖🍖🍖
}

14. padStart()

"문자열".padStart(문자열이의 길이, [선택적 매개변수])
  • padStart() 메서드는 padEnd()와 비슷하지만, 주어진 문자열의 시작 부분에 padString 문자열을 추가하여 문자열의 길이를 targetLength로 만듭니다.
  • 매개변수를 지정하지 않으면 기본값인 공백이 사용됩니다.
{
    "webstorybody".padStart(5);     // webstorybody
    "webstorybody".padStart(20);     //        webstorybody
    "webstorybody".padStart(15, '$');     // $$$webstorybody
    "webstorybody".padStart(25, '@');     // @@@@@@@@@@@@@webstorybody
    "webstorybody".padStart(14, '!');     // !!webstorybody
    "webstorybody".padStart(12, 'ref');     // webstorybody 생성될 문자열 길이의 값까지만 변수 생성(선택적 매개변수 입력 후 입력되지 않은 문자는 삭제)

    console.log("문자열".padStart(문자열의 길이, [선택적 매개변수]));
}

15. repeat()

"문자열".repeat(반복할 횟수)
  • 주어진 문자열을 지정된 횟수만큼 반복하여 새로운 문자열을 생성하는 데 사용됩니다.
  • 반드시 정수형 매개변수 count를 하나 받습니다. 이 매개변수는 반복하고자 하는 횟수를 지정합니다.
{
    "play".repeat(3);   // playplayplay
    "document".repeat(4);   // documentdocumentdocumentdocument
    "note".repeat(6);   // notenotenotenotenotenote
    "table".repeat(3);   // tabletabletable
}

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   대문자를 소문자로 구별
    "자바스크립트".search(/[a-z]/);                     //-1
    "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     reverse는 문자열에서만 가능
    "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 ".trimStart("");      //javascript
}

32. trimStart()

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