문자열 Method

« 2025/03 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

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

번호	기본값	속성	결괏값
1	자바스크립트, 제이쿼리	string 결합	자바스크립트제이쿼리
2	100, 200	number 결합	300
3	모던, 자바스크립트, 핵심	문자열 결합	나는 모던 (modern)자바스크립트 (javascript) 핵심을 배우고 싶다.
4	모던, 자바스크립트, 핵심	템플릿 문자열	나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다

{
    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 : 문자열 길이 구하기 : 반환(숫자)

번호	기본값	속성	결괏값
1	자바스크립트	length	6
2	javascript	length	10

{
    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() : 반환(문자열)

번호	기본값	속성	결괏값
1	javascript	toUpperCase()	JAVASCRIPT
2	JAVASCRIPT	toLowerCase()	javascript

{
    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() : 문자열 공백 제거 : 반환(문자열)

번호	기본값	속성	결괏값
1	' javacript '	trim()	' javacript '

{
    const str1 = "       '    javacript   '      ";
    const currentStr1 = str1.trim();
    document.querySelector(".sample04_R1").innerHTML = currentStr1;
}

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

번호	기본값	속성	결괏값
1	자바스크립트(javascript) 공부	indexOf()	7
2	자바스크립트(javascript) 공부	indexOf('자바스크립트')	0
3	자바스크립트(javascript) 공부	indexOf('제이쿼리')	-1
4	자바스크립트(javascript) 공부	indexOf('a')	8
5	자바스크립트(javascript) 공부	lastIndexOf('a')	10
6	자바스크립트(javascript) 공부	search(/javascript/)	7
7	자바스크립트(javascript) 공부	search(/jquery/)	-1
8	자바스크립트(javascript) 공부	includes('javascript')	true
9	자바스크립트(javascript) 공부	includes('jquery')	false
10	자바스크립트(javascript) 공부	startsWith('자바스크립트')	true
11	자바스크립트(javascript) 공부	endsWith('javascript')	false

{
    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/);     //indexOF와 search의 차이점 -- search는 정규식 표현도 사용 가능
    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;
}

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

번호	기본값	속성	결괏값
1	자바스크립트(javascript) 공부	str.charAt(4)	립
2	자바스크립트(javascript) 공부	charAt()	자

{
    const str = "자바스크립트(javascript) 공부";
    const text1 = str.charAt(4);
    document.querySelector(".sample06_R1").innerHTML = text1;

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

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

번호	기본값	속성	결괏값
1	자바스크립트(javascript) 공부	slice(1, 4)	바스크
2	자바스크립트(javascript) 공부	slice(1)	바스크립트(javascript) 공부
3	자바스크립트(javascript) 공부	slice(3, -1)	크립트(javascript) 공
4	자바스크립트(javascript) 공부	slice(7, -4)	javascript
5	자바스크립트(javascript) 공부	slice(5, 1)	실행 안됨
6	자바스크립트(javascript) 공부	substring(5, 1)	바스크립
7	자바스크립트(javascript) 공부	substr(4, 2)	립트

{
    //slice(시작 인덱스)
    //slice(시작 인덱스, 종료 인덱스)
    //시작 값이 종료 값보다 클 경우 : 결과 값 없음
    //substring() : 시작 값이 종료 값보다 클 경우 : 두 값을 바꿔서 처리
    //substr(시작인덱스, 글자수)const str = "자바스크립트(javascript) 공부";
    const str = "자바스크립트(javascript) 공부";

    const text1 = str.slice(1, 4);
    document.querySelector(".sample07_R1").innerHTML = text1;

    const text2 = str.slice(1);
    document.querySelector(".sample07_R2").innerHTML = text2;

    const text3 = str.slice(3, -1);
    document.querySelector(".sample07_R3").innerHTML = text3;


    //javascript 만 나오게
    // const text4 = str.slice(7, 17);

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

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

    const text4 = str.slice(7, -4);
    document.querySelector(".sample07_R4").innerHTML = text4;

    const text5 = str.slice(5, 1);      //앞자리 수가 더 크면 오류
    document.querySelector(".sample07_R5").innerHTML = '실행 안됨';

    const text6 = str.substring(5, 1);      //(1, 5)로 인식함
    document.querySelector(".sample07_R6").innerHTML = text6;

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

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

번호	기본값	속성	결괏값
1	자바스크립트(javascript) 공부	replace()	자바스크립트(javascript) 스터디
2	img01.jpg	replace('img01.jpg', 'img02.jpg')	img02.jpg
3	010-1234-5678	replace('-', '')	0101234-5678
4	010-1234-5678	replace(/-/g, '')	01012345678
5	010-1234-5678	replace(/-/g, ' ')	010 1234 5678

{
    //replace(문자열, 문자열)
    const str = "자바스크립트(javascript) 공부";
    const text1 = str.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-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;
}

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

번호	기본값	속성	결괏값
1	자바스크립트(javascript) 공부	split('')	자,바,스,크,립,트,(,j,a,v,a,s,c,r,i,p,t,), ,공,부
2	자바스크립트(javascript) 공부	split(' ')	자바스크립트(javascript),공부
3	자바스크립트(javascript) 공부	split(' ').join('/')	자/바/스/크/립/트/(/j/a/v/a/s/c/r/i/p/t/)/ /공/부
4	https://webstory.co.kr/index.html?id=123456&name=web	split('&')	https://webstory.co.kr/index.html?id=123456,name=web
5	https://webstory.co.kr/index.html?id=123456&name=web	split(/&\|\?/)	https://webstory.co.kr/index.html,id=123456,name=web

{
    const str = "자바스크립트(javascript) 공부";
    const text1 = str.split('');
    document.querySelector(".sample09_R1").innerHTML = text1;

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

    const text3 = str.split('').join('/');
    document.querySelector(".sample09_R3").innerHTML = text3;

    const str4 = "https://webstory.co.kr/index.html?id=123456&name=web";
    const text4 = str4.split('&');
    document.querySelector(".sample09_R4").innerHTML = text4;

    const str5 = "https://webstory.co.kr/index.html?id=123456&name=web";
    const text5 = str5.split(/&|\?/);
    document.querySelector(".sample09_R5").innerHTML = text5;
}

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

번호	기본값	속성	결괏값
1	7	padStart(2, '0')	07
2	456	padStart(6, '123')	123456
3	abc	padStart(3, '0')	abc
4	abc	padStart(6)	' abc'
5	7	padEnd(2, '0')	70
6	456	padEnd(6, '123')	456123
7	abc	padEnd(3, '0')	abc
8	abc	padEnd(6)	'abc '

{
    //문자열.padStart(전체길이, 추가 문자열)
    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.padStart(3, '0');
    document.querySelector(".sample10_R7").innerHTML = text7;

    const num8 = "abc";
    const text8 = num8.padEnd(6);
    document.querySelector(".sample10_R8").innerHTML = "'"+text8+    "'";
}

20. 문자열 메서드 : encodeURL() / encodeURLComponent() /decodeURL() / decodeURLComponent()

번호	기본값	속성	결괏값
1	https://webstoryboy.co.kr/자바스크립트.html	encodeURI()	https://webstoryboy.co.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8.html
2	https://webstoryboy.co.kr/자바스크립트.html	encodeURIComponent()	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
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()	https://webstoryboy.co.kr/자바스크립트.html
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()	https://webstoryboy.co.kr/자바스크립트.html

{
    //URI에 한글이 포함되면 사용 할 수 없기 때문에 인코딩을 해줍니다.
    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;
}

Javascript 브라우저 객체 메서드 (0)	2022.04.14
Javscript 수학 객체 메서드 (0)	2022.04.14
Javascript 마우스 이벤트 (0)	2022.02.24
Javascript 이벤트 버블링 / 캡쳐링 (0)	2022.02.23
배열 Method (0)	2022.02.15

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

seop's study seop's study

최근 글

댓글

태그

흔적

티스토리 뷰

문자열 Method

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

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

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

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

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

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

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

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

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

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

20. 문자열 메서드 : encodeURL() / encodeURLComponent() /decodeURL() / decodeURLComponent()

'Javascript' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

seop's study seop's study

최근 글

댓글

태그

흔적

티스토리 뷰

문자열 Method

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

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

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

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

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

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

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

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

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

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

20. 문자열 메서드 : encodeURL() / encodeURLComponent() /decodeURL() / decodeURLComponent()

'Javascript' 카테고리의 다른 글

UP NEXT : Javascript

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역