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;
    
//02
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;
    
//03
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 + "을 배우고 싶다.";
    
//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}(javascipt) ${text3}을 배우고 싶다.`;

02. toUpperCase() / toLowerCase() : 문자열을 대 소 문자로 변경 : 반환(문자열)

toUpperCase() : 문자열을 대문자로 변경하고, toLowerCase() : 문자열을 소문자로 변경

번호 기본값 메서드 리턴값
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() / trimStrart() / trimEnd()

trim() / trimStrart() / trimEnd() 문자열 앞뒤 공백을 제거 합니다.

번호 기본값 메서드 리턴값
const str1 = "       javascript    ";
const currenStr1 = 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 = currenStr1;
    
    
const str2 = "       javascript    ";
const currenStr2 = 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 = currenStr2;
    
const str3 = "       javascript    ";
const currenStr3 = 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 = currenStr3;

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

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

"문자열".slice(시작위치)
"문자열".slice(시작위치, 끝나는위치)
//시작위치의 값은 끝나는 위치 값보다 작아야 합니다.
//substring() 시작값이 끝나는 값보다 클 경우 두 값을 바꿔서 처리(에러 방지)
"문자열".stbstr(시작위치)
"문자열".stbstr(시작위치, 길이)
const str1 = "javascript reference";
const currenStr1 = str1.slice(0);  //javascript reference
const currenStr2 = str1.slice(1);  //avascript reference
const currenStr3 = str1.slice(2);  //vascript reference
const currenStr4 = str1.slice(0, 1);  //j
const currenStr5 = str1.slice(0, 2);  //ja
const currenStr6 = str1.slice(0, 3);  //jav
const currenStr7 = str1.slice(1, 2);  //a
const currenStr8 = str1.slice(1, 3);  //av
const currenStr9 = str1.slice(1, 4);  //avs
const currenStr10 = str1.slice(-1);  //e ,-는 뒤에서 부터 시작
const currenStr11 = str1.slice(-2);  //ce
const currenStr12 = str1.slice(-3);  //nce
const currenStr13 = str1.slice(-3, -1);  //nc
const currenStr14 = str1.slice(-3, -2);  //n
const currenStr15 = str1.slice(-3, -3);  //
    
