자바스크립트 문자열
문자열의 종류와 사용법을 알아보겠습니다.
자바스크립트에서는 간단한 텍스트를 처리하기 위해 문자열 유형을 자주 사용합니다!
이번엔 자바스크립트에서 문자열을 다루는 방법을 대해 살펴보겠습니다.
원시 유형과 객체
단순히 값만 가지고 있을 경우에는 '원시 유형'이고, 프로퍼티와 메서드를 가지고 있을 때는 '객체' 라고 부릅니다.
그런데 자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다.
자바스크립트에서는 number와 boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다.
즉, 숫자는 Number 객체, 문자열은 String 객체라는 식으로 만들어졌는데,
이런 객체를 '래퍼 객체(wrapper object)' 라고 부릅니다.
원시 유형(Primitive types)
| 숫자(Number) | 정수 및 부동 소수점 숫자를 나타냅니다. |
| 문자열(String) | 텍스트를 나타냅니다. 예: "Hello, World" |
| 불리언(Boolean) | true 또는 false 값을 가지며, 조건문 등에 사용됩니다. |
| undefined | 변수에 값이 할당되지 않았거나, 객체 속성에 값이 없는 경우에 사용됩니다. |
| null | 값이 없음을 나타내며, 객체의 값이 없는 상태를 나타냅니다. |
| 심볼(Symbol) | 유일한 값으로, ES6에서 도입되었습니다. |
number나 boolean, string과 같은 원시 유형에서 프로퍼티나 메서드를 사용하면 일시적으로 원시 유형을 해당 객체로 변환합니다. 그리고 프로퍼티나 메서드의 사용이 끝나면 해당 객체는 메모리에서 사라져 버립니다.
필요할 때만 임시로 객체를 바꿔 사용하고 사용이 끝나면 다시 원시 유형으로 되돌아 오는데,
이것을 '오토박싱(autoboxing)' 이라고 부릅니다!
[ 오토박싱의 예시 ]
length 프로퍼티
문자열의 길이를 찾을 떄는 배열에서처럼 length 프로퍼티를 사용합니다.
length는 자바스크립트에서 배열(Array)이나 문자열(String)과 같은 객체의 프로퍼티(property) 중 하나입니다. 이 프로퍼티는 해당 객체가 가지고 있는 요소(element)의 개수를 나타냅니다.
const arr = [1, 2, 3, 4, 5];
let str = "javascript";
arr.length //5
str.length //10배열의 경우 length 프로퍼티는 배열의 요소의 개수를 반환합니다.
문자열인 경우 length 프로퍼티는 문자열의 길이를 반환합니다.
charAt(), indexOf() 메서드
문자열은 여러 개의 문자가 나열되어 있으므로 배열처럼 각 문자의 위치를 가리키는 인덱스가 있다고 가정해서 사용합니다. 위치와 관련된 주요 메서드에서는 charAt() 메서드와 indexOf() 메서드가 있습니다.
charAt() 메서드는 문자열에서 지정된 인덱스에 있는 문자를 반환합니다.
이 메서드는 문자열의 각 문자에 대한 인덱스가 0부터 시작한다는 것을 기억해야 합니다.
따라서 첫 번째 문자는 인덱스 0에 해당하고, 두 번째 문자는 인덱스 1에 해당하고, 이런 식으로 이어집니다.
const str = 'hello';
str.charAt(0); // 'h'
str.charAt(str.length - 1); // 'o'
indexOf() 메소드는 문자열에서 특정 문자열이 처음으로 나타나는 인덱스를 반환합니다.
만약 찾고자 하는 문자열이 존재하지 않는다면 -1을 반환합니다.
const str = "Hello, World!";
str.indexOf("o"); //4
startsWith(), dendsWith(), includes() 메서드
문자열 메서드 중 일부입니다. 이들 메서드는 주어진 문자열이 특정 문자열로 시작하거나 끝나는지, 또는 특정 문자열을 포함하는지 여부를 확인하는 데 사용됩니다.
startsWith() 메소드는 특정 문자열이 주어진 문자열로 시작하는지 여부를 확인하는 데 사용됩니다.
이 메소드는 문자열의 시작 부분과 비교 문자열을 인자로 받으며, 비교 문자열이 해당 문자열의 시작 부분과 일치하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
let str = "Hello World!";
str.startsWith("Hello"); //true
endsWith() 메서드는 문자열이 특정 문자열로 끝나는지 여부를 확인하는 데 사용됩니다.
이 메서드는 boolean 값을 반환합니다.
const str = "Hello, world!";
const suffix = "world!";
str.endsWith(suffix); // true
includes() 메서드는 배열이 특정 요소를 포함하고 있는지 확인하는 데 사용됩니다.
이 메서드는 불리언 값을 반환하며, 배열에 지정된 요소가 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
const fruits = ['apple', 'banana', 'orange'];
fruits.includes('banana'); // true
fruits.includes('grape'); // false
trim(), trimStart(), trimEnd() 메서드
연산에 사용하기 위해 공백을 제거할 경우 String 객체에 있는 메서드를 사용하면 매우 간단하게 삭제할 수 있습니다.
trim() 메서드는 문자열의 양쪽 끝에서 공백(space, tab, 개행 등)을 제거한 새로운 문자열을 반환합니다. 이 메서드는 문자열에서 유용하지 않은 공백을 제거하는 데 사용됩니다.
trim() 메서드는 문자열을 변경하지 않고 새로운 문자열을 반환합니다. 따라서, 원래 문자열을 수정하지 않고 공백이 제거된 새로운 문자열을 사용해야 할 때 유용합니다.
let str = " Hello World ";
str.trim(); //"Hello World"
trimStart() 메서드는 문자열의 시작 부분에서 공백(space, tab, 개행 등)을 제거한 새로운 문자열을 반환합니다.
trim() 메서드와는 다르게, trimStart()는 문자열의 시작 부분에서만 공백을 제거합니다.
let str = " Hello World ";
str.trimStart(); //"Hello World "
trimEnd() 메소드는 문자열에서 끝에 있는 공백을 제거하는 JavaScript의 내장 함수입니다.
이 함수는 문자열 끝부분에서 시작하여 공백 문자가 없을 때까지 문자열을 탐색하고, 마지막으로 나타나는 공백 문자 이후의 모든 문자열을 잘라냅니다. trimEnd()은 원래 문자열을 수정하지 않고 새로운 문자열을 반환합니다.
const str = " Hello World! ";
str.trimEnd(); // " Hello World!"
toUpperCase(), toLowerCase() 메서드
영문자 문자열의 경우에는 모두 대문자로, 또는 모두 소문자로 바꿀 수 있습니다.
let str = "Have a Nice Day";
str.toUpperCase() //"HAVE A NICE DAY"
str.toLowerCase() //"have a nice day"
substring(), slice() 메서드
문자열 중에서 특정 문자열만 추출할 때는 substring() 메서드와 slice() 메서드를 사용합니다.
이들 메서드는 사용 형식이나 동작 방법이 비슷합니다.
substring() 메서드는 첫 번째 인자로 시작 인덱스(start index)를, 두 번째 인자로 종료 인덱스(end index)를 받습니다. 이 때, 시작 인덱스는 종료 인덱스보다 항상 작아야 하며, 인덱스는 0부터 시작합니다. substring() 메서드는 시작 인덱스부터 종료 인덱스 이전까지의 문자열을 반환합니다. 만약 종료 인덱스를 생략하면 문자열의 끝까지 추출됩니다.
const str = 'Hello, world!';
str.substring(1, 4); // 'ell'
slice() 메서드는 배열의 일부분을 선택하여 새로운 배열을 반환하는 메서드입니다. slice() 메서드는 기존 배열의 원본을 변경하지 않고 새로운 배열을 생성합니다.
slice() 메서드는 매개변수로 시작 인덱스와 끝 인덱스를 받습니다. 시작 인덱스는 선택할 첫 번째 요소의 인덱스를 의미하며, 끝 인덱스는 선택할 마지막 요소의 바로 다음 인덱스를 의미합니다. 끝 인덱스는 선택하지 않은 첫 번째 요소의 인덱스입니다.
const arr = [1, 2, 3, 4, 5];
arr.slice(1, 4); //[2, 3, 4]
split() 메서드
문자열의 split() 메서드는 문자열에서 구분자를 기준으로 문자열을 쪼개 줍니다.
split() 메서드는 하나의 인수를 가집니다. 인수는 문자열을 분할할 구분자(separator)입니다. 구분자를 지정하지 않으면 문자열 전체를 하나의 요소로 갖는 배열을 반환합니다.
const str = 'apple, banana, kiwi';
str.split(', '); // ['apple', 'banana', 'kiwi']
이메일 주소 앞부분만 보여주기!
이메일을 입력하면 앞부분만 노출되는 사이트를 만들어 봤습니다.
VSCode
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이메일 앞부분만 보여주기</title>
</head>
<body>
<div id="userInput">
<label>
<input type="email" id="userEmail" placeholder="이메일 주소를 입력하세요" autofocus>
</label>
<button>실행</button>
</div>
<div id="result"></div>
<script>
const email = document.querySelector("#userEmail");
const button = document.querySelector("button");
const result = document.querySelector("#result");
button.addEventListener("click", function() {
let username, domain;
if (email.value !== "") {
username = email.value.split("@")[0]; // @ 기준으로 쪼개어 앞부분 저장
username = username.substring(0, 3); // username 중 3자리만 필요
domain = email.value.split("@")[1]; // @ 기준으로 쪼개어 뒷부분 저장
result.innerText = `${username}...@${domain}`;
}
});
/*************************************************
@앞에 표시할 username의 갯수를 고정하지 않고
username 길이의 반만 표시하려고 할 때
**************************************************/
button.addEventListener("click", function() {
let username, domain, half;
if (email.value !== "") {
username = email.value.split("@")[0]; // @ 기준으로 쪼개어 앞부분 저장
half = username.length / 2; // username의 길이를 반으로 나눔
username = username.substring(0, (username.length - half)); // username에서 반으로 나눈 위치까지만 추출
domain = email.value.split("@")[1]; // @ 기준으로 쪼개어 뒷부분 저장
result.innerText = `${username}...@${domain}`; // 결과 표시
email.value = ""; // 텍스트 필드 지우기
}
});
</script>
</body>
</html>