WEB/JavaScript

[JavaScript] JS String(문자열) 메소드 알아보기.

2021-04-04

자바스크립트에서 문자열을 다루는 몇 가지 메서드가 존재하는데, 오늘은 문자열(String)을 다루는 메서드에 대하여 알아보자.

- length

length 변수는 문자열의 총 길이를 확인할 수 있는 메소드로써 공백 문자도 하나의 문자로 인식에 동작한다. 아래의 예제 코드를 보자.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"> 
	
	var text = "Hello World Hello everyone!"
	console.log(text.length) // 문자열길이 27 출력

</script>
</head>
<body>
Hello World

</body>
</html>

예제 코드의 text는 문자열길이를 확인하기 위해 length 메서드로 콘솔 창에 출력해 보면 27이 출력되는 것을 확인할 수 있다.

- indexOf("문자열")

indexOf는 매개값으로 넣어준 문자열이 포함되어 있는지 확인한 후 해당 문자열의 시작 위치를 리턴한다. 아래의 예제를 보자.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"> 
	
	var text = "Hello World Hello everyone!"
	console.log(text.indexOf("Hello")) // 0번째에 위치해 있다.

</script>
</head>
<body>
Hello World

</body>
</html>

text에는 두개의 Hello가 포함되어 있는데, indexOf 메서드는 문자열 앞에서부터 인식이 되기 때문에 가장 첫 번째에 있는 Hello의 위치가 리턴된다.

만약에 가장 뒤에 있는 Hello 문자열을 확인하고 싶으면, lastIndexOf("문자열") 메소드를 사용하면 된다.

- substring()

substring 주어진 문자열의 특정부분만 선택해 출력할 수 있게 도와준다. 매개 값으로는 추출하고자 하는 문자열의 시작 위치와 끝 위치 두 가지를 받는다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"> 
	
	var text = "Hello World Hello everyone!"
	console.log(text.substring(6,11)) // world

</script>
</head>
<body>
Hello World

</body>
</html>

-replace("기존의 문자열","새로운 문자열")

replace 기존의 문자열을 새로운 문자열로 치환해주는 역할을 해준다, 아래의 예제를 보자,

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"> 
	
	var text = "Hello World Hello everyone!"
	console.log(text.replace("Hello", "Hi")) // Hi World Hello everyone!

</script>
</head>
<body>
Hello World

</body>
</html>

text의 기존의 Hello를 Hi라는 문자열로 변경하고자 해당 메서드를 사용했다. 여기서 주의할 점은 replace를 사용한다고 해서 기존의 모든 Hello가 변경되는 것이 아닌 가장 첫 번째에 있는 Hello만 변경된다는 점이다.

만약에 기존의 문자열을 모두 변경하고 싶으면, 정규식을 사용하면 되는데, 아래와 같이 기존 문자열에 입력해주면 된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"> 
	
	var text = "Hello World Hello everyone!"
	console.log(text.replace(/Hello/g, "Hi")) // Hi World Hi everyone!

</script>
</head>
<body>
Hello World

</body>
</html>

이후 브라우저 콘솔창에 출력되는 문자열을 확인하면 Hello가 전부 Hi로 변경되는 것을 확인할 수 있다.

저작자표시 비영리

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

[JavaScript] JS 올림/내림 반올림 메소드 알아보기 Math (0)	2021.04.06
[JavaScript] JS String(문자열) 대 / 소 문자 변환 방법 (0)	2021.04.05
[JavaScript] JS Arrays sort() / reverse() 메소드 알아보기 (0)	2021.04.03
[JavaScript] JS Arrays 배열에 대하여 알아보기 (0)	2021.04.02
[JavaScript] JS 변수 키워드 let 과 var 알아보기 (0)	2021.03.21

Contents

새소식

인기 검색어