01. string.prototype.at()

"문자열".at(위치값)
  • 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다.
  • 음의 정수는 문자열의 마지막부터 셉니다.
  • 위치값에 위치 해있는 문자열이 없으면 'undefined'가 출력됩니다.
{
    "javascript reference".at(0);     // j
    "javascript reference".at(1);     // a
    "javascript reference".at(2);     // v
    "javascript reference".at(11);    // r
    "javascript reference".at(20);    // undefined
    "javascript reference".at(-1);    // e
    "javascript reference".at(-2);    // c
}

02. string.prototype.charAt()

"문자열".charAt(위치값)
  • 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 단일문자를 반환합니다.
  • 만약 인덱스가 문자열 길이보다 큰 경우 빈 문자열" "을 반환합니다.
  • 음수일 경우 빈 문자열" "을 반환합니다.
{
    "javascript reference".charAt(0);    // j
    "javascript reference".charAt(1);    // a
    "javascript reference".charAt(2);    // v
    "javascript reference".charAt(11);   // r
    "javascript reference".charAt(20);   // 빈문자열
    "javascript reference".charAt(-1);   // 빈문자열
    "javascript reference".charAt(-2);   // 빈문자열
}

03. string.prototype.charCodeAt()

"문자열".charCodeAt(위치값)
  • 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 유니코드 정수 값을 반환합니다.
  • 매개변수는 0 이상이고 문자열의 길이보다 작은 정수를 사용합니다.
  • 숫자가 아니라면 0을 기본값으로 사용합니다.
  • 주어진 인덱스 대한 문자에 대한 UTF-16 코드를 나타내는 숫자 범위 밖으로 넘어갔을 경우 NaN를 반환합니다.
{
    "javascript reference".charCodeAt(0);      // 106
    "javascript reference".charCodeAt(1);      // 97
    "javascript reference".charCodeAt(2);      // 118
    "javascript reference".charCodeAt(11);     // 114
    "javascript reference".charCodeAt(20);     // NaN
    "javascript reference".charCodeAt(-1);     // NaN
    "javascript reference".charCodeAt(-2);     // NaN
}

유니코드란?

유니코드란, 숫자와 글자, 즉 키와 값이 1:1로 매핑된 형태의 코드입니다.
'A'라는 글자는 0x0041 이라는 index를 가집니다.
'a'라는 글자는 0x0061 이라는 index를 가집니다.
'가'라는 글자는 0xac00 이라는 index를 가집니다.
*더 많은 글자와 index를 보려면 http://www.unicode.org/charts/ 를 참고해주세요


유니코드 UTF-16이란?

UTF-16(16-bit Unicode Transformation Format)은 유니코드 문자 인코딩 방식의 하나입니다. 주로 사용되는 기본 다국어 평면 (BMP, Basic multilingual plane)에 속하는 문자들은 그대로 16비트 값으로 인코딩이 되고 그 이상의 문자는 특별히 정해진 방식으로 32비트로 인코딩이 됩니다.

04.string.prototype.codePointAt()

"문자열".codePointAt(위치값)
  • 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 유니코드 포인트 정수 값을 반환합니다.
  • 대소문자를 구별합니다.
{
    "javascript reference".codePointAt(0);      // 106
    "javascript reference".codePointAt(1);      // 97
    "javascript reference".codePointAt(2);      // 118
    "javascript reference".codePointAt(11);     // 114
    "javascript reference".codePointAt(20);     // undefined
    "javascript reference".codePointAt(-1);     // undefined
    "javascript reference".codePointAt(-2);     // undefined
}

05. string.prototype.concat()

str.concat('',str)
  • 매개변수로 전달된 문자열을 받어, 결합된 새로운 문자열을 반환합니다.
  • 원본 문자열과 결과 문자열의 변형은 서로에게 영향을 미치지 않습니다.
{
    const str1 = "java" 
    const str2 = "script"


    console.log(str1.concat('', str2)); //javascript

    const str1 = "javascript" 
    const str2 = "reference"

    console.log(str1.concat('', str2)); //javascriptreference


    const str1 = "javascript" 
    const str2 = "reference"


    console.log(str1.concat(',', str2)); //javascript,reference
    
}

06. includes( )

"문자열".include(검색값, [위치값])
  • 문자열 포함 여부를 검색하여, 불린(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 refercence".indexOf("javascript");      // 0
    "javascript refercence".indexOf("javascripts");     // -1
    "javascript refercence".indexOf("j");               // 0
    "javascript refercence".indexOf("J");               // -1
    "javascript refercence".indexOf("a");               // 1
    "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);   // 0
    "javascript refercence".indexOf("javascript", 1);   // -1
    "javascript refercence".indexOf("refercence", 1);   // 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

    console.log("javascript reference".lastIndexOf("reference"));
}

