JavaScript - 문자열: 초보자 가이드
안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 JavaScript의 마법적인 문자열 세계로 접수합니다. 코드를 한 줄도 작성해 본 적이 없어도 걱정 마세요 - 이 튜토리얼이 끝나면 프로처럼 코드를 짜맞추게 될 거예요! 시작해 보겠습니다!
문자열이란?
JavaScript에서 문자열은 문자의序列입니다. 이는 알파벳, 숫자, 기호, 심지어 공백일 수도 있습니다. 이를 프로그래밍 세계의 텍스트라고 생각해 보세요.
예를 들어:
let greeting = "Hello, World!";
let number = "42";
let symbol = "@#$%";이 모두가 문자열입니다. JavaScript에서는 따옴표가 들어 있는 것은 모두 문자열입니다.
문법
JavaScript에서 문자열을 만드는 것은 간단합니다. 단일 따옴표(''), 이중 따옴표(""), 혹은 백틱(``)을 사용할 수 있습니다. 몇 가지 예를 보겠습니다:
let singleQuotes = '저는 문자열입니다';
let doubleQuotes = "저도 문자열입니다";
let backticks = `그리고 저도 문자열입니다!`;Pro tip: 백틱은 특별한 능력을 가지고 있습니다 - 표현식을 내장할 수 있습니다. 나중에 이에 대해 다룰 거예요!
JavaScript 문자열 객체 속성
JavaScript의 문자열은 몇 가지 내장된 속성을 가지고 있습니다. 마치 자신에 대한 정보가 담긴 신분증을 가지고 있는 것처럼요. 가장 흔한 하나를 보겠습니다:
length
length 속성은 문자열에 몇 개의 문자가 있는지 알려줍니다.
let myName = "Alice";
console.log(myName.length); // 출력: 5여기서 myName.length은 5입니다. "Alice"에는 5개의 문자가 있습니다.
JavaScript 문자열 객체 메서드
이제 문자열이 할 수 있는 멋진 기술 중 몇 가지를 살펴보겠습니다. 이러한 기술은 메서드라고 불리며, 문자열이 가지는 특별한 능력들입니다.
다음은 몇 가지 흔한 문자열 메서드의 표입니다:
| 메서드 | 설명 | 예제 |
|---|---|---|
| toUpperCase() | 문자열을 대문자로 변환 | "hello".toUpperCase()는 "HELLO"를 반환합니다 |
| toLowerCase() | 문자열을 소문자로 변환 | "WORLD".toLowerCase()는 "world"를 반환합니다 |
| trim() | 양쪽의 공백을 제거 | " hi ".trim()는 "hi"를 반환합니다 |
| charAt(index) | 지정된 인덱스의 문자를 반환 | "hello".charAt(1)는 "e"를 반환합니다 |
| indexOf(substring) | 첫 번째 발생하는 서브스트링의 인덱스를 반환 | "hello".indexOf("l")는 2를 반환합니다 |
| slice(start, end) | 문자열의 일부를 추출 | "hello".slice(1, 4)는 "ell"를 반환합니다 |
| replace(old, new) | 지정된 값을 다른 값으로 변경 | "hello".replace("h", "j")는 "jello"를 반환합니다 |
다음은 몇 가지 예제와 함께 이러한 메서드를 더 깊이 탐구해 보겠습니다:
toUpperCase()와 toLowerCase()
let shout = "hello".toUpperCase();
console.log(shout); // 출력: HELLO
let whisper = "QUIET PLEASE".toLowerCase();
console.log(whisper); // 출력: quiet please텍스트 메시지 앱을 만들 때 이 메서드들이 유용할 수 있습니다. 대문자 기능을 추가하거나 사용자 이름을 항상 소문자로 저장하는 데 사용할 수 있습니다.
trim()
let untidy = " spruce up ";
let tidy = untidy.trim();
console.log(tidy); // 출력: "spruce up"이는 사용자 입력을 다루는 데 매우 유용합니다. 사용자는 종종 실수로 텍스트의 시작이나 끝에 공백을 추가합니다.
charAt(index)
let word = "JavaScript";
console.log(word.charAt(4)); // 출력: S프로그래밍에서는 0에서 시작하여 셈합니다. 따라서 5번째 문자는 인덱스 4에 있습니다!
indexOf(substring)
let sentence = "The quick brown fox jumps over the lazy dog";
console.log(sentence.indexOf("fox")); // 출력: 16이는 "fox"가 17번째 문자에서 시작된다는 것을 알려줍니다 (0에서 시작하여 셈합니다).
slice(start, end)
let fruit = "apple,banana,cherry";
let banana = fruit.slice(6, 12);
console.log(banana); // 출력: bananaSlice는 문자열의 일부를 자를 수 있는 것입니다. 여기서 우리는 "banana"를 과일 문자열에서 자릅니다.
replace(old, new)
let oldSaying = "The early bird catches the worm";
let newSaying = oldSaying.replace("worm", "success");
console.log(newSaying); // 출력: The early bird catches the success이 메서드는 문자열에 빠른 변경을加える 데 매우 유용합니다.
예제
이제 모든 것을 하나로 모아 재미있는 예제를 보겠습니다. 우리는 간단한 이름 태그 생성기를 만들어 보겠습니다:
function createNameTag(name, role) {
let upperName = name.toUpperCase();
let trimmedRole = role.trim();
let tag = `Hello, my name is ${upperName} and I am a ${trimmedRole}`;
return tag;
}
let myTag = createNameTag(" alice ", " developer ");
console.log(myTag); // 출력: Hello, my name is ALICE and I am a developer이 예제에서 우리는 toUpperCase()를 사용하여 이름을 강조하고, trim()을 사용하여 실수로 추가된 공백을 제거하며, 템플릿 리터럴(백틱)을 사용하여 문자열을 쉽게 결합합니다.
문자열 HTML 래퍼
JavaScript는 문자열을 HTML 태그로 감싸는 메서드를 제공합니다. 이는 JavaScript로 HTML 콘텐츠를 생성할 때 유용할 수 있습니다. 몇 가지를 보겠습니다:
let text = "Bold and Beautiful";
console.log(text.bold()); // 출력: <b>Bold and Beautiful</b>
console.log(text.italics()); // 출력: <i>Bold and Beautiful</i>
console.log(text.link("https://example.com")); // 출력: <a href="https://example.com">Bold and Beautiful</a>하지만, 이러한 메서드는 이미 퇴역된 것으로 간주됩니다. 현대 웹 개발에서는 DOM을 직접 조작하거나 프레임워크를 사용하는 것이 일반적입니다.
그리고 여기서 끝입니다! 지금 당신은 JavaScript 문자열의 세계로的第一步을 내딛었습니다. 연습이 완벽을 만든다는 것을 기억하세요, 그러므로 이러한 메서드를 실험해 두려워 마세요. 얼마 지나지 않아 복잡한 프로그램을 쉽게 짜맞추게 될 거예요. 행복한 코딩을 기원합니다!
Credits: Image by storyset