- 01. 문자열 : 문자열 결합 / 템플릿 문자열
- 02. 문자열 속성 : length : 문자열 길이 구하기 : 반환(숫자)
- 03. 문자열 메서드 : toUpperCase() : 문자열 대문자 변경 : 반환(문자열)
- 04. 문자열 메서드 : toLowerCase() : 문자열 소문자 변경 : 반환(문자열)
- 05. 문자열 메서드 : trim() : 문자열 공백 제거 : 반환(문자열)
- 06. 문자열 메서드 : indexOf : 문자열 검색 : 반환(숫자)
- 07. 문자열 메서드 : lastIndexOf() : 문자열 검색 : 반환(숫자)
- 08. 문자열 메서드 : search() : 문자열 검색 : 반환(숫자)
- 09. 문자열 메서드 : includes() : 문자열 포함 여부 검색 : 반환(불린)
- 10. 문자열 메서드 : startsWidth() : 문자열 포함 여부 검색 : 반환(불린)
- 11. 문자열 메서드 : endsWidth() : 문자열 포함 여부 검색 : 반환(불린)
- 12. 문자열 메서드 : charAt() : 지정한 인덱스의 문자를 추출 : 반환(문자열)
- 13. 문자열 메서드 : slice() : 지정한 범위 내 문자열을 추출 : 반환(문자열)
- 14. 문자열 메서드 : substring() : 지정한 범위 내 문자열을 추출 : 반환(문자열)
- 15. 문자열 메서드 : substr() : 지정한 범위 내 문자열을 추출 : 반환(문자열)
- 16. 문자열 메서드 : replace() : 문자열 변경 : 반환(문자열)
- 16. 문자열 메서드 : split() : 문자열 반환 : 반환(문자열)
- 17. 문자열 메서드 : padStart() : 문자열 시작 부분에 문자열 추가 : 반환(문자열)
- 18. 문자열 메서드 : padEnd() : 문자열 끝 부분에 문자열 추가 : 반환(문자열)
- 19. 문자열 메서드 : encodeURL() : 문자열을 인코딩 : 반환(문자열)
- 20. 문자열 메서드 : encodeURLComponent() : 문자열을 인코딩 : 반환(문자열)
- 21. 문자열 메서드 : decodeURL() : 문자열을 디코딩 : 반환(문자열)
- 22. 문자열 메서드 : decodeURLComponent() : 문자열을 디코딩 : 반환(문자열)
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);
}