const currenStr16 = str1.slice(1, 4);  //ava
const currenStr17 = str1.slice(4, 1);  //''
const currenStr18 = str1.substring(1, 4);  //ava
const currenStr19 = str1.substring(4, 1);  //ava
    
    
const currenStr20 = str1.substr(0);  //javascript reference
const currenStr21 = str1.substr(1);  //avascript reference
const currenStr22 = str1.substr(2);  //vascript reference
const currenStr23 = str1.substr(0, 1);  //j
const currenStr24 = str1.substr(0, 2);  //ja
const currenStr25 = str1.substr(0, 3);  //jav
const currenStr26 = str1.substr(1, 2);  //av
const currenStr27 = str1.substr(1, 3);  //ava
const currenStr28 = str1.substr(1, 4);  //avas
const currenStr29 = str1.substr(-1);  //e
const currenStr30 = str1.substr(-2);  //ce
const currenStr31 = str1.substr(-3);  //nce
const currenStr32 = str1.substr(-1, -1);  //e
const currenStr33 = str1.substr(-1, -2);  //ce
const currenStr34 = str1.substr(-1, -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']
    
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() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 문자열을 부분 문자열로 구분하고 배열로 반환합니다.(String.prototype.replace() ←본래식)

"문자열".replace("찾을 문자열", "변경할 문자열")
"문자열".replace(정규식)
"문자열".replace(정규식, "변경할 문자열")
const str1 = "javascript reference";
const cirrentStr1 = str1.replace("javascript", "자바스크립트");  //자바스크립트 reference
const cirrentStr2 = str1.replace("j", "J");                     //Javasscript reference
const cirrentStr3 = str1.replace("e", "E");                     //javascript rEference
const cirrentStr4 = str1.replaceAll("e", "E");                  //javascript rEfErEncE
const cirrentStr5 = str1.replace(/e/g, "E");                    //javascript rEfErEncE, 정규식 표현
const cirrentStr6 = str1.replace(/e/gi, "E");                   //javascript rEfErEncE, 소문자 대문자 구분하지 않고 모두 선택할 경우 i 붙임
    
const str2 = "https://www.naver.com/img01.jpg";
const cirrentStr7 = str2.replace("img01.jpg", "img02.jpg");     //https://www.naver.com/img02.jpg
        
const str3 = "010-4500-1000";
    
const cirrentStr8 = str3.replace("-", "");          //0104500-1000
const cirrentStr9 = str3.replaceAll("-", "");       //01045001000
const cirrentStr10 = str3.replace(/-/g, "");       //01045001000
const cirrentStr11 = str3.replace(/-/g, " ");       //010 4500 1000
const cirrentStr12 = str3.replace(/-/g, "★");       //010★4500★1000
const cirrentStr13 = str3.replace(/[1-9]/g, "★");    //0★0-★★00-★000, 0을 제외한 숫자 바꾸기

07. concat()

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(",", ["reference","book"]);          //javascript,reference,book

08. repeat()

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

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

09. padStart() / padEnd()

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

"문자열".padStart(길이)
"문자열".padStart(길이, 문자열)
const str1 = "456";
const currnetStr1 = str1.padStart(1, "0");          //456
const currnetStr2 = str1.padStart(2, "0");          //456
const currnetStr3 = str1.padStart(3, "0");          //456
const currnetStr4 = str1.padStart(4, "0");          //0456
const currnetStr5 = str1.padStart(5, "0");          //00456
const currnetStr6 = str1.padStart(6, "0");          //000456
const currnetStr7 = str1.padStart(6, "1");          //111456
const currnetStr8 = str1.padStart(6, "12");         //121456
const currnetStr9 = str1.padStart(6, "123");        //123456
const currnetStr10 = str1.padStart(6, "1234");      //123456, 자리가 없어서 4는 짤림
const currnetStr11 = str1.padStart(6);              //   456, 앞에는 공백 처리
        
const currnetStr12 = str1.padEnd(1, "0");           //456
const currnetStr13 = str1.padEnd(2, "0");           //456
const currnetStr14 = str1.padEnd(3, "0");           //456
const currnetStr15 = str1.padEnd(4, "0");           //4560
const currnetStr16 = str1.padEnd(5, "0");           //45600
const currnetStr17 = str1.padEnd(6, "0");           //456000
const currnetStr18 = str1.padEnd(6, "1");           //456111
const currnetStr19 = str1.padEnd(6, "12");          //456121
const currnetStr20 = str1.padEnd(6, "123");         //456123
const currnetStr21 = str1.padEnd(6, "1234");        //456123
const currnetStr22 = str1.padEnd(6);                //456___, 뒤에 공백 처리

10. indexOf()

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

"문자열".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 , 데이터가 없을 경우 -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)을 반환합니다.

"문자열".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("검색값");
"문자열".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() 메서드는 문자열(정규식)을 검색하고 위치값(배열)를 반환합니다.

"문자열".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
const currentStr7 = str1.match(/r/g);              //['r', 'r', 'r']
const currentStr8 = str1.match(/e/g);              //['e', 'e', 'e', 'e']

14. charAt() / charCodeAt()

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

"문자열".charAt(숫자);
"문자열".charCodeAt(숫자);
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() 메서드는 시작하는 문자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다. endsWith() 메서드는 끝나는 문자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다.

"문자열".startsWith(검색 문자열)
"문자열".startsWith(검색 문자열, 위치값)
"문자열".endsWith(검색 문자열)
"문자열".endsWith(검색 문자열, 시작 위치값)
const str1 = "javascript reference";
const currenStr1 = str1.startsWith('javascript');   //true
const currenStr2 = str1.startsWith('j');            //true
const currenStr3 = str1.startsWith('java');         //true
const currenStr4 = str1.startsWith('reference');    //flase
const currenStr5 = str1.startsWith();               //flase
const currenStr6 = str1.startsWith('');             //true
const currenStr7 = str1.startsWith('reference', 7); //flase
const currenStr8 = str1.startsWith('reference', 11); //true

const currenStr9 = str1.endsWith('reference');      //true
const currenStr10 = str1.endsWith('e');             //true
const currenStr11 = str1.endsWith('refer');         //flase
const currenStr12 = str1.endsWith('javascript');    //flase
const currenStr13 = str1.endsWith();                //flase
const currenStr14 = str1.endsWith('');              //true
const currenStr15 = str1.endsWith('reference', 7);  //flase
const currenStr16 = str1.endsWith('reference', 20); //true