09. string.prototype.localeCompare()

"문자열".localeCompare(<코드> 비교문자열)<코드>
  • 문자열과 문자열을 비교하여, 수치(음수, 양수, 0)을 반환합니다.
  • 정렬순서에 따른 비교를 할 수 있습니다.
{
    console.log('a'.localeCompare('b')); // -1 (a는 b보다 앞자리이므로)
    console.log('b'.localeCompare('a')); // 1 (b는 a의 뒷자리이므로)
    console.log('b'.localeCompare('b')); // 0 (b는 b와 같은 자리이므로)
}

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

12. string.prototype.normalize()

str.normalize([form])
  • 주어진 문자열을 정규화된 형태로 반환합니다.
  • 주어진 값이 문자열이 아닐 경우에는 우선 문자열로 변환 후 정규화합니다.
  • 만약 생략되거나 undefined일 경우 'NFC'를 사용합니다
{
    //문자열
    console.log("javascropt".normalize("NFC"))     //javascropt
    console.log("javascropt".normalize("NFD"))     //javascropt
    console.log("javascropt".normalize("NFKC"))    //javascropt
    console.log("javascropt".normalize("NFKD"))    //javascropt

    "reference".normalize("NFC");  // reference
    "reference".normalize("NFD");  // reference
    "reference".normalize("NFKC");  // reference
    "reference".normalize("NFKD");  // reference

    // 유니코드 문자열
    "\u0041\u0308".normalize("NFC");  // 'Ä'
    "\u0041\u0308".normalize("NFD");  // 'Ä'
    "\u0041\u0308".normalize("NFKC");  // 'Ä'
    "\u0041\u0308".normalize("NFKD");  // 'Ä'
}

유니코드 문자열 정규화 방식

  • NFC: 정규형 정준 결합 (Normalization Form Canonical Composition)
  • NFD: 정규형 정준 분해 (Normalization Form Canonical Decomposition)
  • NFKC: 정규형 호환성 결합 (Normalization Form Compatibility Composition)
  • NFKD: 정규형 호환성 분해 (Normalization Form Compatibility Decomposition)

13. string.prototype.padEnd()

"문자열".padEnd(문자열길이,'매개변수')
  • 주어진 길이에 맞게 뒤 문자열을 채우고, 새로운 문자열을 반환합니다.
  • 채워넣기는 대상 문자열의 끝(우측)부터 적용됩니다.
{
    "javascript reference".padEnd(21,'!');     // javascript reference!
    "javascript reference".padEnd(25,'@');     // javascript reference@@@@@
    "javascript reference".padEnd(26,'~');     // javascript reference~~~~~~
    "javascript reference".padEnd(28,'-');     // javascript reference--------
    "javascript reference".padEnd(30,'+');     // javascript reference++++++++++
    "javascript reference".padEnd(32,'*');     // javascript reference************
}

14. string.prototype.padStart()

문자열".padEnd(문자열길이,'매개변수')
  • 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다.
  • 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다.
{                
    "javascript reference".padStart(21,'!');     // !javascript reference
    "javascript reference".padStart(25,'@');     // @@@@@javascript reference
    "javascript reference".padStart(26,'~');     // ~~~~~~javascript reference
    "javascript reference".padStart(28,'-');     // --------javascript reference
    "javascript reference".padStart(30,'+');     // ++++++++++javascript reference
    "javascript reference".padStart(32,'*');     // ************javascript reference
}

15. string.prototype.repeat()

"문자열".repeat(반복횟수)
  • 주어진 횟수만큼 반복 복사하여, 새로운 문자열을 반환합니다.
  • 반복 횟수는 양의 정수여야 합니다.
  • 반복 횟수는 무한대보다 작아야 하며, 최대 문자열 크기를 넘어선 안됩니다.
{
    "javascript reference".repeat(0);    // 빈문자열
    "javascript reference".repeat(1);    // javascript reference
    "javascript reference".repeat(2);    // javascript referencejavascript reference
    "javascript reference".repeat(3.5);  // javascript referencejavascript referencejavascript reference (소숫점은 정수로 변환)
    "javascript reference".repeat(-1);   // RangeError
}

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

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

30.trim( )

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

31.trimEnd( )

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

32.trimStart( )

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