Javascript 레퍼런스

문자열 객체

  1. 문자열 메서드 : 문자열 결합 / 템플릿 문자열
  2. 문자열 속성 : length : 문자열 길이 구하기 : 반환(숫자)
  3. 문자열 메서드 : toUpperCase() : 문자열 대문자 변경하기 : 반환(문자열)
  4. 문자열 메서드 : toLowerCase() : 문자열 소문자 변경하기 : 반환(문자열)
  5. 문자열 메서드 : trim() : 문자열 공백 제거하기 : 반환(문자열)
  6. 문자열 메서드 : indexOf() : 문자열 검색하기 : 반환(숫자)
  7. 문자열 메서드 : lastIndexOf() : 문자열 검색하기 : 반환(숫자)
  8. 문자열 메서드 : search() : 문자열 검색하기 : 반환(숫자)
  9. 문자열 메서드 : match() : 문자열 검색하기 : 반환(배열)
  10. 문자열 메서드 : includes() : 문자열 포함 여부 : 반환(불린)
  11. 문자열 메서드 : startWith() : 문자열 포함 여부 : 반환(불린)
  12. 문자열 메서드 : endWith() : 문자열 포함 여부 : 반환(불린)
  13. 문자열 메서드 : charAt() : 지정한 인덱스의 문자를 추출 : 반환(문자) sample
  14. 문자열 메서드 : slice() : 지정한 범위 내 문자열을 추출 : 반환(문자열)
  15. 문자열 메서드 : subString() : 지정한 범위 내 문자열을 추출 : 반환(문자열)
  16. 문자열 메서드 : substr() : 지정한 범위 내 문자열을 추출 : 반환(문자열)
  17. 문자열 메서드 : replace() : 문자열 변경 : 반환(문자열)
  18. 문자열 메서드 : split() : 문자열 반환 : 반환(문자열)
  19. 문자열 메서드 : padStart() : 문자열 시작 부분에 문자열 추가 : 반환(문자열)
  20. 문자열 메서드 : padEnd() : 문자열 끝 부분에 문자열 추가 : 반환(문자열)
  21. 문자열 메서드 : encodeURI() : 문자열 인코딩 : 반환(문자열)
  22. 문자열 메서드 : encodeURIComponent() : 문자열 인코딩 : 반환(문자열)
  23. 문자열 메서드 : decodeURI() : 문자열 디코딩 : 반환(문자열)
  24. 문자열 메서드 : decodeURIComponent() : 문자열 디코딩 : 반환(문자열)

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 + "(javescript) " + 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_Q1").innerHTML = str1;
    document.querySelector(".sample02_R1").innerHTML = currentStr1;

    const str2 = "javascript";
    const currentStr2 = str2.length;

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

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

