Javascript 레퍼런스

{
    const str1 = "자바스트립트";
    const str2 = "제이쿼리";
    document.querySelector(".sample1_R1").innerHTML = str1 + str2;

    const num1 = 100;
    const num2 = 200;
    document.querySelector(".sample1_R2").innerHTML = num1 + num2;

    const txt1 = "모던";
    const txt2 = "자바스크립트";
    const txt3 = "핵심";
    document.querySelector(".sample1_R3").innerHTML = "나는 " + txt1 + "(modern) " + txt2 + "(javascript) " + txt3 + "을 배우고 싶다.";

    const tem1 = "모던";
    const tem2 = "자바스크립트";
    const tem3 = "핵심";
    document.querySelector(".sample1_R4").innerHTML = `나는 ${txt1}(modern) ${txt2}(javascript) ${txt3}을 배우고 싶다.`;
}

{
    const str1 = "자바스크립트"
    const currenStr1 = str1.length;

    const str2 = "javascript"
    const currenStr2 = str2.length;
}

{
    // 03. 문자열 메서드 : toUpperCase() : 문자열 대문자 변경 : 반환(문자열)
    const str1 = "javascript"
    const currenStr1 = str1.toUpperCase();

    // 04. 문자열 메서드 : toLowerCase() : 문자열 소문자 변경 : 반환(문자열)
    const str2 = "JAVASCRIPT"
    const currenStr2 = str2.toLowerCase();
}

{
    //05. 문자열 메서드 : trim() : 문자열 공백 제거 : 반환(문자열)
    const str1 = "  'javascript'  "
    const currenStr1 = str1.trim();                            
}

{
    const str = "자바스크립트(javascript) 공부";

//반환(숫자)
    // 06. 문자열 메서드 : indexOf() : 문자열 검색 : 반환(숫자)
    const text1 = str.indexOf("javascript");
    const text2 = str.indexOf("자바스크립트");
    const text3 = str.indexOf("제이쿼리");
    const text4 = str.indexOf('a');

    // 07. 문자열 메서드 : lastIndexOf() : 문자열 검색 : 반환(숫자)
    const text5 = str.lastIndexOf('a');

    // 08. 문자열 메서드 : search() : 문자열 검색 : 반환(숫자)
    //정규식 표현 - search는 정규식 표현(//)을 사용할 수 있다 /는 정규식 표현을 썼다!
    const text6 = str.search(/javascript/);
    const text7 = str.search(/jaquery/);
    
//반환(Boolean)
    // 09. 문자열 메서드 : includes() : 문자열 포함 여부 검색 : 반환(Boolean)
    const text8 = str.includes("javascript");
    const text9 = str.includes("jquery");

    // 10. 문자열 메서드 : startWidth() : 문자열 포함 여부 검색 : 반환(Boolean)
    const text10 = str.startsWith("자바스크립트");

    // 11. 문자열 메서드 : endWidth() : 문자열 포함 여부 검색 : 반환(Boolean)
    const text11 = str.endsWith("javascript");
}

{   
    // 12. 문자열 메서드 : charAt() : 지정한 인덱스의 문자를 추출 : 반환(문자열)
    const str = "자바스크립트(javascript) 공부";
    
    const text1 = str.charAt(4);
    const text2 = str.charAt();

    //index를 제공하지 않으면 기본값은 0
}

 {
    const str = "자바스크립트(javascript) 공부";

    // 13. 문자열 메서드 : slice() : 지정한 범위 내 문자열을 추출 : 반환(문자열)
    //slice(시작 인덱스)
    //slice(시작 인덱스, 종료 인덱스) | 종료 인덱스의 문자열은 반환X
    //시작 값이 정료 값보다 클 경우 : 결과 값 없음
    const text = str.slice(1, 4);
    const text2 = str.slice(1);
    const text3 = str.slice(3, -1);
    const text4 = str.slice(-14, 17); // (7, 17) / (7, -4) / (-14, -4)
    const text5 = str.slice(5, 1);  //  뒷자리 수보다 앞 자리가 크면 안됨

    // 14. 문자열 메서드 : substring() : 지정한 범위 내 문자열을 추출 : 반환(문자열)
    //substring() : 시작 값이 종료 값보다 클 경우 : 두 값을 바꿔서 처리
    const text6 = str.substring(5, 1);  //앞자리와 뒷자리 수를 바꿔줌
    
    // 15. 문자열 메서드 : substr() : 지정한 범위 내 문자열을 추출 : 반환(문자열)
    //substr(시작인덱스, 글자수) | 시작한 인덱스부터 지정한 글자수 추출
    const text7 = str.substr(4, 2);
}

