01. string.prototype.at()

"문자열".at(index)
  • at() 메소드는 인덱스값을 받아, 문자열에서 해당되는 인덱스의 요소를 반환합니다.
{
    console.log("javascript reference".at("0"));    //j
    console.log("javascript reference".at("1"));    //a
    console.log("javascript reference".at("2"));    //v
    console.log("javascript reference".at("11"));   //r
    console.log("javascript reference".at("12"));   //e
    console.log("javascript reference".at("20"));   //undefined
    console.log("javascript reference".at("-1"));   //c
    console.log("javascript reference".at("-2"));   //e
}

02. string.prototype.charAt()

"문자열".charAt(index)
  • String.prototype.charAt() 메소드는 문자열에서 주어진 인덱스에 해당하는 문자를 반환합니다.
{
    const str = 'hello world';
    console.log(str.charAt(0)); // 'h'
    console.log(str.charAt(1)); // 'e'
    console.log(str.charAt(6)); // 'w'
    console.log(str.charAt(11)); // 'd'
    console.log(str.charAt(12)); // '' (빈 문자열)
}

03. string.prototype.charCodeAt()

"문자열".charCodeAt(index)
  • UTF-16 코드 유닉스란 유니코드 문자 집합에서 문자에 할당된 고유한 식별자입니다.
  • charCodeAt() 메소드는 문자열에서 특정 인덱스에 위치한 문자의 UTF-16 코드 유닉스 값을 반환합니다.
{
    const str = 'Hello';
    const code = str.charCodeAt(0); // 'H' 문자의 UTF-16 코드 유닉스 값인 72가 반환됩니다.
    console.log(code); // 72
}

04. string.prototype.codePointAt()

"문자열".codePointAt(index)
  • String.prototype.codePointAt() 메소드는 문자열에서 지정된 인덱스에 위치한 유니코드 코드 포인트를 반환합니다.
{
    const str = 'hello world';
    console.log(str.codePointAt(0)); // 104
    console.log(str.codePointAt(6)); // 119
}

05. string.prototype.concat()

"문자열".concat("문자열")
const newString = str.concat(string1, string2, ..., stringN);
  • 위 형식에서 str은 합칠 대상이 되는 문자열을 의미합니다. string1, string2, ..., stringN은 더할 문자열들을 의미합니다.
  • concat() 메소드는 문자열을 합쳐 새로운 문자열을 반환하는 JavaScript의 문자열 메소드입니다. 이 메소드는 인자로 전달된 문자열을 호출한 문자열 뒤에 붙이는 역할을 합니다.
{
    const str1 = 'Hello';
    const str2 = 'World';
    const str3 = '!';
    const newString = str1.concat(' ', str2, str3);
    
    console.log(newString); // 'Hello World!'
}

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".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
}

09. string.prototype.localeCompare()

localeCompare() 메소드는 다음과 같은 형식으로 사용됩니다.
string.localeCompare(compareString[, locales[, options]])
  • 위 형식에서 string은 비교하고자 하는 문자열을, compareString은 비교 대상이 되는 문자열을 의미합니다. locales와 options은 선택적 매개변수로, 로케일 정보와 비교 옵션을 지정할 때 사용됩니다.
  • localeCompare() 메소드는 두 문자열을 비교하여 대소관계를 반환하는 JavaScript의 문자열 메소드입니다. 이 메소드는 현재 로케일에 따라 문자열을 비교하므로, 문자열이 다른 언어(예: 한글, 일본어, 중국어 등)로 작성되어 있을 경우에도 적절한 비교 결과를 반환할 수 있습니다.

    • localeCompare() 메소드는 다음과 같은 결과를 반환합니다.
  • 0: string과 compareString이 동일한 문자열인 경우
  • -1: string이 compareString보다 사전순으로 앞에 위치한 경우
  • 1: string이 compareString보다 사전순으로 뒤에 위치한 경우
{
    const str1 = 'apple';
    const str2 = 'banana';
    const result = str1.localeCompare(str2);

    console.log(result); // -1
}

10. string.prototype.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 
}

11. string.prototype.matchAll()

"문자열".includes(검색값, [위치값])
  • string.prototype.matchAll() 메소드는 정규식과 매치된 문자열 전체에 대한 모든 일치 결과를 포함하는 이터레이터(iterator) 객체를 반환합니다.
{
    const regex = /t(e)(st(\d?))/g;
    const str = 'test1test2';
    const array = [...str.matchAll(regex)];
    
    console.log(array[0]); // ["test1", "e", "st1", "1", index: 0, input: "test1test2", groups: undefined]
    console.log(array[1]); // ["test2", "e", "st2", "2", index: 5, input: "test1test2", groups: undefined]    
}
  • 위 예시에서는 matchAll 메소드를 사용해 정규표현식 /t(e)(st(\d?))/g를 문자열 'test1test2'에 대해 실행한 결과를 array 변수에 할당하였습니다.
  • array 변수는 이후 console.log(array[0])과 console.log(array[1])의 두 번 출력됩니다. 각각의 console.log에서는 array 배열의 첫 번째와 두 번째 요소인 배열의 값과 함께, 해당 요소의 인덱스와 입력값 등 다른 정보들이 함께 출력됩니다.

12. string.prototype.normalize()

