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;

//02
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;

//03
const text1 = "모던";
const text2 = "자바스크립트";
const text3 = "핵심";
//나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다.
document.querySelector(".sample01_N3").innerHTML = "3";
document.querySelector(".sample01_Q3").innerHTML = "모던, 자바스크립트, 핵심";
document.querySelector(".sample01_M3").innerHTML = "문자열(number) 결합";
document.querySelector(".sample01_P3").innerHTML =  "나는 "+text1+"(modern) "+text2+"(javascript) "+text3+"을 배우고 싶다.";

//04
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}을 배우고 싶다.`;
결과 보기

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 = str2.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 = "javascript";
        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 = "javascript";
        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 = "javascript";
        document.querySelector(".sample03_M3").innerHTML = "trimEnd";
        document.querySelector(".sample03_P3").innerHTML = currentStr3;
    }
결과 보기

04. slice() : substring() : substr()

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

"문자열".slice(시작위치)
"문자열".slice(시작위치,끝나는위치)
//시작위치의 값은 끝나는위치의 값보다 작아야 합니다.
//substring() 시작값이 끝나는 값보다 클 경우 두 값을 바꿔서 처리(에러 방지)
"문자열".substr(시작위치)
"문자열".substr(시작위치, 길이) 
//04
const str1 = "javascript referance";
const currentStr1 = str1.slice(0); //javascript referance
const currentStr2 = str1.slice(1); //avascript referance
const currentStr3 = str1.slice(2); //vascript referance
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); //ava
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); // av
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
    {
        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(정규식, "변경할 문자열") 
//06
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.replace(/e/g,"E");                     //javascript rEfErEncE g여러개 선택
const currentStr6 = str1.replace(/e/gi,"E");                    //javascript rEfErEncE

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

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

07. concat()

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.

//"문자열".concat(문자열, 문자열....)
//07
const str1 = "javascript";
const currentStr1 = str1.concat("reference");                         //javascriptreference
const currentStr2 = str1.concat("","reference");                      //javascriptreference
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
결과 보기

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
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
결과 보기
"문자열".includes(검색값)
"문자열".includes(검색값, 시작값)

10. indexOf() :

indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다.
일치하는 값이 없으면 -1을 반환합니다.

//"문자열".indexOf(검색값)
//"문자열".indexOf(검색값,위치값) 
//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 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           
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)을 반환합니다. 

//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(정규식표현); 
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 : 반환(배열)

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()

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

// "문자열".charAt(숫자);
//14. 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(검색 문자열, 시작 위치값) 
//15
    {
      const str1 = "javascript reference";
      const currentStr1 = str1.startsWith('javascript');      //true
      const currentStr2 = str1.startsWith('j');               //true
      const currentStr3 = str1.startsWith('java');            //true
      const currentStr4 = str1.startsWith('raference');       //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
      const currentStr16 = str1.endsWith('reference',20);     //true
    }