소개
이 랩에서는 텍스트 데이터를 조작하고 변환하기 위한 필수적인 JavaScript 문자열 객체 메서드를 탐구합니다. 일련의 실용적인 코딩 연습을 통해 문자열 생성, 길이 확인, 대소문자 변환, 문자 추출, 내용 대체, 그리고 내장된 JavaScript 문자열 메서드를 사용하여 문자 위치를 찾는 방법을 배우게 됩니다.
이 랩은 문자열 크기를 결정하기 위한 length 속성 사용, 대소문자 변환을 위한 toLowerCase() 및 toUpperCase(), 문자 추출을 위한 charAt() 및 substring(), 문자열 대체 및 분할, 그리고 문자열 내 특정 문자를 찾기 위한 indexOf()와 같은 기본적인 문자열 조작 기술을 다룹니다. 이러한 단계를 통해 JavaScript 프로그래밍에서 효과적인 텍스트 처리에 필수적인 핵심 문자열 연산에 대한 실질적인 경험을 얻게 될 것입니다.
문자열 생성 및 길이 확인
이 단계에서는 JavaScript 에서 문자열을 생성하고 length 속성을 사용하여 길이를 확인하는 방법을 배웁니다. 문자열은 텍스트를 저장하고 조작하는 데 사용되는 JavaScript 의 기본적인 데이터 유형입니다.
WebIDE 를 열고 ~/project 디렉토리에 string-basics.js라는 새 파일을 만듭니다. 문자열 생성 및 길이 확인을 탐구하기 위해 JavaScript 코드를 작성할 것입니다.
// 다양한 방법을 사용하여 문자열 생성
let greeting = "Hello, JavaScript!";
let name = "John Doe";
let emptyString = "";
// length 속성을 사용하여 문자열 길이 확인
console.log("Greeting length:", greeting.length);
console.log("Name length:", name.length);
console.log("Empty string length:", emptyString.length);
이 코드를 실행하면 각 문자열의 길이가 콘솔에 출력됩니다. length 속성은 문자열의 문자 수를 반환합니다.
예시 출력:
Greeting length: 18
Name length: 8
Empty string length: 0
기억해야 할 몇 가지 주요 사항:
- 문자열은 작은따옴표
''또는 큰따옴표""를 사용하여 생성할 수 있습니다. length속성은 빈 문자열을 포함하여 모든 문자열에 적용됩니다.- 공백과 구두점은 문자열 길이에 포함됩니다.
toLowerCase() 및 toUpperCase() 를 사용하여 문자열 대소문자 변환
이 단계에서는 두 가지 필수적인 JavaScript 문자열 메서드인 toLowerCase()와 toUpperCase()를 사용하여 문자열 대소문자를 변환하는 방법을 배웁니다. 이러한 메서드를 사용하면 문자열의 대소문자를 쉽게 변경할 수 있습니다.
WebIDE 를 열고 이전 단계에서 사용한 ~/project/string-basics.js 파일을 계속 사용합니다. 대소문자 변환을 탐구하기 위해 다음 코드를 추가합니다.
// 원본 문자열
let originalText = "Hello, JavaScript Programming!";
// 소문자로 변환
let lowercaseText = originalText.toLowerCase();
console.log("Lowercase:", lowercaseText);
// 대문자로 변환
let uppercaseText = originalText.toLowerCase().toUpperCase();
console.log("Uppercase:", uppercaseText);
// 실용적인 예시: 사용자 이름 정규화
let username = "JohnDoe";
let normalizedUsername = username.toLowerCase();
console.log("Normalized Username:", normalizedUsername);
이 코드를 실행하면 다음과 같은 출력을 볼 수 있습니다.
예시 출력:
Lowercase: hello, javascript programming!
Uppercase: HELLO, JAVASCRIPT PROGRAMMING!
Normalized Username: johndoe
대소문자 변환 메서드에 대한 주요 사항:
toLowerCase()는 문자열의 모든 문자를 소문자로 변환합니다.toUpperCase()는 문자열의 모든 문자를 대문자로 변환합니다.- 이러한 메서드는 문자열 비교, 정규화 및 서식 지정에 유용합니다.
- 원본 문자열은 변경되지 않으며, 이러한 메서드는 새로운 문자열을 반환합니다.
charAt() 및 substring() 을 사용한 문자 및 부분 문자열 추출
이 단계에서는 JavaScript 에서 charAt() 및 substring() 메서드를 사용하여 문자열에서 개별 문자 및 부분 문자열을 추출하는 방법을 배웁니다.
WebIDE 를 열고 ~/project/string-basics.js 파일을 계속 사용합니다. 문자 및 부분 문자열 추출을 탐구하기 위해 다음 코드를 추가합니다.
// 원본 문자열
let message = "JavaScript is awesome!";
// charAt() 을 사용하여 단일 문자 추출
let firstChar = message.charAt(0);
let fifthChar = message.charAt(4);
console.log("First character:", firstChar);
console.log("Fifth character:", fifthChar);
// substring() 을 사용하여 부분 문자열 추출
let partialString1 = message.substring(0, 10);
let partialString2 = message.substring(11);
console.log("First 10 characters:", partialString1);
console.log("From 11th character:", partialString2);
// 실용적인 예시: 이메일에서 사용자 이름 추출
let email = "john.doe@example.com";
let username = email.substring(0, email.indexOf("@"));
console.log("Username:", username);
이 코드를 실행하면 다음과 같은 출력을 볼 수 있습니다.
예시 출력:
First character: J
Fifth character: S
First 10 characters: JavaScript
From 11th character: is awesome!
Username: john.doe
문자 및 부분 문자열 추출에 대한 주요 사항:
charAt(index)는 특정 인덱스 (0 부터 시작) 의 문자를 반환합니다.substring(startIndex, endIndex)는 문자열의 일부를 추출합니다.- 종료 인덱스가 제공되지 않으면
substring()은 문자열의 끝까지 추출합니다. - 인덱스는 0 부터 시작하므로 첫 번째 문자는 인덱스 0 에 있습니다.
문자열 내용 바꾸기 및 분할 (replace, split)
이 단계에서는 JavaScript 에서 replace() 및 split() 메서드를 사용하여 문자열을 조작하는 방법을 배웁니다. 이러한 메서드는 문자열 내용을 수정하고 분해하는 강력한 도구입니다.
WebIDE 를 열고 ~/project/string-basics.js 파일을 계속 사용합니다. 문자열 바꾸기 및 분할을 탐구하기 위해 다음 코드를 추가합니다.
// 원본 문자열
let sentence = "Hello, world! Welcome to JavaScript programming.";
// Replace 메서드: 특정 단어 또는 문자 바꾸기
let replacedSentence = sentence.replace("world", "JavaScript");
console.log("Replaced sentence:", replacedSentence);
// 정규 표현식을 사용한 전체 바꾸기
let cleanedSentence = sentence.replace(/[!.]/g, "");
console.log("Cleaned sentence:", cleanedSentence);
// Split 메서드: 문자열을 배열로 변환
let words = sentence.split(" ");
console.log("Words array:", words);
// 제한과 함께 분할
let limitedWords = sentence.split(" ", 3);
console.log("Limited words:", limitedWords);
// 실용적인 예시: CSV 와 유사한 데이터 파싱
let userData = "John,Doe,30,Developer";
let userDetails = userData.split(",");
console.log("User First Name:", userDetails[0]);
console.log("User Last Name:", userDetails[1]);
이 코드를 실행하면 다음과 같은 출력을 볼 수 있습니다.
예시 출력:
Replaced sentence: Hello, JavaScript! Welcome to JavaScript programming.
Cleaned sentence: Hello, world Welcome to JavaScript programming
Words array: [ 'Hello,', 'world!', 'Welcome', 'to', 'JavaScript', 'programming.' ]
Limited words: [ 'Hello,', 'world!', 'Welcome' ]
User First Name: John
User Last Name: Doe
replace() 및 split()에 대한 주요 사항:
replace()는 문자열의 일부를 다른 문자열로 대체합니다.- 전체 바꾸기를 위해
replace()와 함께 정규 표현식 (regular expression) 을 사용합니다. split()은 구분 기호를 기준으로 문자열을 배열로 분할합니다.split()은 분할 횟수를 제어하기 위해 선택적 제한 매개변수를 사용할 수 있습니다.
indexOf() 를 사용하여 문자 위치 찾기
이 단계에서는 JavaScript 에서 indexOf() 메서드를 사용하여 문자열 내에서 문자 또는 부분 문자열의 위치를 찾는 방법을 배웁니다. 이 메서드는 문자열 내에서 특정 내용을 검색하고 찾는 데 매우 중요합니다.
WebIDE 를 열고 ~/project/string-basics.js 파일을 계속 사용합니다. 문자 및 부분 문자열 위치를 탐구하기 위해 다음 코드를 추가합니다.
// 원본 문자열
let message = "Hello, JavaScript is awesome!";
// 문자의 위치 찾기
let commaPosition = message.indexOf(",");
let firstJPosition = message.indexOf("J");
console.log("Position of comma:", commaPosition);
console.log("First position of 'J':", firstJPosition);
// 부분 문자열의 위치 찾기
let javascriptPosition = message.indexOf("JavaScript");
console.log("Position of 'JavaScript':", javascriptPosition);
// 특정 인덱스부터 시작하여 문자 찾기
let secondJPosition = message.indexOf("J", commaPosition + 1);
console.log("Second position of 'J':", secondJPosition);
// 찾을 수 없는 문자 처리
let xPosition = message.indexOf("X");
console.log("Position of 'X':", xPosition);
// 실용적인 예시: 이메일 유효성 검사
let email = "user@example.com";
let atSymbolPosition = email.indexOf("@");
let domainName = email.substring(atSymbolPosition + 1);
console.log("Domain name:", domainName);
이 코드를 실행하면 다음과 같은 출력을 볼 수 있습니다.
예시 출력:
Position of comma: 5
First position of 'J': 7
Position of 'JavaScript': 7
Second position of 'J': 7
Position of 'X': -1
Domain name: example.com
indexOf()에 대한 주요 사항:
- 지정된 문자 또는 부분 문자열이 처음 발견된 인덱스를 반환합니다.
- 문자/부분 문자열을 찾을 수 없으면 -1 을 반환합니다.
- 선택적 두 번째 매개변수를 사용하여 특정 인덱스부터 검색을 시작할 수 있습니다.
- 문자열의 일부를 검색, 유효성 검사 및 추출하는 데 유용합니다.
요약
이 랩에서는 참가자들이 JavaScript 에서 기본적인 문자열 조작 기술을 탐구했으며, 주요 메서드와 속성에 중점을 두었습니다. 이 랩은 학습자들이 length, toLowerCase(), toUpperCase()와 같은 메서드를 사용하여 문자열을 생성하고, 길이를 확인하고, 대소문자 변환을 수행하도록 안내했습니다. 참가자들은 다양한 구문을 사용하여 문자열을 생성하고, 문자열 길이를 측정하고, 텍스트 케이스를 동적으로 변환하는 방법을 배웠습니다.
실습을 통해 문자 추출, 부분 문자열 조작, 문자열 인덱싱 이해를 포함한 필수적인 문자열 연산을 시연했습니다. 실습 코드 예제를 통해 학생들은 JavaScript 의 문자열 객체 메서드에 대한 실질적인 통찰력을 얻었으며, 프로그래밍 프로젝트에서 텍스트 데이터를 효과적으로 처리하고 수정할 수 있게 되었습니다.
