01. 템플릿 문자열

템플릿 문자열은 내장된 표현식을 허용하는 문자열 리터럴입니다.
따옴표 대신 ``(backtick)을 사용합니다.

번호 기본값 메서드 리턴값 
//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.write(str1 + str2);
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 = "문자열(string) 결합";
document.querySelector(".sample01_P4").innerHTML = `나는 ${text1}(modern) ${text2}(javascript) ${text3}을 배우고 싶다.`;

02. 문자열 메서드 : 변경 : toUpperCase(), toLowerCase()

toUpperCase()는 문자열을 대문자로 변경하고, toLowerCase()는 소문자로 변경해준다.

번호 기본값 메서드 리턴값 
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;


const str2 = "JAVASCRIPT";
const currentStr2 = str1.toLowerCase();

document.querySelector(".sample01_N1").innerHTML = "1";
document.querySelector(".sample01_Q1").innerHTML = "JAVASCRIPT";
document.querySelector(".sample01_M1").innerHTML = "toLowerCase()";
document.querySelector(".sample01_P1").innerHTML = currentStr2;

03. 문자열 메서드 : 변경 : trim() , trimStart(), trimEnd() : 문자열의 앞 뒤 공백 제거 : 반환(문자열)

trim()은 문자열의 앞뒤 공백 제거 , trimStart()는 문자열의 앞 공백을 제거, trimEnd()는 문자열의 뒤 공백을 제거해준다.

회원가입할 때 공백이 들어가도 인식되도록

번호 기본값 메서드 리턴값 
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;

// console.log(currentStr);

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(), substring(), substr()

! 사용 방법 !
"문자열"slice(시작 위치)
"문자열"slice(시작 위치, 끝나는 위치)
//시작 위치의 값은 끝나는 위치의 값보다 작아야 합니다.
//substring()은 slice()와 동일하지만 시작 값이 끝나는 값보다 클 경우 두 값을 바꿔서 처리해준다. (에러 방지)
"문자열"substring (시작 위치)
"문자열"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); //avs
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); //값이 나오지 않는다. (끝나는 위치는 시작 위치보다 항상 커야 한다.)
// slice()는 자주 사용하므로 잘 외우기!! 

//substring (시작 위치)
const currentStr17 = str1.slice(1, 4); //ava
const currentStr18 = str1.slice(4, 1);  //안나옴
const currentStr19 = str1.substring(4, 1); //ava
const currentStr20 = str1.substring(1, 4); //ava

//substr(시작 위치, 길이값) : slice와 거의 동일하여 웹 표준에서는 사라졌다.
const currentStr21 = str1.substr(0); //javascript reference
const currentStr22 = str1.substr(1); //avascript reference
const currentStr23 = str1.substr(2); //vascript reference
const currentStr24 = str1.substr(0, 1); //j
const currentStr25 = str1.substr(0, 2); //ja
const currentStr26 = str1.substr(0, 3); //jav
const currentStr27 = str1.substr(1, 2); //av
const currentStr28 = str1.substr(1, 3); //ava
const currentStr29 = str1.substr(1, 4); //avas
const currentStr30 = str1.substr(-1); //e
const currentStr31 = str1.substr(-2); //ce
const currentStr32 = str1.substr(-3); //nce
const currentStr33 = str1.substr(-1, 1); //e
const currentStr34 = str1.substr(-2, 2); //ce
const currentStr35 = str1.substr(-3, 3); //nce

05. 문자열 메서드 : 변경 : split()

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

! 사용 방법 !
"문자열".split(구분자(separator));
"문자열".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 currentStr9 = str1.split('').join(/); // j/a/v/a/s/c/r/i/p/t/ /r/e/f/e/r/e/n/c/e

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(); // e,c,n,e,r,e,f,e,r, ,t,p,i,r,c,s,a,v,a,j (배열 사라지고 반대로 출력.)
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(정규식);
"문자열"replace(정규식, "변경할 문자열"); 
const str1 = "javascript reference";