{
    const str = "자바스크립트(javascript) 공부";

    // 16. 문자열 메서드 : replace() : 문자열 변경 : 반환(문자열)
    //replace(문자열,문자열) = replace(변경될 문자,변경할 문자)
    const text = str.replace('공부','스터디')

    const str2 = "img01.jpg";
    const text2 = str2.replace('img01.jpg','img02.jpg')

    const str3 = "010-9312-9004";
    const text3 = str3.replace('-','')

    //정규식 표현
    const str4 = "010-9312-9004";
    const text4 = str4.replace(/-/g,'') 

    const str5 = "010-9312-9004";
    const text5 = str5.replace(/-/g,' ') 
}

{
    // 17. 문자열 메서드 : split() : 문자열 반환 : 반환(문자열)
    //split() 메서드는 String(문자열) 객체를 지정한 구분자를 이용하여 문자열을 나눈다.
    //반환값 : 주어진 문자열을 separator마다 끊은 부분 문자열을 담은 배열.
    const str = "자바스크립트(javascript) 공부"; //,를 붙이는게 아닌 각각의 문자열을 반환한 것
    const text = str.split('');
    const text2 = str.split(' ');
    const text3 = str.split('').join('/');
    //const text = str.split(); //자바스크립트(javascript) 공부 ..라는 배열을 반환 

    const str4 ="https://webstoryboy.co.kr/main.html?id=1234&name=weds"
    const arrText4 = str4.split('&');   //(https://~=1234)과 (name=weds)를 반환

    const str5 ="https://webstoryboy.co.kr/main.html?id=1234&name=weds"
    const arrText5 = str5.split(/&|\?/);
}

{
    // 18. 문자열 메서드 : padStart() : 문자열 시작 부분에 문자열 추가 : 반환(문자열)
    //문자열.padStart(전체길이, 추가 문자열)
    const num = "7";
    const text = num.padStart(2,0)

    const num2 = "456";
    const text2 = num2.padStart(6,123)

    const num3 = "abc";
    const text3 = num3.padStart(3,'0');

    const num4 = "abc";
    const text4 = num4.padStart(6);

    // 19. 문자열 메서드 : padEnd() : 문자열 끝 부분에 문자열 추가 : 반환(문자열)                    
    const num5 = "7";
    const text5 = num5.padEnd(2,'0');

    const num6 = "456";
    const text6 = num6.padEnd(6,'123');

    const num7 = "abc";
    const text7 = num7.padEnd(3,'0');

    const num8 = "abc";
    const text8 = num8.padEnd(6);
}

{
    //url에 한글이 포함되면 사용 할 수 없기 때문에 인코딩을 해줍니다.
    *인코딩:사용자가 입력한 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것

    // 20. 문자열 메서드 : encodeURL() : 문자열을 인코딩 : 반환(문자열)
    const text = "https://webstoryboy.co.kr/자바스크립트.html";
    const url = encodeURI(text);

    // 21. 문자열 메서드 : encodeURLComponent() : 문자열을 인코딩 : 반환(문자열)
    const text2 = "https://webstoryboy.co.kr/자바스크립트.html";
    const url2 = encodeURIComponent(text2)

    // 22. 문자열 메서드 : decodeURL() : 문자열을 디코딩 : 반환(문자열)
    const text3 = "https://webstoryboy.co.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8.html";
    const url3 = decodeURI(text3);

    // 23. 문자열 메서드 : decodeURLComponent() : 문자열을 디코딩 : 반환(문자열)
    const text4 = "https%3A%2F%2Fwebstoryboy.co.kr%2F%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8.html";
    const url4 = decodeURIComponent(text4);
}