01. 문자열 : 문자열 결합 / 템플릿 문자열

템플릿 문자열은 내장된 표현식을 허용하는 문자열 리터럴이다.

번호 기본값 매서드 리턴값
{
    //01
    {
        const str1 = "자바스크립트";
        const str2 = "제이쿼리";
        
        document.querySelector(".sample01_N1").innerHTML = "1";
        document.querySelector(".sample01_Q1").innerHTML = "자바스크립트, 제이쿼리";
        document.querySelector(".sample01_M1").innerHTML = "문자열(string) 결합";
        document.querySelector(".sample01_P1").innerHTML = str1 + str2;
       
        const num1 = 100;
        const num2 = 200;
        
        document.querySelector(".sample01_N2").innerHTML = "2";
        document.querySelector(".sample01_Q2").innerHTML = "100, 200";
        document.querySelector(".sample01_M2").innerHTML = "숫자(number) 결합";
        document.querySelector(".sample01_P2").innerHTML = num1 + num2;
        
        const text1 = "모던";
        const text2 = "자바스크립트";
        const text3 = "핵심";
        document.querySelector(".sample01_N3").innerHTML = "3";
        document.querySelector(".sample01_Q3").innerHTML = "모던, 자바스크립트, 핵심";
        document.querySelector(".sample01_M3").innerHTML = "문자열(string) 결합";
        document.querySelector(".sample01_P3").innerHTML = "나는 " + text1 + "(modern) " + text2 + "(javascript) " + text3 + "을 배우고 싶다.";
        
        document.querySelector(".sample01_N4").innerHTML = "4";
        document.querySelector(".sample01_Q4").innerHTML = "모던, 자바스크립트, 핵심";
        document.querySelector(".sample01_M4").innerHTML = "템플릿 문자열";
        document.querySelector(".sample01_P4").innerHTML = `나는 ${text1}(modern) ${text2}(javascript) ${text3}을 배우고 싶다.`;
       
        //나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다.
    }
}

02. toUpperCase() / toLowerCase()

toUpperCase() : 문자열을 대문자로 변경하고, ToLowerCase()는 문자열을 소문자로 변경합니다.

번호 기본값 매서드 리턴값
{
    // 02
    {
        const str1 = "javascript";
        const currentStr1 = str1.toUpperCase();
        
        document.querySelector(".sample02_N1").innerHTML = "1";
        document.querySelector(".sample02_Q1").innerHTML = "javascript";
        document.querySelector(".sample02_M1").innerHTML = "toUpperCase()";
        document.querySelector(".sample02_P1").innerHTML = currentStr1;
        
        const str2 = "JAVASCRIPT";
        const currentStr2 = str1.toLowerCase();
        
        document.querySelector(".sample02_N2").innerHTML = "2";
        document.querySelector(".sample02_Q2").innerHTML = "JAVASCRIPT";
        document.querySelector(".sample02_M2").innerHTML = "toLowerCase()";
        document.querySelector(".sample02_P2").innerHTML = currentStr2;
    }
}

03. trim() / trimStart() / trimEnd()

문자열의 앞/뒤 공백을 제거합니다.

번호 기본값 매서드 리턴값
{
    // 03
    {
        const str1 = "      javascript      ";
        const currentStr1 = str1.trim();
        
        document.querySelector(".sample03_N1").innerHTML = "1";
        document.querySelector(".sample03_Q1").innerHTML = str1;
        document.querySelector(".sample03_M1").innerHTML = "trim()";
        document.querySelector(".sample03_P1").innerHTML = currentStr1;
        
        const str2 = "      javascript      ";
        const currentStr2 = str2.trimStart();
        
        document.querySelector(".sample03_N2").innerHTML = "2";
        document.querySelector(".sample03_Q2").innerHTML = str2;
        document.querySelector(".sample03_M2").innerHTML = "trimStart()";
        document.querySelector(".sample03_P2").innerHTML = currentStr2;
        
        const str3 = "      javascript      ";
        const currentStr3 = str3.trimEnd();
       
        document.querySelector(".sample03_N3").innerHTML = "3";
        document.querySelector(".sample03_Q3").innerHTML = str3;
        document.querySelector(".sample03_M3").innerHTML = "trimEnd()";
        document.querySelector(".sample03_P3").innerHTML = currentStr3;
    }
}