"문자열".normalize([form])
  • 이 메소드는 Unicode Normalization Forms 중 하나를 사용하여 문자열을 정규화(normalize)합니다. 이 메소드는 문자열에서 발견된 유니코드 문자열 조합을 정규화하여 문자열을 비교하거나 검색할 때 도움이 됩니다.
  • form은 선택적 매개변수로, 정규화 방식을 지정합니다. form은 'NFC', 'NFD', 'NFKC', 'NFKD' 중 하나를 선택할 수 있으며, 기본값은 'NFC'입니다.
  • 아래 코드에서 normalize() 메소드는 str1과 str2 문자열을 정규화하여 새로운 문자열을 만듭니다. str1은 "cafe\u0301"로, str2는 "café"로 정의되어 있습니다. normalize() 메소드를 각각 적용하여 이 두 문자열을 정규화하면 결과적으로 "cafécafé"가 되는 것을 확인할 수 있습니다.
{
    const str1 = 'cafe\u0301'; // "caf\u00e9"
    const str2 = 'café'; 
    const str3 = str1.normalize() + str2.normalize();
    
    console.log(str3); // "cafécafé"
}

13. string.prototype.padEnd()

"문자열".padEnd(targetLength [, padString])
  • padEnd() 메소드는 문자열의 끝에 다른 문자열을 추가하여 주어진 길이에 도달하도록 만드는 메소드입니다. 만약 기존 문자열의 길이가 주어진 길이보다 작다면, 추가로 주어진 문자열을 반복하여 끝에 붙입니다.
  • targetLength: 필수 인자입니다. 문자열이 가져야 하는 최종 길이를 지정합니다. 만약 이 값이 기존 문자열의 길이보다 작다면, 문자열이 변경되지 않습니다.
  • padString: 선택적 인자입니다. 문자열의 끝에 추가될 다른 문자열을 지정합니다. 이 값이 지정되지 않으면, 기본값인 공백이 사용됩니다.
{
    const str1 = 'Hello';
    const str2 = str1.padEnd(11, ' World');

    console.log(str2); // "Hello World"    
}

14. string.prototype.padStart()

"문자열".padStart(targetLength [, padString])
  • padStart() 메소드는 문자열의 시작 부분에 다른 문자열을 추가하여 주어진 길이에 도달하도록 만드는 메소드입니다. 만약 기존 문자열의 길이가 주어진 길이보다 작다면, 추가로 주어진 문자열을 반복하여 시작 부분에 붙입니다.
  • targetLength: 필수 인자입니다. 문자열이 가져야 하는 최종 길이를 지정합니다. 만약 이 값이 기존 문자열의 길이보다 작다면, 문자열이 변경되지 않습니다.
  • padString: 선택적 인자입니다. 문자열의 시작 부분에 추가될 다른 문자열을 지정합니다. 이 값이 지정되지 않으면, 기본값인 공백이 사용됩니다.
{
    const str = 'World';
    const paddedStr = str.padStart(12, 'Hello, ');

    console.log(paddedStr); // "Hello, World"    
}

15. string.prototype.repeat()

"문자열".includes(검색값, [위치값])
  • repeat() 메소드는 주어진 문자열을 반복하여 새로운 문자열을 만듭니다.
  • count: 필수 인자입니다. 문자열이 반복되어야 하는 횟수를 지정합니다. 이 값은 0 이상이어야 합니다.
  • 아래 코드에서 str은 "Hello "로 정의되어 있습니다. repeat() 메소드를 사용하여 str을 3번 반복하여 repeatedStr 변수에 저장했습니다. repeatedStr의 결과값은 "Hello Hello Hello "가 됩니다.
{
    const str = 'Hello ';
    const repeatedStr = str.repeat(3);
    
    console.log(repeatedStr); // "Hello Hello Hello "    
}

16.

17.

18. search()

"문자열".search(검색값)
"문자열".search(정규식표현)
  • 문자열(정규식)을 검색하고, 위치값(숫자)을 반환합니다.
  • 문자열을 검색하여, 주어진 값과 일치하는 것이 없으면 -1을 반환합니다.
  • 대소문자를 구별합니다.
{
    "javascript reference".search("javascript");        //0
    "javascript reference".search("reference");         //11
    "javascript reference".search("r");                 //6
    "javascript reference".search("a");                 //6
    "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(시작 위치, [끝나는 위치])
  • 시작 위치에서 종료 위치 값을 추출하여, 새로운 배열을 반환합니다.
{
    ['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']
}

20. search()

"문자열".search(검색값)
"문자열".search(정규식표현)
  • 문자열(정규식)을 검색하고, 위치값(숫자)을 반환합니다.
  • 문자열을 검색하여, 주어진 값과 일치하는 것이 없으면 -1을 반환합니다.
  • 대소문자를 구별합니다.
{
    "javascript reference".search("javascript");        //0
    "javascript reference".search("reference");         //11
    "javascript reference".search("r");                 //6
    "javascript reference".search("a");                 //6
    "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
}

21.

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']

    "java script".split("j");       //['', 'avascript']
    "java script".split("a");       //['j', 'v', 'script']
    "java script".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
}

23.

24.

25.

26.

27.

28.

29.

30. trim()

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

31. trimEnd()

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

32. trimStart()

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