const cirrentStr1 = str1.replace("javascript", "자바스크립트"); // 자바스크립트 reference
const cirrentStr2 = str1.replace("j", "J");     // Javascript reference
const cirrentStr3 = str1.replace("e", "E");     // javascript rEference : e가 여러개일 경우 처음 문자만 E로 변경된다. 모두 변경시키려면 replaceAll()을 사용하면 된다.
const cirrentStr4 = str1.replaceAll("e", "E");  //javascript rEfErEncE
const cirrentStr5 = str1.replace(/e/g, "E");    //javascript rEfErEncE : 정규식 /문자/g 사용하여 모두 변경하기 : /g -> 전역 /i -> 대소문자 무시
const cirrentStr6 = str1.replace(/e/gi, "E");   //javascript rEfErEncE

//이미지 명칭 바꾸기 : 충돌이 일어날 수 있으니 변경할 때 문자열을 상세히 적습니다.
const str2 = "http://www.naver.com/img01.jpg";
const cirrentStr7 = str2.replace("img01.jpg", "img02.jpg"); //http://www.naver.com/img02.jpg


const str3 = "010-2000-1000";
const cirrentStr8 = str3.replace("-", "");      //0102000-1000
const cirrentStr9 = str3.replaceAll("-", "");   //01020001000
const cirrentStr10 = str3.replace(/-/g, ""); //01020001000 : 정규식 사용 //
const cirrentStr11 = str3.replace(/-/g, " "); //010 2000 1000
const cirrentStr12 = str3.replace(/-/g, "★"); //010★2000★1000
const cirrentStr13 = str3.replace(/[1-9]/g, "★"); //0★0-★000-★000 : 0을 제외한 나머지 숫자를 ★로 바꾸기 : 알고리즘에서 많이 사용

07. concat()

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

! 사용 방법 !
"문자열".concat("추가할 문자열");
"문자열".concat("추가할 문자열", "추가할 문자열"....); : 여러개 사용 가능
"문자열".concat("추가할 문자열", ["추가할 문자열"]); : 배열 사용 가능 
const str1 = "javascript";

const cirrentStr1 = str1.concat("reference");       // javascriptreference
const cirrentStr2 = str1.concat(" ", "reference");  // javascript reference
const cirrentStr3 = str1.concat(", ", "reference"); // javascript, reference
const cirrentStr4= str1.concat(", ", "reference", ", ", "book"); //javascript, reference, book
const cirrentStr5= str1.concat(",", ["refer", "book"]); //javascript,refer,book

08. repeat()

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

const str1 = "javascript";

const cirrentStr1 = str1.repeat(0);     // ''
const cirrentStr2 = str1.repeat(1);     // javascript
const cirrentStr3 = str1.repeat(2);     // javascriptjavascript

09. padStart() / padEnd()

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

! 사용 방법 !
"문자열".padStart(길이);
"문자열".padStart(길이, "문자열"); 
const str1 = "456";

const cirrentStr1 = str1.padStart(1, "0");      //456
const cirrentStr2 = str1.padStart(2, "0");      //456
const cirrentStr3 = str1.padStart(3, "0");      //456
const cirrentStr4 = str1.padStart(4, "0");      //0456 : 자릿수보다 클 경우 앞에 0이 붙는다.
const cirrentStr5 = str1.padStart(5, "0");      //00456 : 자릿수보다 클 경우 앞에 0이 붙는다.
const cirrentStr6 = str1.padStart(6, "0");      //000456 : 자릿수보다 클 경우 앞에 0이 붙는다.
const cirrentStr7 = str1.padStart(6, "1");      //111456 : 자릿수보다 클 경우 앞에 1이 붙는다.
const cirrentStr8 = str1.padStart(6, "12");     //121456 : 자릿수보다 클 경우 앞에 121이 붙는다.
const cirrentStr9 = str1.padStart(6, "123");    //123456 : 자릿수보다 클 경우 앞에 123이 붙는다.
const cirrentStr10 = str1.padStart(6, "1234");  //123456 : 자리수보다 문자열이 길기 때문에 문자열의 마지막 값은 출력되지 않는다.
const cirrentStr11 = str1.padStart(6);          //   456 : 뒤에 문자열을 입력하지 않으면 앞의 자리수만큼 공백 처리 된다. : 456은 자릿수가 3이니 남은 3만큼의 공백이 생김