04. slice() / substring() / substr()

문자열에서 원하는 값을 추출하여 문자열을 반환하는 메서드입니다.

"문자열" .slice(시작위치)
"문자열" .slice(시작위치, 끝나는위치)
//시작 위치의 값은 끝나는 위치 값보다 작아야 합니다.
//substring() 시작값이 끝나는 값보다 클 경우 두 값을 바꿔서 처리(에러 방지) "문자열" .substr(시작위치)
"문자열" .substr(시작위치, 길이)
{
    //04
    {
        //slice(시작위치)
        //slice(시작위치, 끝나는위치)
        //시작위치 < 끝나는위치
        //substr(시작위치)
        //substr(시작위치, 길이) 
       
        const str1 = "javascript reference";
        const currentStr1 = str1.slice(0);  //javascript reference
        const currentStr2 = str1.slice(1);  //avascript reference
        const currentStr3 = str1.slice(2);  //vascript reference
        const currentStr4 = str1.slice(0, 1);  //j
        const currentStr5 = str1.slice(0, 2);  //ja
        const currentStr6 = str1.slice(0, 3);  //jav
        const currentStr7 = str1.slice(1, 2);  //a
        const currentStr8 = str1.slice(1, 3);  //av
        const currentStr9 = str1.slice(1, 4);  //avs
        const currentStr10 = str1.slice(-1);   //e
        const currentStr11 = str1.slice(-2);   //ce
        const currentStr12 = str1.slice(-3);   //nce
        const currentStr13 = str1.slice(-3, -1);   //nc
        const currentStr14 = str1.slice(-3, -2);   //n
        const currentStr15 = str1.slice(-3, -3);   //
        const currentStr16 = str1.slice(1, 4);  //ava
        const currentStr17 = str1.slice(4, 1);  //''
        const currentStr18 = str1.substring(1, 4);  //ava
        const currentStr19 = str1.substring(4, 1);  //ava
        const currentStr20 = str1.substr(0);  //javascript reference
        const currentStr21 = str1.substr(1);  //avascript reference
        const currentStr22 = str1.substr(2);  //vascript reference
        const currentStr23 = str1.substr(0, 1);  //j
        const currentStr24 = str1.substr(0, 2);  //ja
        const currentStr25 = str1.substr(0, 3);  //jav
        const currentStr26 = str1.substr(1, 2);  //av
        const currentStr27 = str1.substr(1, 3);  //ava
        const currentStr28 = str1.substr(1, 4);  //avas
        const currentStr29 = str1.substr(-1);  //e
        const currentStr30 = str1.substr(-2);  //ce
        const currentStr31 = str1.substr(-3);  //nce
        const currentStr32 = str1.substr(-1, 1);  //e
        const currentStr33 = str1.substr(-2, 2);  //ce
        const currentStr34 = str1.substr(-3, 3);  //nce
    }
}

05. split()

문자열에서 원하는 값을 추출 배열로 반환합니다.

