4.1 문자열 소개
JavaScript에서 문자열은 문자들의 시퀀스를 나타내며, 주요 데이터 타입 중 하나야. 문자열은 싱글 쿼트 ('텍스트'), 더블 쿼트 ("텍스트"), 또는 백틱 (`텍스트`)를 사용하여 만들 수 있어.
문자열 예제:
let singleQuote = 'Hello, World!';
let doubleQuote = "Hello, World!";
let backticks = `Hello, World!`;
문자열 객체에서 다음과 같은 메서드를 호출할 수 있어:
| 메서드 | 설명 |
|---|---|
| length | 문자열의 길이를 반환해줘 |
| charAt(index) | 지정된 위치에 있는 문자를 반환해줘 |
| toUpperCase() | 문자열을 대문자로 변환해줘 |
| toLowerCase() | 문자열을 소문자로 변환해줘 |
| indexOf(substring) | 부분 문자열의 첫 번째 출현 인덱스를 반환하거나 찾을 수 없으면 -1을 반환해줘 |
| includes(substring) | 문자열이 특정 부분 문자열을 포함하고 있는지 확인하고, true 또는 false를 반환해줘 |
| slice(start, end) | 문자열의 일부를 추출하여 새로운 문자열을 반환해줘 |
| replace(searchValue, newValue) | 지정된 부분 문자열을 새로운 부분 문자열로 대체해줘 |
| split(separator) | 지정된 구분자를 사용하여 문자열을 부분 문자열 배열로 나눠줘 |
| trim() | 문자열 시작과 끝의 공백을 제거해줘 |
4.2 문자열 작업의 주요 메서드
메서드 사용 예제
1. length 속성
문자열의 길이를 반환해:
let str = 'Hello';
console.log(str.length); // 5
2. charAt(index) 메서드
지정된 위치에 있는 문자를 반환해:
let str = 'Hello';
let result = str.charAt(1);
console.log(result); // 'e'
3. toUpperCase() 및 toLowerCase() 메서드:
문자열을 대문자 또는 소문자로 변환해:
let str = 'Hello';
console.log(str.toUpperCase()); // 'HELLO'
console.log(str.toLowerCase()); // 'hello'
4. indexOf(substring) 메서드
부분 문자열의 첫 번째 출현 인덱스를 반환하거나 찾을 수 없으면 -1을 반환해:
let str = 'Hello, world!';
let result = str.indexOf('world');
console.log(result); // 7
5. includes(substring) 메서드
문자열이 특정 부분 문자열을 포함하고 있는지 확인하고, true 또는 false를 반환해:
let str = 'Hello, world!';
let result = str.includes('world');
console.log(result); // true
6. trim() 메서드
문자열 시작과 끝의 공백을 제거해줘:
let str = ' Hello, world! ';
console.log(str.trim()); // 'Hello, world!'
7. replace(searchValue, newValue) 메서드
지정된 부분 문자열을 새로운 부분 문자열로 대체해줘:
let str = 'Hello, world!';
console.log(str.replace('world', 'JavaScript')); // 'Hello, JavaScript!'
8. split(separator) 메서드
지정된 구분자를 사용하여 문자열을 부분 문자열 배열로 나눠줘:
let str = 'Hello, world!';
let words = str.split(' ');
console.log(words); // ['Hello,', 'world!']
9. substring(start, end) 메서드
두 인덱스 사이의 부분 문자열을 반환해줘:
let str = 'Hello, world!';
console.log(str.substring(0, 5)); // 'Hello'
10. substr(start, length) 메서드
지정된 인덱스에서 시작하여 지정된 수의 문자 길이를 반환해줘:
let str = 'Hello, world!';
console.log(str.substr(0, 5)); // 'Hello'
11. slice(start, end) 메서드
문자열의 일부를 추출하여 새로운 문자열을 반환해줘:
let str = 'Hello, world!';
console.log(str.slice(0, 5)); // 'Hello'
12. startsWith(substring) 메서드
문자열이 특정 부분 문자열로 시작하는지 확인하고, true 또는 false를 반환해줘:
let str = 'Hello, world!';
console.log(str.startsWith('Hello')); // true
13. endsWith(substring) 메서드
문자열이 특정 부분 문자열로 끝나는지 확인하고, true 또는 false를 반환해줘:
let str = 'Hello, world!';
console.log(str.endsWith('world!')); // true
14. repeat(count) 메서드
원래 문자열을 지정된 횟수만큼 복사한 새 문자열을 반환해줘:
let str = 'Hello';
console.log(str.repeat(3)); // 'HelloHelloHello'
let str2 = '-';
console.log(str2.repeat(30)); // '---------------------------------------------------------------'
4.3 새로운 세대의 문자열
템플릿 문자열(template strings)은 최근 JavaScript에 추가됐어. 기존 문자열에 비해 더 편리하고 읽기 쉬운 방법으로 텍스트를 처리할 수 있게 해줘. 백틱(`)으로 감싸지며 표현식과 여러 줄 텍스트를 지원해.
구문:
`새로운 세대의 문자열`
예제:
템플릿 리터럴 greeting이 백틱을 사용하여 생성되었어.
const greeting = `Hello, World!`;
console.log(greeting); // "Hello, World!"
템플릿 문자열의 주요 특징:
- 표현식 삽입: 템플릿 문자열은
${}를 사용하여 문자열 내부에 표현식과 변수를 삽입할 수 있어 - 여러 줄 텍스트: 템플릿 문자열은 줄 바꿈 기호 없이 여러 줄 텍스트를 지원해
- 내장 표현식: 템플릿 문자열 내부에서는 JavaScript의 모든 표현식을 사용할 수 있으며, 함수도 포함돼
템플릿 문자열 사용 예제를 살펴보자.
표현식 삽입
템플릿 문자열은 변수의 값과 표현식의 결과를 문자열 내부에 쉽게 삽입할 수 있게 해줘:
let name = "Alice";
let age = 30;
let greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting); // "Hello, Alice! You are 30 years old."
이 예제에서, 변수 name과 age는 ${}를 사용하여 문자열 내부에 삽입되었어.
여러 줄 텍스트
템플릿 문자열은 줄 바꿈 기호(\n) 없이 여러 줄 문자열을 쉽게 만들 수 있어:
let multiLine = `Lorem ipsum odor, consectetuer adipiscing elit.
Sit lorem mattis eget maximus.`;
console.log(multiLine);
내장 표현식
템플릿 문자열 내부에서는 JavaScript의 모든 표현식, 함수 호출까지 사용할 수 있어:
let a = 5;
let b = 10;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // "The sum of 5 and 10 is 15."
function getGreeting(name) {
return `Hello, ${name}!`;
}
let greeting = `${getGreeting("Bob")}`;
console.log(greeting); // "Hello, Bob!"
물론, 문자열 내에서 함수를 호출하지 않는 게 좋지만, 정말 하고 싶다면 할 수 있어.
GO TO FULL VERSION