Top

01. 문자열 : 문자열 결합/ 템플릿 문자열

번호 기본값 속성 리턴값
{
    const str1 = "자바스크립트";
    const str2 = "제이쿼리";

    document.querySelector(".sample01_R1").innerHTML = str1 + str2;

    const num1 = 100;
    const num2 = 200;

    document.querySelector(".sample01_R2").innerHTML = num1 + num2;

    const txt1 = "모던";
    const txt2 = "자바스크립트";
    const txt3 = "핵심";

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

    document.querySelector(".sample01_R4").innerHTML = `나는 ${tem1}(modern) ${tem2}(javascript) ${tem3}을 배우고 싶다`;
}

02. 문자열 속성 : length : 문자열 길이 구하기 : 반환(숫자)

번호 기본값 속성 리턴값
{
    const str1 = "자바스크립트";
    const currentStr1 = str1.length;

    document.querySelector(".sample02_R1").innerHTML = currentStr1;

    const str2 = 100;
    const currentStr2 = str2.length;

    document.querySelector(".sample02_R2").innerHTML = currentStr2;
}

03. 문자열 메서드 : toUpperCase() : 문자열 대문자 변경 : 반환(문자열)
04. 문자열 메서드 : toLowerCase() : 문자열 소문자 변경 : 반환(문자열)

번호 기본값 속성 리턴값
{
    const str1 = "javascript";
    const currentStr1 = str1.toUpperCase();

    document.querySelector(".sample03_R1").innerHTML = currentStr1;

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

    document.querySelector(".sample03_R2").innerHTML = currentStr2;
}

05. 문자열 메서드 : trim() : 문자열 공백 제거 : 반환(문자열)

번호 기본값 속성 리턴값
{
    const str1 = "        'javascript'        ";
    const currentStr1 = str1.trim();

    document.querySelector(".sample04_R1").innerHTML = currentStr1;
}

06. 문자열 메서드 : indexOf() : 문자열 검색 : 반환(숫자)
07. 문자열 메서드 : lastIndexOf() : 문자열 검색 : 반환(숫자)
08. 문자열 메서드 : search() : 문자열 검색 : 반환(숫자)
09. 문자열 메서드 : includes() : 문자열 포함 여부 검색 : 반환(불린)
10. 문자열 메서드 : startsWidth() : 문자열 포함 여부 검색 : 반환(불린)
11. 문자열 메서드 : endWidth() : 문자열 포함 여부 검색 : 반환(불린)

번호 기본값 속성 리턴값
{
    const str = "자바스크립트(javascript) 공부"

    const text1 = str.indexOf("javascript")
    
   document.querySelector(".sample05_R1").innerHTML = text1;        

   const text2 = str.indexOf("자바스크립트")
  
   document.querySelector(".sample05_R2").innerHTML = text2;        

   const text3 = str.indexOf("제이쿼리")
 
   document.querySelector(".sample05_R3").innerHTML = text3;  
   
   const text4 = str.indexOf('a')

 
   document.querySelector(".sample05_R4").innerHTML = text4; 

   const text5 = str.lastIndexOf('a')

  
   document.querySelector(".sample05_R5").innerHTML = text5;        

   const text6 = str.search(/javascript/)

 
   document.querySelector(".sample05_R6").innerHTML = text6; 

   const text7 = str.search(/jqeury/)

 
   document.querySelector(".sample05_R7").innerHTML = text7;  

   const text8 = str.search('javascrip')

  
   document.querySelector(".sample05_R8").innerHTML = text8; 

   const text9 = str.search('jqeury')

  
   document.querySelector(".sample05_R9").innerHTML = text9;  

    const text10 = str.startsWith('자바스크립트')

  
   document.querySelector(".sample05_R10").innerHTML = text10; 

   const text11 = str.endsWith('jqeury')

   
   document.querySelector(".sample05_R11").innerHTML = text11;            
}

12. 문자열 메서드 : charAt() : 지정한 인덱스의 문자를 추출 : 반환(문자열)

번호 기본값 속성 리턴값
{
    const str = "자바스크립트(javascript) 공부";
    const text = str.charAt();

   document.querySelector(".sample06_R1").innerHTML = text;    
}

13. 문자열 메서드 : slice() : 지정한 범위 내 문자열을 추출 : 반환(문자열)
14. 문자열 메서드 : substring() : 지정한 범위 내 문자열을 추출 : 반환(문자열)
15. 문자열 메서드 : substr() : 지정한 범위 내 문자열을 추출 : 반환(문자열)

