- 01. 문자열 : 문자열 결합 / 템플릿 문자열
- 02. 문자열 속성 : length : 문자열 길이 구하기 : 반환(숫자)
- 03. 문자열 매서드 : toUpperCase() : 문자열 대문자 변경 : 반환(문자열)
- 04. 문자열 매서드 : toLowerCase() : 문자열 소문자 변경 : 반환(문자열)
- 05. 문자열 매서드 : trim() : 문자열 공백 : 반환(문자열)
- 06. 문자열 매서드 : indexOf() : 문자열 검색 : 반환(숫자)
- 07. 문자열 매서드 : lastIndexOf() : 문자열 검색 : 반환(숫자)
- 08. 문자열 매서드 : search() : 문자열 검색 : 반환(숫자)
- 09. 문자열 매서드 : includes() : 문자열 포함 여부 검색 : 반환(불린)
- 10. 문자열 매서드 : startsWidth() : 문자열 포함 여부 검색 : 반환(불린)
- 11. 문자열 매서드 : endWidth() : 문자열 포함 여부 검색 : 반환(불린)
- 12. 문자열 매서드 : charAt() : 지정한 인덱스읭 문자를 추출 : 반환(문자열)
- 13. 문자열 매서드 : slice() : 지정한 범위 내 문자열을 추출 : 반환(문자열)
- 14. 문자열 매서드 : substring() : 지정한 범위 내 문자열을 추출 : 반환(문자열)
- 15. 문자열 매서드 : substr() : 지정한 범위 내 문자열을 추출 : 반환(문자열)
- 16. 문자열 매서드 : repalce() : 문자열 변경 : 반환(문자열)
- 17. 문자열 매서드 : split() : 문자열 반환 : 반환(문자열)
- 18. 문자열 매서드 : padStart() : 문자열 시작부분에 문자열 추가 : 반환(문자열)
- 19. 문자열 매서드 : padEnd() : 문자열 끝부분에 문자열 추가 : 반환(문자열)
- 20. 문자열 매서드 : encodeURL() : 문자열을 인코딩 : 반환(문자열)
- 21. 문자열 매서드 : encodeURLComponent() : 문자열을 인코딩 : 반환(문자열)
- 22. 문자열 매서드 : encodeURL() : 문자열을 디코딩 : 반환(문자열)
- 23. 문자열 매서드 : decodeURLComponent() : 문자열을 디코딩 : 반환(문자열)
01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자)
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
{
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 + "(mordern)" + txt2 + "(javascript)" + txt3 +"을 배우고 싶다.";
const tem1 = "모던";
const tem2 = "자바스크립트";
const tem3 = "핵심";
document.querySelector(".sample01_R4").innerHTML = `나는 ${tem1}(mordern) ${tem2}(javasript) ${tem3}을 배우고 싶다.`;
}
02. 문자열 속성 : length : 문자열 길이 구하기 : 반환(숫자)
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
{
const str1 = "자바스크립트";
const currentStr1 = str1.length
document.querySelector(".sample02_R1").innerHTML = currentStr1;
const str2 = "javascript";
const currentStr2 = str2.length
document.querySelector(".sample02_R2").innerHTML = currentStr2;
}
03. 문자열 매서드 : toUpperCase() / 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;
}
04. 문자열 매서드 : trim() : 문자열 공백 : 반환(문자열)
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
{
const str1 = " 'javascript' ";
const currentStr1 = str1.trim();
document.querySelector(".sample04_R1").innerHTML = currentStr1;
}
05. 문자열 매서드 : indexOf()/ lastIndexOf()/ search()/ includes()/ startsWidth()/ 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(/jquery/);
document.querySelector(".sample05_R7").innerHTML = text7;
const text8 = str.includes("javascript");
document.querySelector(".sample05_R8").innerHTML = text8;
const text9 = str.includes("jquery");
document.querySelector(".sample05_R9").innerHTML = text9;
const text10 = str.startsWith("자바스크립트");
document.querySelector(".sample05_R10").innerHTML = text10;
const text11 = str.endsWith("javascript");
document.querySelector(".sample05_R11").innerHTML = text11;
}
06. 문자열 매서드 : charAt() : 지정한 인덱스읭 문자를 추출 : 반환(문자열)
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
{
const str = "자바스크립트(javascript) 공부"
const text1 = str.charAt(4);
document.querySelector(".sample06_M1").innerHTML = "charAt(4)"
const text2 = str.charAt()
document.querySelector(".sample06_M2").innerHTML = "charAt()"
}
07. 문자열 매서드 : 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(7, 17);
// const text4 = str.slice(7, -4);
// const text4 = str.slice(-14, -4);
// const text4 = str.slice(-14, 17);
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;
}
08. 문자열 매서드 : repalce() : 문자열 변경 : 반환(문자열)
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
{
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-1234-5678";
const text3 = str3.replace('-','');
document.querySelector(".sample08_R3").innerHTML = text3;
const str4 = "010-1234-5678";
const text4 = str4.replace(/-/g,'');
document.querySelector(".sample08_R4").innerHTML = text4;
const str5 = "010-1234-5678";
const text5 = str5.replace(/-/g,' ');
document.querySelector(".sample08_R5").innerHTML = text5;
}
09. 문자열 매서드 : 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://dnwls7738.github.io/webs_class/?id =1234&name=webs";
const text4 = str4.split('&');
document.querySelector(".sample09_R4").innerHTML = text4;
const str5 = "https://dnwls7738.github.io/webs_class/?id =1234&name=webs";
const text5 = str5.split(/&|\?/);
document.querySelector(".sample09_R5").innerHTML = text5;
}
10. 문자열 매서드 : padStart() / 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 = "'"+ 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. 문자열 매서드 : encodeURL()/ encodeURL()/ decodeURLComponent() : 문자열을 디코딩 : 반환(문자열)
번호 | 기본값 | 메서드 | 결괏값 |
---|---|---|---|
{
const text = "https://webstoryboy.co.kr/자바스크립트.html";
const url = encodeURI(text);
document.querySelector(".sample11_R1").innerHTML = url;
const text2 = "https://webstoryboy.co.kr/자바스크립트.html";
const url2 = encodeURIComponent(text2);
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;
}