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로 변경되는 것을 확인할 수 있다.