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;

    const text1 = "모던"
    const text2 = "자바스크립트"
    const text3 = "핵심"

    //나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다.
    
    //03
    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 + "을 배우고 싶다.";

    //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()
    const str1 = "javascript";
    const currentStr1 = str1.toUpperCase();

    document.querySelector(".sample01_N1").innerHTML = "1";
    document.querySelector(".sample01_Q1").innerHTML = "javascript";
    document.querySelector(".sample01_M1").innerHTML = "toUpperCase()";
    document.querySelector(".sample01_P1").innerHTML = currentStr1;
    
    //toLowerCase()
    const str2 = "JAVASCRIPT";
    const currentStr2 = str2.toLowerCase();

    document.querySelector(".sample01_N2").innerHTML = "2";
    document.querySelector(".sample01_Q2").innerHTML = "JAVASCRIPT";
    document.querySelector(".sample01_M2").innerHTML = "toLowerCase()";
    document.querySelector(".sample01_P2").innerHTML = currentStr2;

03. 문자열 메서드 : 문자열 공백 제거 : 반환(문자열)

trim() : 문자열 앞뒤 공백 제거 | trimStart() : 문자열 앞 공백 제거 | trimEnd() : 문자열 뒤 공백 제거 : 반환(문자열)

번호 기본값 메서드 리턴값 
    //trim()
    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;
    
    //trimStart()
    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;
    
    //trimEnd()
    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(시작위치 , 길이) 
    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,1); //(아무것도 안나옴)
    const currentStr8 = str1.slice(1,2); //a
    const currentStr9 = str1.slice(1,3); //av
    const currentStr10 = str1.slice(1,4); //ava
    const currentStr11 = str1.slice(-1); //e
    const currentStr12 = str1.slice(-2); //ce
    const currentStr13 = str1.slice(-3); //nce
    const currentStr14 = str1.slice(-3,-1); //nc
    const currentStr15 = str1.slice(-3,-2); //n
    const currentStr16 = str1.slice(-3,-3); //(아무것도 안나옴)

    const currentStr17 = str1.slice(4,1); //(아무것도 안나옴)
    const currentStr18 = str1.substring(4,1); //ava 
    const currentStr19 = str1.substring(1,4); //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 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(구분자, 갯수); 
    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'] // |\ 는 or // ? 는 있거나 없을때 // * 있거나 없거나 많거나 // + 하나 또는 많이 // {2,3} 2개거나 3개거나
    
    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() : 메서드는 문자열을 부분 문자열로 구분하고 배열로 반환합니다.

"문자열".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 //제일 첫번째 e만 바뀜
    const currentStr4 = str1.replaceAll("e","E");      //javascript rEfErEncE
    const currentStr5 = str1.replace(/e/g,"E");      //javascript rEfErEncE //소문자만 구별함
    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"); 

    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(/-/g, "*");    //010*2000*1000
    const currentStr13 = str3.replace(/[1-9]/g, "*");    //0*0-*000-*000

07. 문자열 메서드 : 문자열 결합 : 반환(문자열)

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

"문자열".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(" ",[ "refer", "book"])    //javascript refer,book //배열은 (,)로 나옴

08. 문자열 메서드 : 문자열 반복 : 반환(문자열)

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

"문자열".repeat(숫자) 
    const str1 = "javascript";
    const currentStr1 = str1.repeat("0"); //''
    const currentStr2 = str1.repeat("1"); //javascript
    const currentStr3 = str1.repeat("2"); //javascriptjavascript

09. 문자열 메서드 : 문자열 반복 : 반환(문자열)

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

"문자열",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___

10. 문자열 메서드 : 문자열 특정 문자의 위치를 찾음

indexOf, lastIndexOf : 문자열 특정 문자의 위치를 찾음

"문자열.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() 메서드는 문자열 포함 여부를 검색하여, 불린(ture,false)을 반환합니다.

"문자열".includes(검색값)
"문자열".includes(검색값, 시작값) 
    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(정규식 표현); 
    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 //j가 a부터 z까지에 포함이 되어있기 때문

13. 문자열 메서드 : 문자열을 검색(정규식) : 반환(배열)

match() 메서드는 문자열을 검색하고 배열을 반환합니다.

"문자열".match("검색값");
"문자열".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' //i는 소문자 대문자 구별하지 않는다
    const currentStr7 = str1.match(/r/g);    //(3) ['r', 'r', 'r']
    const currentStr8 = str1.match(/e/g);    //(4) ['e', 'e', 'e', 'e']

14. 문자열 메서드 : 지정한 인덱스의 문자를 추출 : 반환(문자열)

charAt() 메서드는 숫자로 검색하였을 때 문자열을 반환합니다. charCodeAt() 메서드는 지정한 숫자의 유니코드 값을 반환합니다.

"문자열".charAt(숫자); 
    // "문자열".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
    
    // "문자열".charCodeAt(숫자);
    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(검색 문자열);
"문자열".startsWith(검색 문자열, 위치값);
"문자열".endsWith(검색 문자열);
"문자열".endsWith(검색 문자열, 위치값); 
    // "문자열".startsWith(검색 문자열);
    // "문자열".startsWith(검색 문자열, 위치값);
    // "문자열".endsWith(검색 문자열);
    // "문자열".endsWith(검색 문자열, 위치값);

    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("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
    const currentStr16 = str1.endsWith('reference',20   );    //true