[ Javascript ] 문자열 알아보기

 

 

 

 

🌱 문자열 리터럴(String Literal)이란?
문자열 리터럴은 JavaScript에서 문자열 데이터를 직접 코드에 표현할 때 사용하는 값입니다. "...", '...', 또는 `...` 같은 기호로 감싸서 정의합니다. 문자열 리터럴은 사람이 읽을 수 있는 텍스트 데이터를 프로그램 내에서 표현할 수 있게 해줍니다.

---

 

1. 문자열 리터럴의 종류

1. 큰따옴표 (" ")와 작은따옴표 (' ')

• 가장 기본적인 문자열 정의 방식입니다.
• 둘 중 하나를 사용해 문자열을 감싸며, 중첩해서 사용할 수도 있습니다.

const str1 = "Hello, world!";
const str2 = '안녕하세요!';
const str3 = "그는 '개발자'입니다.";
const str4 = 'She said, "Hi!"';

2. 백틱(`) – 템플릿 리터럴

• ES6부터 도입된 문자열 리터럴의 확장형입니다.
• 다중 행 문자열과 문자열 내 표현식 삽입을 지원합니다.

const name = "영희";
const str = `안녕하세요, ${name}님!`;

---

 

2. 문자열 리터럴에서 사용 가능한 이스케이프 시퀀스

• 문자열 내에서 특수 문자를 표현하기 위해 역슬래시(\)를 사용합니다.

이스케이프 시퀀스	의미
\n	줄 바꿈
\t	탭
\'	작은따옴표 문자
\"	큰따옴표 문자
\\	역슬래시 자체

const quote = "그는 말했다. \"이건 중요한 일입니다.\"";
const path = "C:\\Users\\MyFolder";

---

 

3. 문자열 리터럴 활용 팁

• 문자열 리터럴을 정의할 때 일관성 있는 따옴표 사용이 좋습니다. (예: 전 프로젝트에서 전부 ' 사용 등)
• 템플릿 리터럴을 사용하면 복잡한 문자열 조합을 간단하게 만들 수 있습니다.
• 문자열 리터럴 내에 변수를 넣거나 여러 줄을 표현해야 한다면 백틱 사용을 고려하세요.

---

 

4. 백틱(`)이란?

백틱(Backtick)은 JavaScript에서 문자열을 정의하는 방법 중 하나로, ES6(ECMAScript 2015)부터 도입된 템플릿 리터럴(Template Literal)을 만들 때 사용됩니다. 일반적인 따옴표(' 또는 ")와는 달리, 백틱을 사용하면 문자열 안에 표현식을 쉽게 삽입하거나 여러 줄의 문자열을 작성할 수 있습니다.

---

1. 백틱의 주요 특징

1. 문자열 내 표현식 삽입 (템플릿 리터럴)

• ${}를 사용해 변수나 표현식을 문자열 안에 넣을 수 있습니다.
• 복잡한 문자열을 조합할 때 훨씬 간편하게 사용됩니다.

const name = "철수";
const greeting = `안녕하세요, ${name}님!`;
console.log(greeting); // 안녕하세요, 철수님!

2. 여러 줄 문자열 작성

• \n 없이도 줄바꿈이 자동으로 처리됩니다.
• HTML 템플릿이나 긴 문장을 다룰 때 유용합니다.

const message = `이건 첫 번째 줄입니다.
이건 두 번째 줄입니다.`;
console.log(message);

3. 표현식 계산 및 함수 호출도 가능

• 템플릿 리터럴 내부에서는 모든 표현식이 가능하므로 함수 호출도 포함할 수 있습니다.

const a = 5;
const b = 10;
const result = `두 수의 합은 ${a + b}입니다.`;
console.log(result); // 두 수의 합은 15입니다.

---

2. 백틱 사용 시 주의할 점

• 템플릿 리터럴은 항상 백틱()으로 감싸야 합니다. 작은따옴표나 큰따옴표로 감싸면${}` 구문이 작동하지 않습니다.
• 코드 가독성을 위해 너무 복잡한 표현식은 템플릿 리터럴 밖에서 계산한 후 변수로 사용하는 것이 좋습니다.

---