Javascript

// 01
const str1 = "자바스크립트";
const str2 = "제이쿼리";

document.querySelector(".sample01_N1").innerHTML = "1";
document.querySelector(".sample01_Q1").innerHTML = "자바스크립트, 제이쿼리";
document.querySelector(".sample01_M1").innerHTML = "문자열 결합";
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}(mordern) ${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 = 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
const str1 = "     javascript       ";
const currentStr = str.trim();

document.querySelector(".sample03_N1").innerHTML = "1";
document.querySelector(".sample03_Q1").innerHTML = str1;
document.querySelector(".sample03_M1").innerHTML = "trim()";
document.querySelector(".sample03_P1").innerHTML = 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
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
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
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
const currentStr6 = str1.replace(/e/gi, "E"); // javascript rEfErEncE

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

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

// 07
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
const str1 = "javascript";
const currentStr1 = str1.repeat(0); // ''
const currentStr2 = str1.repeat(1); // 'javascript'
const currentStr3 = str1.repeat(2); // 'javascriptjavascript'

// 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   ' 

// 10
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
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
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
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/g); // reference
const currentStr5 = str1.match(/Reference/); // null
const currentStr6 = str1.match(/Reference/gi); // 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

const currentStr5 = str1.charAt(); // 106
const currentStr6 = str1.charAt("0"); // 106
const currentStr7 = str1.charCodeAt("1"); // 97
const currentStr8 = str1.charCodeAt("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'); // 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