// "문자열".split(구분자);
// "문자열".split(정규식 표현);
// "문자열".split(구분자, 갯수);
{
    //05
    {
        // "문자열".split(구분자);
        // "문자열".split(정규식 표현);
        // "문자열".split(구분자, 갯수);
        
        const str1 = "javascript reference";
        const currentStr1 = str1.split('');      // ['j','a','v','a','s','c','r','i','p','t','','r','e','f','e','r','e','n','c','e']
        const currentStr2 = str1.split(' ');     // ['javascript', 'reference']
        const currentStr3 = str1.split('', 1);   // ['j']
        const currentStr4 = str1.split('', 2);   // ['j', 'a']
        const currentStr5 = str1.split(' ', 1);  // ['javascript']
        const currentStr6 = str1.split(' ', 2);  // ['javascript', 'reference']
        const currentStr7 = str1.split('j');     // ['', 'avascript reference']
        const currentStr8 = str1.split('a');     // ['j', 'v', 'script reference']
        const currentStr9 = str1.split('e');     // ['javascript r', 'f', 'r', 'nc', '']
       
        const str2 = "java/script/refer/ence";
        const currentStr10 = str2.split('/');    // ['java', 'script', 'refer', 'ence']
        
        const str3 = "java&script&refer!ence";
        const currentStr11 = str3.split('!');       // ['java&script&refer', 'ence']
        const currentStr12 = str3.split('&');       // ['java', 'script', 'refer!ence']
        const currentStr13 = str3.split(/&|\!/);    // ['java', 'script', 'refer', 'ence']
        
        const str4 = "javascript reference";
        const currentStr14 = str4.split('').join();                 //j,a,v,a,s,c,r,i,p,t, ,r,e,f,e,r,e,n,c,e
        const currentStr15 = str4.split('').join('*');              //j*a*v*a*s*c*r*i*p*t* *r*e*f*e*r*e*n*c*e
        const currentStr16 = str4.split('').reverse().join();       //e,c,n,e,r,e,f,e,r, ,t,p,i,r,c,s,a,v,a,j
        const currentStr17 = str4.split('').reverse().join('/');    //e/c/n/e/r/e/f/e/r/ /t/p/i/r/c/s/a/v/a/j
    }
}

06. replace() / replaceAll()

replace() 메서드는 문자열을 부분 문자열로 구분하고 배열로 반환합니다.

//"문자열".replace("찾을 문자열", "변경할 문자열")
//"문자열".replace(정규식)
//"문자열".replace(정규식, "변경할 문자열")
{
    //"문자열".replace("찾을 문자열", "변경할 문자열")
    //"문자열".replace(정규식)
    //"문자열".replace(정규식, "변경할 문자열")

    const str1 = "javascript reference";
    const currentStr1 =str1.replace("javascript", "자바스크립트");      //자바스크립트 reference
    const currentStr2 =str1.replace("j", "J");                          //Javascript reference
    const currentStr3 =str1.replace("e", "E");                          //javascript rEference
    const currentStr4 =str1.replaceAll("e", "E");                       //javascript rEfErEncE
    const currentStr5 =str1.replaceAll(/e/g, "E");                      //javascript rEfErEncE g는 글로벌의 약자
    const currentStr6 =str1.replaceAll(/e/gi, "E");                     //javascript rEfErEncE 

    const str2 = "http://www.naver.com/img01.jpg";
    const currentStr7 =str2.replace("img01.jpg","img02.jpg");           //http://www.naver.com/img02.jpg

    const str3 = "010-2000-1000";
    const currentStr8 = str3.replace("-","");                                   //0102000-1000
    const currentStr9 = str3.replaceAll("-","");                                //01020001000
    const currentStr10 = str3.replaceAll(/-/g,"");                              //01020001000
    const currentStr11 = str3.replaceAll(/-/g," ");                             //010 2000 1000
    const currentStr12 = str3.replaceAll(/[1-9]/g,"*");                         //0*0-*000-*000

    console.log(currentStr12);
}

07. concat()

concat() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다.

//"문자열".concat(문자열)
//"문자열".concat(문자열, 문자열....)
{
    //07
    {
        //"문자열".concat(문자열)
        //"문자열".concat(문자열, 문자열....)

        const str1 = "javascript";
        const currentStr1 = str1.concat("reference");                        //javascriptreference
        const currentStr2 = str1.concat(" ", "reference");                   //javascript reference
        const currentStr3 = str1.concat(",", "reference");                   //javascript,reference
        const currentStr4 = str1.concat(",", "reference", ", ","book");      //javascript,reference, book
        const currentStr5 = str1.concat(",", ["reference","book"]);          //javascript,reference,book

        console.log(currentStr5);
    }

}

08. repeat()

repeat() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다.

{
    //08
    {
        const str1 = "javascript";
        const currentStr1 = str1.repeat(0);         //''
        const currentStr2 = str1.repeat(1);         //javascript
        const currentStr3 = str1.repeat(2);         //javascriptjavascript

    }
}

09. padStart() / padEnd()

padStart()/padEnd() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다.

