다연이네

[days02] 문자열 메소드 본문

Web/JavaScript

[days02] 문자열 메소드

　다연　 2020. 12. 10. 20:52
반응형

js의 문자열

<script>
 	//var msg =  ' he is called "doonjjun" ';
 	var msg =  "동준이는 \\ 웃\겨 \"doonjjun\" 동준아 그만 자고 시험\
 	공부좀해라";
 	//console.log(msg);
 	alert(msg);
 	console.log(msg.length); //26 
 	
 	// \\하면 \찍힘
 	// \n 개행
 	// \" \' \\ \n \b \t \r 등등
 	//\하고 바로 엔터(스페이스같은거 주지말고)치면 끊어진 것 같지만 한 줄이다. 
</script>

 

 

문자열에서 특정 문자열 찾기

- indexOf()

- search()

두 함수의 차이점 ?
1) indexOf()는 2번째 매개변수 찾을 위치(from)를 줄 수 있고,  search()는 줄 수 없다.
2) search(정규표현식) 사용 가능 

<body>

문자열 입력 <input type="text" value="The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?" id="msg" style="width: 90%" /><br /> 
<div id="demo"></div>


<script>
//문자열 메소드
	var demo = document.getElementById("demo");
	document.getElementById("msg").onkeyup= function() {
		//console.log("클릭~");
		if(event.keyCode==13){ //엔터치면
			//문자열 길이
			var msg = event.srcElement.value;
			demo.innerHTML = "1. 문자열 길이: "+msg.length+"<br>"; 
			var indexOfFirst = msg.indexOf("dog"); //dog 두개 찾게 const에서 var로 바꿈
			demo.innerHTML += "2. dog  위치  : " +indexOfFirst;
			//자바처럼
			//var from = indexOfFirst +1;
			//msg.indexOf('dog', from);
			
			indexOfFirst = msg.lastIndexOf('dog');
			demo.innerHTML += " / " +indexOfFirst+"<br>";
			
			//
			indexOfFirst = msg.search("dog"); //얘도 위치를 찾는다 
			demo.innerHTML += "4. dog  위치  : " +indexOfFirst;
		}
	};
</script>

 

문자열에서 특정 문자수만큼 반환

- substring(start, end)

- substr(start, length)

- slice(start, end)

<script>
	var rrn = "891022-1700001";
	//year, month, day 찾아오기
	//자바: substring 	
	
	//substr(start, length)
	document.write(rrn.substr(0,2)+"<br>"); 
	document.write(rrn.substr(2,2)+"<br>");
	document.write(rrn.substr(4,2)+"<br>");
	 
	 
	 //substring(start, end)
	document.write(rrn.substring(0,2)+"<br>"); 
	document.write(rrn.substring(2,4)+"<br>");
	document.write(rrn.substring(4,6)+"<br>"); 
	
	
	 //slice(start, end) --음수값도 사용 가능
	document.write(rrn.slice(0,2)+"<br>"); 
	document.write(rrn.slice(2,4)+"<br>");
	document.write(rrn.slice(4,6)+"<br>"); 
	
	document.write(rrn.slice(-10, -8)+"<br>"); 
	
</script>

특정 문자열 대체하기(문자열 대체)

- replace('abc', 'xxx');

문자열 합치기

- s1+s2+"<br>"

- s1.concat(" ", s2, "!!!")

 

js의 정규 표현식 / /

<script>

	//String.prototype.xxx= function(){}
	//내가만든 함수 집어넣기 (기억만하고 넘어가기)
		
	
	var s1="        hello  ";
	var s2="world";
	document.write(s1+s2+"<br>"); //문자열 합치기
	document.write(s1.concat(" ", s2, "!!!")+"<br>"); //문자열 합치기 concat
	document.write(s1.trim()+"<br>");
		
		
	var str ="please visit java .... visit visit";
	
	document.write(str.toUpperCase()+"<br>");
    //PLEASE VISIT JAVA .... VISIT VISIT
	document.write(str.toLowerCase()+"<br>");
	//please visit java .... visit visit
	document.write(str.replace("VISIT", "xxxx")+"<br>"); //replace : 대소문자 구별
    //please visit java .... visit visit
	//replace(정규표현식) 대소문자 구분x
	//js 정규표현식 /VISIT/i (문법적인 형식)
	document.write(str.replace(/VISIT/i, "xxxx")+"<br>");  //i라는 flag는 오라클과 같이 대소문자 구분 안하겠다는 의미
	//please xxxx java .... visit visit
    document.write(str.replace(/visit/g, "xxxx")+"<br>");  //g라는 flag는 모든 일치하는 정규표현식 패턴을 찾아 다 바꿈
	//please xxxx java .... xxxx xxxx
	document.write(str.replace("visit", "xxxx")+"<br>"); //첫번째것 하나만 바꿈s
	//please xxxx java .... visit visit
    document.write(str+"<br>"); //원래 str은 변경되지 않음 (replace는 변경한 새로운 문자열을 돌려줌)
	//please visit java .... visit visit
</script>

 

특정 위치의 문자열 찾기 

- str.charAt(0) (str은 변수명 예시)

- srt[0]

ECMAScript 2017 새로 추가된 메소드
- padStart()   => padStart(4,0) 4자리 확보해 앞에 0 

- padEnd()     

<script>
	var str="Hello World~";
	document.write(str.charAt(0)+"<br>"); //H
	document.write(str[0]+"<br>"); //H
	document.write(str.charCodeAt(0)+"<br>"); //H에 해당되는 코드값 72 
	//아스키코드가 아니라 유니코드 (UTF-16) 0~65535 정수
</script>

<script>
	//ECMAScript 2017 새로 추가된 메소드
	// padStart() / padEnd()
	let str = "5"; //const : 상수화
	//str = str.padStart(4,0);//0005(4자리 확보하고)
	str = str.padEnd(4,0);//0005(4자리 확보하고 앞에 0)
	document.write(str);  //5000 (4자리 확보하고 뒤에 0)

</script>

 

var / let / const

let 재선언 불가 재할당 가능
const 재선언 불가 재할당 가능

 

let
let a = 'test'
let a = 'test2' // 불가
a = 'test3'     // 가능

const
const b = 'test'
const b = 'test2' // 불가
b = 'test3'    //불가

 

 

문자열 자르기

data.split(',');

<script>
var data = "배다연, 김동준, 리쯔웨이,   왕취안성";
// 자바라면 String names[] = data.split(",");
var names = data.split(','); //배열[] 안씀
/*
document.write(names[0].trim()+"<br>");
document.write(names[1].trim()+"<br>");
document.write(names[2].trim()+"<br>");
document.write(names[3].trim()+"<br>");
*/

for (var i = 0; i < names.length; i++) {
	document.write(names[i].trim()+"<br>");
}

var names = data.split('');
alert(names.length+"/"+data.length); // 22/22 
//앞에 아무것도 없이 홑따옴표 주니까 하나하나 자르겠다는 의미
//이런 기능이 있다는 것 알고있기

</script>

반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days03] 숫자 입력하면 판별(홀/짝, 수우미양가 등), 합 출력  (0) 2020.12.11
[days03] 문제  (0) 2020.12.11
[days02] js 변수(함수를 변수에 담을때, 지역변수, 전역변수)  (0) 2020.12.10
[days02] js 자료형(data type)  (0) 2020.12.10
[days02] js 연산자  (0) 2020.12.10
'Web/JavaScript' Related Articles more
Comments