Javascript

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

// 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
{
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(시작위치)
//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(구분자, 갯수);
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
//String.prototype.replace()
{

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

const str1 = "javascript reference";//자바스크립트 reference
const cirrentStr1 = str1.replace("javascript", "자바스크립트");//javascript reference
const cirrentStr2 = str1.replace("j", "j");//javascript reference
const cirrentStr3 = str1.replace("e", "E");//javascript reference : 첫 번째 e만 바뀜
const cirrentStr4 = str1.replaceAll("e", "E");//javascript reference : replaceAll() 사용하여 모든 e가 바뀜
const cirrentStr5 = str1.replace(/e/g, "E");//javascript reference : 정규표현식 사용, 모든 e가 바뀜, g는 글로벌의 약자
const cirrentStr6 = str1.replace(/e/gi, "E");//javascript reference : gi를 사용하면 소문자 대문자 구분x

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

const str3 = "010-2000-1000";
const cirrentStr8 = str3.replace("-", "");//01020001000
const cirrentStr9 = str3.replaceAll("-", "");//01020001000
const cirrentStr10 = str3.replaceAll(/-/g, "");//01020001000
const cirrentStr11 = str3.replaceAll(/-/g, " ");//010 2000 1000
const cirrentStr12 = str3.replaceAll(/[1-9]/g, "*");//000*000*00

}

//07
{
//"문자열".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(",", ["reference", "book"]);//javascript,reference,book

//console.log(cirrentStr5)

}

//08
// repeat() 문자열을 복사하여 새로운 문자열을 반환
{
const str1 = "javascript";
const cirrentStr1 = str1.repeat()
const cirrentStr2 = str1.repeat()
const cirrentStr3 = str1.repeat()
}

//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, "1")//___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")//4561234
const currentStr22 = str1.padEnd(6)//456___ : 뒤에 공백처리
}

//10
{
// "문자열".indexOf(검색값)
// "문자열".indexOf(검색값, 위치값)
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
}

//11
//includes() 문자열 포함여부 검색, 불린을 반환
{
const str1 = "javascript reference";
const currentStr1 = str1.includes("javascript");//true
const currentStr2 = str1.includes("j"); //true
const currentStr3 = str1.includes("jquery");//false
const currentStr4 = str1.includes("b"); //false
const currentStr5 = str1.includes("reference"); //true
const currentStr6 = str1.includes("reference", 1); //true
const currentStr7 = str1.includes("reference", 11);//true
const currentStr8 = str1.includes("reference", 12);//false
}

{
// "문자열".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
}

{
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']
}

{
//"문자열".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

// "문자열".chartCodeAt(숫자); 유니코드값
const currentStr5 = str1.chartCodeAt(); //106
const currentStr6 = str1.chartCodeAt("0"); //106
const currentStr7 = str1.chartCodeAt("1"); //97
const currentStr8 = str1.chartCodeAt("2"); //118
}

{
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');       //fasle
const currentStr5 = str1.startsWith();                  //fasle
const currentStr6 = str1.startsWith('');                //true
const currentStr7 = str1.startsWith('reference', 7);    //fasle
const currentStr8 = str1.startsWith('reference', 11);   //true

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