//"문자열".padStart(길이)
//"문자열".padStart(길이, 문자열)
{
    //09
        {
            //"문자열".padStart(길이)
            //"문자열".padStart(길이, 문자열)
            const str1 = "456";
            const currentStr1 = str1.padStart(1, "0");      //456      
            const currentStr2 = str1.padStart(2, "0");      //456      
            const currentStr3 = str1.padStart(3, "0");      //456      
            const currentStr4 = str1.padStart(4, "0");      //0456      
            const currentStr5 = str1.padStart(5, "0");      //00456      
            const currentStr6 = str1.padStart(6, "0");      //000456
            const currentStr7 = str1.padStart(6, "1");        //111456
            const currentStr8 = str1.padStart(6, "12");       //121456
            const currentStr9 = str1.padStart(6, "123");      //123456
            const currentStr10 = str1.padStart(6, "1234");    //123456
            const currentStr11 = str1.padStart(6);            //   456
            
            const currentStr12 = str1.padEnd(1, "0");            //456
            const currentStr13 = str1.padEnd(2, "0");            //456
            const currentStr14 = str1.padEnd(3, "0");            //456
            const currentStr15 = str1.padEnd(4, "0");            //4560
            const currentStr16 = str1.padEnd(5, "0");            //45600
            const currentStr17 = str1.padEnd(6, "0");            //456000
            const currentStr18 = str1.padEnd(6, "1");            //456111
            const currentStr19 = str1.padEnd(6, "12");           //456121
            const currentStr20 = str1.padEnd(6, "123");          //456123
            const currentStr21 = str1.padEnd(6, "1234");         //456123
            const currentStr22 = str1.padEnd(6);                 //456___

            console.log(currentStr22)
        }
}

10. indexOf() / lastIndexOf

문자열에서 특정 문자의 위치를 찾고 숫자를 반환합니다.

// "문자열".indexOf(검색값)
// "문자열".indexOf(검색값, 위치값)
// "문자열".lastIndexOf(검색값)
// "문자열".lastIndexOf(검색값, 위치값)
{
    //10
    {
        // "문자열".indexOf(검색값)
        // "문자열".indexOf(검색값, 위치값)
        // "문자열".lastIndexOf(검색값)
        // "문자열".lastIndexOf(검색값, 위치값)
        
        const str1 = "javascript reference";
        const currentStr1 = str1.indexOf("javascript");        //0
        const currentStr2 = str1.indexOf("reference");         //11
        const currentStr3 = str1.indexOf("j");                 //0
        const currentStr4 = str1.indexOf("a");                 //1
        const currentStr5 = str1.indexOf("v");                 //2
        const currentStr6 = str1.indexOf("jquery");            //-1
        const currentStr7 = str1.indexOf("b");                 //-1
        const currentStr8 = str1.indexOf("javascript", 0);     //0
        const currentStr9 = str1.indexOf("javascript", 1);     //-1
        const currentStr10 = str1.indexOf("reference", 0);     //11
        const currentStr11 = str1.indexOf("reference", 1);     //11
        const currentStr12 = str1.indexOf("reference", 11);    //11
        const currentStr13 = str1.indexOf("reference", 12);    //-1

        const str2 = "javascript reference";

        const currentStr14 = str1.lastIndexOf("javascript");    //0
        const currentStr15 = str1.lastIndexOf("reference");     //11
        const currentStr16 = str1.lastIndexOf("j");             //0
        const currentStr17 = str1.lastIndexOf("a");             //3  
        const currentStr18 = str1.lastIndexOf("v");             //2
        const currentStr19 = str1.lastIndexOf("jquery");        //-1
        const currentStr20 = str1.lastIndexOf("b");             //-1
        const currentStr21 = str1.lastIndexOf("javascript", 0);     //0
        const currentStr22 = str1.lastIndexOf("javascript", 1);     //0 
        const currentStr23 = str1.lastIndexOf("reference", 0);     //-1 기준점 e가1 뒤가 0
        const currentStr24 = str1.lastIndexOf("reference", 1);     //-1  
        const currentStr25 = str1.lastIndexOf("reference", 11);    //11
        const currentStr26 = str1.lastIndexOf("reference", 12);    //11

    }
}

11. includes() :

includes() 메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다.