//padEnd : start와 반대의 개념이다.
const cirrentStr12 = str1.padEnd(1, "0");     // 456
const cirrentStr13 = str1.padEnd(2, "0");     // 456
const cirrentStr14 = str1.padEnd(3, "0");     // 456
const cirrentStr15 = str1.padEnd(4, "0");     // 4560
const cirrentStr16 = str1.padEnd(5, "0");     // 45600
const cirrentStr17 = str1.padEnd(6, "0");     // 456000
const cirrentStr18 = str1.padEnd(6, "1");     // 456111
const cirrentStr19 = str1.padEnd(6, "12");    // 456121
const cirrentStr20 = str1.padEnd(6, "123");   // 456123
const cirrentStr21 = str1.padEnd(6, "1234");  // 456123
const cirrentStr22 = str1.padEnd(6);          // 456___ (공백이 티가 안나서 임시로 하이픈으로 대체!)

10. index()

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

"문자열".indexOf(검색값)
"문자열".indexOf(검색값, 위치값) 
const str1 = "javascript reference"
            
const currentStr1 = str1.indexOf("javascript"); // 0
const currentStr2 = str1.indexOf("reference"); // 11 (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


//"문자열".lastIndexOf(검색값);  :  indexOf와 문법은 똑같다. 다만 뒤에서 검색한다는 점이 차이점이다.
//"문자열".lastIndexOf(검색값, 위치값);
const currentStr14 = str1.lastIndexOf("javascript");      // 0
const currentStr15 = str1.lastIndexOf("reference");       // 11
const currentStr16 = str1.lastIndexOf("j");               // 0
const currentStr17 = str1.lastIndexOf("a");               // 3 (여러개일 때 마지막 a의 위치를 출력)
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(검색값, 검색을 시작할 위치값); == indexOF()와 같다. 
const str1 = "javascript reference";

const currentStr1 = str1.includes("javascript");    // true
const currentStr2= str1.includes("j");              // true
const currentStr3= str1.includes("b");              // false : 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(정규식 표현); --> indexOF()보다 search()를 더 많이 사용 
const str1 = "javascript reference";

const currentStr1 = str1.search("javascript");      // 0
const currentStr2 = str1.search("reference");       // 11 (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 (문자열에 없을 경우 음수 -1이 나옴)
const currentStr7 = str1.search("b");               // -1
const currentStr8 = str1.search(/[a-z]/g);          // 0 //j가 a부터 z까지 포함되어 있으므로 가장 첫번째 값의 위치만 출력
//문법 상 서치값만 있으면 된다.

13. math()

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

! 사용 방법 !
"문자열".math(검색값);
"문자열".math(정규식 표현); 
const str1 = "javascript reference";

const currentStr1 = str1.math("javascript");    // javascript
const currentStr2 = str1.math("reference");     // reference
const currentStr3 = str1.math("r");             // r
const currentStr4 = str1.math(/reference/);     // reference
const currentStr5 = str1.math(/Reference/);     // null
const currentStr6 = str1.math(/Reference/i);    // reference
const currentStr7 = str1.math(/r/g);            // ['r', 'r', 'r']
const currentStr8 = str1.math(/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

    //유니코드로 변환된 값
    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() / endWith()

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

! 사용 방법 !
"문자열".startsWith(검색할 문자열);
"문자열".startsWith(검색할 문자열, 위치값);
"문자열".endWith(검색할 문자열);
"문자열".endWith(검색할 문자열, 검색을 시작할 위치값); 
{
    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.startsWith('reference');       //true  
    const currentStr10 = str1.startsWith('e');              //true  
    const currentStr11 = str1.startsWith('refer');          //true  
    const currentStr12 = str1.startsWith('javascript');     //false  
    const currentStr13 = str1.startsWith();                 //false  
    const currentStr14 = str1.startsWith('');               //true  
    const currentStr15 = str1.startsWith('reference', 7);   //false  
    const currentStr16 = str1.startsWith('reference', 20);  //true      
}