JavaScript

{
    // 1
    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;

    // 2
    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;

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

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

    // 4
    document.querySelector(".sample01_N4").innerHTML = "4";
    document.querySelector(".sample01_Q4").innerHTML = "모던, 자바스크립트, 핵심"
    document.querySelector(".sample01_M4").innerHTML = "템플릿 문자열";
    // `` 를 쓰면 3번보다 훨씬 출력하기 쉬움, 훨씬 많이 사용됨
    document.querySelector(".sample01_P4").innerHTML = `나는 ${text1}(modern) ${text2}(javascript) ${text3}을 배우고 싶다.`
}

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;

// 앞 뒤 모든 공백 제거
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;

const str1 = "javascript reference";
const currentStr1 = str1.slice(0);
const currentStr2 = str1.slice(1);  // "avascript reference" 출력, j 빠짐
const currentStr3 = str1.slice(2);  // "vascript reference" 출력, ja 빠짐
const currentStr4 = str1.slice(0, 1);  // "j" 출력, 0~1자리 출력
const currentStr5 = str1.slice(0, 2);  // "ja" 출력, 0~2자리 출력
const currentStr6 = str1.slice(0, 3);  // "jav" 출력, 0~3자리 출력
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(1, 4);  // "ava"
const currentStr18 = str1.slice(4, 1);  // ""
const currentStr19 = str1.substring(4, 1);  // "ava"
const currentStr20 = str1.substring(1, 4);  // "ava"

const currentStr21 = str1.substr(0);
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"

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 - join()을 추가해서 배열 괄호[] 없어짐
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 - 글씨 반대로 출력 , 가운데에 슬러시(/) 들어감

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만 바뀐다 --> 전부 바꾸고 싶으면 replaceAll이나 정규식 쓸 것
const currentStr4 = str1.replaceAll("e", "E");  // javascript rEfErEncE
// g : global의 약자, 모든 것을 선택함 / gi : global + 대소문자 구분 X
const currentStr5 = str1.replace(/e/g, "E");  // 정규식 : javascript rEfErEncE
const currentStr6 = str1.replace(/e/gi, "E");  // 정규식(대소문자 구분 X) : javascript rEfErEncE
            
const str2 = "https://www.naver.com/img01.jpg";
const currentStr7 = str2.replace("img01.jpg", "img02.jpg");     // https://www.naver.com/img02.jpg

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

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

const str1 = "javascript";
const currentStr1 = str1.repeat(0);     //아무것도 출력되지 않음
const currentStr2 = str1.repeat(1);     //javascript
const currentStr3 = str1.repeat(2);     //javascriptjavascript

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 : 공백3칸 + 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___ : 456 + 공백3칸

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 : reference는 11부터 시작하기 때문에 0~11 중 아무 숫자나 입력해도 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 : 뒤에서부터 시작해서 처음 나오는 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

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

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

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();      // j를 유니코드로 바꿔서 출력함 = 106
const currentStr6 = str1.charCodeAt("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 (7번째 자리에 reference가 없음)
const currentStr8 = str1.startsWith('reference', 11);   // true (11번째 자리에 reference가 있음)

const currentStr9 = str1.endsWith('reference');         // true
const currentStr10 = str1.endsWith('e');                // true
const currentStr11 = str1.endsWith('refer');            // false
const currentStr12 = str1.endsWith('reference');        // 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