번호 기본값 속성 리턴값
{
    const str = "자바스크립트(javascript) 공부";

    const text = str.slice(1, 4);

    document.querySelector(".sample07_R1").innerHTML = text;  

    const text2 = str.slice(1);

    document.querySelector(".sample07_R2").innerHTML = text2;     

    const text3 = str.slice(3, -1);

    document.querySelector(".sample07_R3").innerHTML = text3;     

    const text4 = str.slice(7, -4);
    // const text4 = str.slice(-14, -4);

    document.querySelector(".sample07_R4").innerHTML = text4;  
    
    const text5 = str.slice(5, 1);

    document.querySelector(".sample07_R5").innerHTML = "실행 안됨"; 

    const text6 = str.substring(5, 1);

    document.querySelector(".sample07_R6").innerHTML = text6;  

    const text7 = str.substr(4, 2);

    document.querySelector(".sample07_R7").innerHTML = text7;               
}

15. 문자열 메서드 : replace() : 문자열 변경 : 반환(문자열)

번호 기본값 속성 리턴값
{
    const str = "자바스크립트(javascript) 공부";
    const text = str.replace('공부', '스터디');

    document.querySelector(".sample08_R1").innerHTML = text;  

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

    document.querySelector(".sample08_R2").innerHTML = text2;  

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

    document.querySelector(".sample08_R3").innerHTML = text3;  
    
    const str4 = "010-9312-9004";
    const text4 = str4.replace(/-/g, '');

    document.querySelector(".sample08_R4").innerHTML = text4;  

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

    document.querySelector(".sample08_R5").innerHTML = text5;   
}

16. 문자열 메서드 : split() : 문자열 반환 : 반환(문자열)

번호 기본값 속성 리턴값
{
    const str = "자바스크립트(javascript) 공부";
    const text = str.split('');

    document.querySelector(".sample09_R1").innerHTML = text;  
   
    const text2 = str.split(' ');
    document.querySelector(".sample09_R2").innerHTML = text2;  

    const text3 = str.split('').join('/');

    document.querySelector(".sample09_R3").innerHTML = text3;  

    const str4 = "https://webstoryboy.co.kr/main.html?id=1234&name=webs";
    const text4 = str4.split('&');

    document.querySelector(".sample09_R4").innerHTML = text4;  

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

    document.querySelector(".sample09_R5").innerHTML = text5;  
}

18. 문자열 메서드 : padStart() : 문자열 시작 부분에 문자열 추가 : 반환(문자열)
19. 문자열 메서드 : padEnd() : 문자열 끝 부분에 문자열 추가 : 반환(문자열)

번호 기본값 메서드 리턴값
{
const num = "7";
const text = num.padStart(2, '0');
document.querySelector(".sample10_R1").innerHTML = text;

const num2 = "456";
const text2 = num2.padStart(6, '123');
document.querySelector(".sample10_R2").innerHTML = text2;

const num3 = "abc";
const text3 = num3.padStart(3, '0');
document.querySelector(".sample10_R3").innerHTML = text3;

const num4 = "abc";
const text4 = num4.padStart(6);
document.querySelector(".sample10_R4").innerHTML = "<pre>" + text4 + "</pre>";

const num5 = "7";
const text5 = num5.padEnd(2, '0');
document.querySelector(".sample10_R5").innerHTML = text5;

const num6 = "456";
const text6 = num6.padEnd(6, '123');
document.querySelector(".sample10_R6").innerHTML = text6;

const num7 = "abc";
const text7 = num7.padEnd(3, '0');
document.querySelector(".sample10_R7").innerHTML = text7;

const num8 = "abc";
const text8 = num8.padEnd(6);
document.querySelector(".sample10_R8").innerHTML = "<pre>" + text8 + "</pre>";
}

20. 문자열 메서드 : encodeURL() : 문자열을 인코딩 : 반환(문자열)
21. 문자열 메서드 : encodeURLComponent() : 문자열을 인코딩 : 반환(문자열)
22. 문자열 메서드 : decodeURL() : 문자열을 디코딩 : 반환(문자열)
23. 문자열 메서드 : encodeURLComponent() : 문자열을 디코딩 : 반환(문자열)

번호 기본값 속성 리턴값
{
    const text = "https://webstoryboy.co.kr/자바스크립트.html";
    document.querySelector(".sample11_R1").innerHTML = url;

    const text2 = "https://webstoryboy.co.kr/자바스크립트.html";
    document.querySelector(".sample11_R2").innerHTML = url2;

    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);
    document.querySelector(".sample11_R3").innerHTML = url3;
    
    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);
    document.querySelector(".sample11_R4").innerHTML = url4;
}