Top

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

번호 기본값 메서드 리턴값
1 자바스크립트, 제이쿼리 string 결합
2 100, 200 number 결합
3 모던, 자바스크립트, 핵심 문자열 결합
4 모던, 자바스크립트, 핵심 문자열 결합
{
    const str1 = "자바스크립트";
    const str2 = "제이쿼리";

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

    const num1 = 100;
    const num2 = 200;

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

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

    document.querySelector(".sample1_P3").innerHTML = "나는 " + txt1 + "(modern) " + txt2 + "(javascript) " + txt3 + "을 배우고 싶다.";

    document.querySelector(".sample1_P4").innerHTML = `나는 ${txt1}(modern) ${txt2}(javascript) ${txt3}을 배우고 싶다.`;
}

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

번호 기본값 메서드 리턴값
1 자바스크립트 length
2 javascript length
{
    const str1 = "자바스크립트";
    const currentStr1 = str1.length;

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

03. 문자열 메서드 : toUpperCase() / toLowerCase() : 반환(문자열)

번호 기본값 메서드 리턴값
1 javascript toUpperCase()
2 JAVASCRIPT toUpperCase()
{
    const str1 = "javascript";
    const currentStr1 = str1.toUpperCase();

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

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

번호 기본값 메서드 리턴값
1 'javascript' trim()
{
    const str = "       ' javascript '          ";
    const currentStr = str.trim();
}

05. 문자열 메서드 : indexOf / lastIndexOf() / search() / includes() / startsWidth() / endsWidth() : 문자열 검색

번호 기본값 메서드 리턴값
1 자바스크립트(javascript) 공부 indexOf('javascript')
2 자바스크립트(javascript) 공부 indexOf('자바스크립트')
3 자바스크립트(javascript) 공부 indexOf('제이쿼리')
4 자바스크립트(javascript) 공부 indexOf('a')
5 자바스크립트(javascript) 공부 lastIndexOf('a')
6 자바스크립트(javascript) 공부 search(/javascript/)
7 자바스크립트(javascript) 공부 search(/jquery/)
8 자바스크립트(javascript) 공부 includes('javascript')
9 자바스크립트(javascript) 공부 includes('jquery')
10 자바스크립트(javascript) 공부 startsWith('자바스크립트')
11 자바스크립트(javascript) 공부 endsWith('javascript')
{
    const str = "자바스크립트(javascript) 공부";

    const text1 = str.indexOf("javascript");

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

    const text3 = str.indexOf("제이쿼리");

    const text4 = str.indexOf('a');

    const text5 = str.lastIndexOf('a');

    const text6 = str.search(/javascript/);

    const text7 = str.search(/jquery/);

    const text8 = str.includes("javascript");

    const text9 = str.includes("jquery");

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

    const text11 = str.endsWith("javascript");
}

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

번호 기본값 메서드 리턴값
1 자바스크립트(javascript) 공부 charAt(4)
2 자바스크립트(javascript) 공부 charAt()
{
    const str = "자바스크립트(javascript) 공부";

    const text1 = str.charAt(4);
    const text2 = str.charAt();
}

07. 문자열 메서드 : slice() / substring() / substr(): 지정한 인덱스의 문자를 추출 : 반환(문자열)

번호 기본값 메서드 리턴값
1 자바스크립트(javascript) 공부 slice(1,4)
2 자바스크립트(javascript) 공부 slice(1)
3 자바스크립트(javascript) 공부 slice(3, -1)
4 자바스크립트(javascript) 공부 slice(7, 17)
5 자바스크립트(javascript) 공부 slice(5,1)
6 자바스크립트(javascript) 공부 substring(5, 1)
7 자바스크립트(javascript) 공부 substr(4, 2)
{
    //slice(시작 인덱스)
    //slice(시작 인덱스, 종료 인덱스)
    //시작 값이 종료 값 보다 클 경우 : 결과 값 없음
    //substring() : 시작 값이 종료 값 보다 클 경우 : 두 값을 바꿔서 처리 (에러 방지)
    //substr(시작인덱스, 글자수)
    const str = "자바스크립트(javascript) 공부"

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

    const text2 = str.slice(1);

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

    //const text4 = str.slice(7, 17);
    //const text4 = str.slice(7, -4);
    //const text4 = str.slice(-14, -4);
    //const text4 = str.slice(str.indexOf("j"), str.indexOf(")"));
    const text4 = str.slice(-14, 17);

    const text5 = str.slice(5, 1);  //앞 매개변수는 뒷 매개변수보다 작아야한다.

    const text6 = str.substring(5, 1);  //해당 버그를 방지한다.

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

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

번호 기본값 메서드 리턴값
1 자바스크립트(javascript) 공부 replace('공부','스터디')
2 img01.jpg replace('img01.jpg','img02.jpg')
3 010-9312-9004 replace('-', '')
4 010-9312-9004 replace(/-/g, '')
5 010-9312-9005 replace(/-/g, ' ')
{
    const str = "자바스크립트(javascript) 공부";
    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-9005";
    const text5 = str5.replace(/-/g, ' ');
}

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

번호 기본값 메서드 리턴값
1 자바스크립트(javascript) 공부 split('')
2 자바스크립트(javascript) 공부 split('')
3 자바스크립트(javascript) 공부 split('').join('/')
4 http://webstoryboy.co.kr/main.html?id=1234&name=webs split('&')
5 http://webstoryboy.co.kr/main.html?id=1235&name=webs split(/&|\?/)
{
    const str = "자바스크립트(javascript) 공부";
    const text = str.split('');

    const text2 = str.split(' ');

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

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

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

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

번호 기본값 메서드 리턴값
1 7 padStart(2, '0')
2 456 padStart(6, '123')
3 abc padStart(3, '0')
4 abc padStart(6)
5 7 padEnd(2, '0')
6 456 padEnd(6, '123')
7 abc padEnd(3, '0')
8 abc padEnd(6)
{
    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);

    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);
}

11. 문자열 메서드 : encodeURL() : 문자열을 인코딩 : 반환(문자열)

번호 기본값 메서드 리턴값
1 https://webstoryboy.co.kr/자바스크립트.html encodeURI()
2 https://webstoryboy.co.kr/자바스크립트.html encodeURIComponent()
3 https://webstoryboy.co.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8.html decodeURI()
4 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 decodeURIComponent()
{
    const text = "https://webstoryboy.co.kr/자바스크립트.html";
    const url = encodeURI(text);

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

    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);
    
    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);
}