번호 기본값 메서드 결과값 
{
    const str1 = "javascript";
    const currentStr1 = str1.toUpperCase();

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

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

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

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

번호 기본값 메서드 결과값 
{
    const str1 = "      'javascript'      ";
    const currentStr1 = str1.trim();

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

05. 문자열 메서드 : indexOf() / lastIndexOf() / search() : 문자열 검색하기 : 반환(숫자)

번호 기본값 메서드 결과값 
{
    //문자열의 인덱스 위치를 반환, 문자열의 첫 번째 문자의 위치는 0, 다섯번째는 4
    //문자열이 없는 경우는 -1
    //영문 대소문자 구별하여 검색
    //search는 정규식 표현으로 검색
    //match는 배열로 표현되고 없으면 아무것도 안나옴
    //includes는 포함된걸 찾기 때문에 true, false로 나옴
    //starstWith는 처음에 있는지 유무판단
    //endsWith는 끝에 있는지 유무판단

    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(/jquery/);
    document.querySelector(".sample05_R7").innerHTML = text7;

    const text8 = str.match(/javascript/);
    document.querySelector(".sample05_R8").innerHTML = text8;

    const text9 = str.match(/jquery/);
    document.querySelector(".sample05_R9").innerHTML = text9;

    const text10 = str.includes("javascript");
    document.querySelector(".sample05_R10").innerHTML = text10;

    const text11 = str.includes("jquery");
    document.querySelector(".sample05_R11").innerHTML = text11;

    const text12 = str.startsWith("자바스크립트");
    document.querySelector(".sample05_R12").innerHTML = text12;

    const text13 = str.endsWith("javascript");
    document.querySelector(".sample05_R13").innerHTML = text13;
}

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

번호 기본값 메서드 결과값 
{
    const str = "자바스크립트(javascript) 공부";

    const text = str.charAt(4);
    document.querySelector(".sample06_R1").innerHTML = text;

    const text2 = str.charAt();
    document.querySelector(".sample06_R2").innerHTML = text2;
}

07. 문자열 메서드 : slice() / subString() / substr() : 지정한 범위 내 문자열을 추출 : 반환(문자열)

번호 기본값 메서드 결과값 
{
    //slice(시작인덱스);
    //slice(시작인덱스, 종료인덱스);
    //slice() : 시작 값이 종료 값보다 클 경우 : 결과 값 없음
    //subString() : 시작 값이 종료 값보다 클 경우 : 두 값을 바꿔서 처리 --> 데이터 값을 받아올때 시작값이 큰 경우가 발생할 때 사용
    //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(-14, -4);
    document.querySelector(".sample07_R4").innerHTML = text4;

    const text5 = str.slice(5, 1);
    document.querySelector(".sample07_R5").innerHTML = text5
    
    const text6 = str.substring(5, 1);
    document.querySelector(".sample07_R6").innerHTML = text6;

    const text7 = str.substr(4, 5);
    document.querySelector(".sample07_R7").innerHTML = text7;
}

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

번호 기본값 메서드 결과값 
{
    const str1 = "자바스크립트(javascript) 공부";
    const text1 = str1.replace("공부", "스터디");

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

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

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

    const str3 = "010-2732-9233";
    const text3 = str3.replace('-', '');

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

    const str4 = "010-2732-9233";
    const text4 = str4.replace(/-/g, '');

    document.querySelector(".sample08_R4").innerHTML = text4;
    
    const str5 = "010-2732-9233";
    const text5 = str5.replace(/-/g, ' ');

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

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

번호 기본값 메서드 결과값 
{
    const str1 = "자바스크립트(javascript) 공부";
    const text1 = str1.split('');

    document.querySelector(".sample09_R1").innerHTML = text1;

    const str2 = "자바스크립트(javascript) 공부";
    const text2 = str2.split(' ');


    const str3 = "자바스크립트(javascript) 공부";
    const text3 = str3.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=1235&name=webs";
    const text5 = str5.split(/&|\?/);

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

10. padStart() / padEnd() : 문자열 시작/끝 부분에 문자열 추가 : 반환(문자열)

번호 기본값 메서드 결과값 
{
    //문자열.padStart/padEnd(전체길이, 추가 문자열)

    const num1 = "7";
    const text1 = num1.padStart(2, "0");

    document.querySelector(".sample10_R1").innerHTML = text1;

    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 = text4;

    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 = text8;
}

11. 문자열 메서드 : encodeURI() / encodeURIComponent() / decodeURI() / decodeURIComponent() : 문자열 인코딩/디코딩 : 반환(문자열)

번호 기본값 메서드 결과값 
{
    //URI에 한글이 포함되면 사용할 수 없기 때문에 인코딩을 해줍니다.
    //encodeURI와 encodeURIComponent의 차이는 이스케이프 처리를 실행하는 문자의 종류에 차이가 있다.
    //이스케이프 처리되지 않는 문자 : / ? & = + @ ; , #

    const text1 = "https://kdong1224.github.io/닷홈21.html";
    const url1 = encodeURI(text1);

    document.querySelector(".sample11_R1").innerHTML = url1;

    const text2 = "https://kdong1224.github.io/닷홈21.html";
    const url2 = encodeURIComponent(text2);

    document.querySelector(".sample11_R2").innerHTML = url2;

    const text3 = "https://kdong1224.github.io/%EB%8B%B7%ED%99%8821.html";
    const url3 = decodeURI(text3);

    document.querySelector(".sample11_R3").innerHTML = url3;

    const text4 = "https%3A%2F%2Fkdong1224.github.io%2F%EB%8B%B7%ED%99%8821.html";
    const url4 = decodeURIComponent(text4);

    document.querySelector(".sample11_R4").innerHTML = url4;
}