// "문자열".includes(검색값);
// "문자열".includes(검색값,시작값);
{
//11
    {
    const str1 = "javascript reference";
    const currentStr1 = str1.includes("javascript");        //true
    const currentStr2 = str1.includes("j");                 //true
    const currentStr3 = str1.includes("b");                 //false
    const currentStr4 = str1.includes("reference");         //true
    const currentStr5 = str1.includes("reference", 1);      //true
    const currentStr6 = str1.includes("reference", 11);     //true
    const currentStr7 = str1.includes("reference", 12);     //false
    }
}

12. search()

search() 메서드는 문자열(정규식)을 검색하고 위치값(숫자)를 반환합니다.

"문자열".search("검색값");
"문자열".search("정규식 표현");
{
    //12 search : 반환(숫자)
    {
        "문자열".search("검색값");
        "문자열".search("정규식 표현");

        const str1 = "javascript reference";
        const currentStr1 = str1.search("javascript");        //0
        const currentStr2 = str1.search("reference");         //11
        const currentStr3 = str1.search("j");                 //0
        const currentStr4 = str1.search("a");                 //1
        const currentStr5 = str1.search("v");                 //2
        const currentStr6 = str1.search("jquery");            //-1
        const currentStr7 = str1.search("b");                 //-1
        const currentStr8 = str1.search(/[a-z]/g);            //0
    }
}

13. match() : 반환(배열)

match() 메서드는 문자열이 정규식과 매치되는 부분을 검색합니다.

{
    //13 match : 반환(배열)
    {
        const str1 = "javascript reference";
        const currentStr1 = str1.match("javascript");       //javascript
        const currentStr2 = str1.match("reference");        //reference
        const currentStr3 = str1.match("r");                //r
        const currentStr4 = str1.match(/reference/);        //reference
        const currentStr5 = str1.match(/Reference/);        //null
        const currentStr6 = str1.match(/Reference/i);       //reference
        const currentStr7 = str1.match(/r/g);               //['r', 'r', 'r']
        const currentStr8 = str1.match(/e/g);               //['e', 'e', 'e', 'e']
    }
}

14. charAt() / charCodeAt

charAt() 메서드는 지정한 숫자(index)의 단일 문자 값을 반환합니다. charCodeAt()메서드는 지정한 숫자의 유니코드 값을 반환합니다.

"문자열".charAt(숫자); "문자열".charCodeAt(숫자);
{
    // "문자열".charAt("숫자");

    const str1 = "javascript reference";
    const currentStr1 = str1.charAt();              //j
    const currentStr2 = str1.charAt("0");           //j
    const currentStr3 = str1.charAt("1");           //a
    const currentStr4 = str1.charAt("2");           //v

    const currentStr5 = str1.charCodeAt();          //106
    const currentStr6 = str1.charCodeAt("0");       //106
    const currentStr7 = str1.charCodeAt("1");       //97
    const currentStr8 = str1.charCodeAt("2");       //118
}

15. startsWith() / endsWith()

startsWith() 메서드는 시작하는 문자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다. endsWith() 메서드는 끝나는 문자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다.

"문자열".startsWith(검색 문자열);
"문자열".startsWith(검색 문자열, 위치값);
"문자열".endsWith(검색 문자열;
"문자열".endsWith(검색 문자열, 시작 위치값);
{
    const str1 = "javscript reference";
    const currentStr1 = str1.startsWith('javascript');      //true
    const currentStr2 = str1.startsWith('j');               //true
    const currentStr3 = str1.startsWith('java');            //true
    const currentStr4 = str1.startsWith('reference');       //false
    const currentStr5 = str1.startsWith();                  //false
    const currentStr6 = str1.startsWith('');                //true
    const currentStr7 = str1.startsWith('reference', 7);                //false
    const currentStr8 = str1.startsWith('reference', 11);                //true

    const currentStr9 = str1.endsWith('reference');           //true
    const currentStr10 = str1.endsWith('e');                  //true
    const currentStr11 = str1.endsWith('refer');              //false
    const currentStr12 = str1.endsWith('javascript');         //false
    const currentStr13 = str1.endsWith();                     //false
    const currentStr14 = str1.endsWith('');                   //true
    const currentStr15 = str1.endsWith('reference', 7);       //false
}
Top