문자열

docs.scrimba.com

로그인한 사용자를 위해 인사말을 작성하고 있으며, 사용자의 이름이 변수에 저장되어 있습니다. "Priya"를 직접 입력하지 않고 페이지에 "다시 오신 것을 환영합니다, Priya"라고 표시해야 하는데, 내일은 민준이고 그 다음날은 처음 보는 사람일 수도 있습니다. 즉시 만들고, 측정하고, 다시 형성할 수 있는 텍스트가 문자열이며, 이 장은 문자열로 작업하는 방법에 관한 것입니다.

문자열 만들기

**문자열**은 따옴표로 감싼 텍스트입니다. 작은따옴표나 큰따옴표를 사용할 수 있으며, 둘 다 같은 방식으로 작동하므로 하나를 선택하고 일관되게 유지하면 됩니다.

const firstName = "민준";
const greeting = "다시 오신 것을 환영합니다";

문자열을 만드는 가장 유용한 방법은 템플릿 리터럴이며, 따옴표 대신 백틱으로 작성합니다. 템플릿 리터럴 내에서 ${...}을 사용하여 값을 텍스트에 삽입할 수 있으며, JavaScript가 그 값이 보유한 것을 채워줍니다:

const firstName = "민준";
const message = `다시 오신 것을 환영합니다, ${firstName}`;
console.log(message); // 다시 오신 것을 환영합니다, 민준

그 ${firstName}은 슬롯입니다. 문자열이 만들어질 때, 슬롯은 firstName의 값으로 대체됩니다. 텍스트를 여러 조각으로 만들 때마다 템플릿 리터럴을 사용하세요.

**문자열**은 텍스트로 만들어진 값입니다. 작은따옴표와 큰따옴표는 동일한 문자열을 생성하므로 선택은 스타일에 관한 것이며 포함해야 할 따옴표 문자에 관한 것입니다: "it's here"은 이스케이프를 피하며, 'she said "hi"'도 마찬가지입니다.

선호하는 형식은 템플릿 리터럴이며, 백틱으로 작성된 문자열입니다. 일반 따옴표가 할 수 없는 두 가지를 합니다. ${...}을 사용하여 값을 삽입하여 모든 표현식의 결과를 텍스트에 직접 드롭하고, 특수 이스케이프 없이 여러 줄에 걸쳐 있을 수 있습니다:

const firstName = "민준";
const itemCount = 3;
const message = `다시 오신 것을 환영합니다, ${firstName}. 대기 중인 항목이 ${itemCount}개 있습니다.`;
console.log(message); // 다시 오신 것을 환영합니다, 민준. 대기 중인 항목이 3개 있습니다.

값을 생성하는 모든 것이 슬롯에 들어갈 수 있으며, 변수 이름뿐만 아니라 ${itemCount}는 ${itemCount + 1}과 같을 수도 있습니다. ${...}으로 텍스트를 만드는 것이 따옴표와 더하기 기호로 조각을 붙이는 것보다 훨씬 깔끔해 읽히므로, 이것이 기본값입니다.

문자열은 JavaScript의 텍스트 **원시형**입니다: 숫자 및 불린과 함께 언어의 기본 값 타입 중 하나입니다(데이터 타입을 참고하세요). 작은따옴표와 큰따옴표는 서로 바뀔 수 있으며 정확히 같은 값을 생성합니다. 유일한 실제 결정은 이스케이프해야 할 따옴표 문자입니다.

기본값으로 사용할 가치가 있는 형식은 템플릿 리터럴이며, 백틱으로 구분됩니다. ${...}으로 모든 표현식을 삽입하여 내부를 평가하고 결과를 문자열로 강제 변환하며, 리터럴 줄바꿈을 유지하므로 멀티라인 텍스트는 \n이 필요 없습니다:

const firstName = "민준";
const itemCount = 3;
const summary = `안녕하세요 ${firstName}, 대기 중인 항목이 ${itemCount}개이고 ${itemCount === 1 ? "입니다" : "있습니다"}.`;
console.log(summary); // 안녕하세요 민준, 대기 중인 항목이 3개이고 있습니다.

슬롯은 표현식을 보유하며, 이름만이 아니므로 산술, 메서드 호출 및 비교가 모두 내부에서 작동합니다. 이러한 표현력이 두 부분 이상의 문자열에서 보간이 연결을 이기는 이유입니다: 최종 텍스트의 형태가 소스에서 읽을 수 있게 유지됩니다. 만들 습관은 백틱을 기본값으로 사용하고 보간이 이득이 없는 고정된 단일 조각 문자열에서만 일반 따옴표로 떨어지는 것입니다.

Juno문자열 만들기 문자열은 따옴표 안의 텍스트이며, 작은따옴표나 큰따옴표 모두 같은 방식으로 작동하므로 하나를 선택하고 일관되게 유지하세요. 조각으로 텍스트를 만들 때는 템플릿 리터럴을 사용하세요: ${...} 슬롯으로 채워질 백틱이 값으로 대체됩니다. 이것이 가장 자주 사용할 도구입니다.

Juno문자열 만들기 작은따옴표와 큰따옴표는 동일한 문자열을 만들므로 이스케이프 없이 포함해야 할 따옴표를 기준으로 선택하세요. 하지만 템플릿 리터럴을 기본값으로 사용하세요: 백틱을 사용하면 ${...}로 모든 값을 드롭하고 무료로 여러 줄에 걸쳐 있을 수 있습니다. 일단 보간하면, 손으로 문자열을 붙이는 것이 가치 있게 느껴집니다.

Juno문자열 만들기 따옴표는 서로 바뀔 수 있습니다. 하나를 다른 것보다 선택하게 하는 유일한 것은 이스케이프해야 할 문자입니다. 기본값으로 백틱을 사용하세요. ${...}는 전체 표현식을 가져가므로, 이름만이 아니라서 산술과 비교가 텍스트 내부에서 바로 작동합니다. 보간이 이득이 없는 고정된 단일 조각 문자열에 대해 일반 따옴표를 유지하세요.

연결 및 측정

+ 연산자로 두 문자열을 연결할 수 있습니다. 이를 **연결**이라고 합니다:

const firstName = "민준";
const greeting = "안녕하세요 " + firstName;
console.log(greeting); // 안녕하세요 민준

'안녕하세요 ' 내의 공백에 주목하세요. 연결은 문자열을 정확히 작성된 대로 붙이므로, 공백을 잊으면 안녕하세요민준을 얻습니다. 템플릿 리터럴이 일반적으로 같은 작업에 더 읽기 좋습니다: `안녕하세요 ${firstName}`.

모든 문자열은 자신의 길이를 압니다. .length로 물어보세요:

const firstName = "민준";
console.log(firstName.length); // 2

대괄호를 사용하여 위치로 단일 문자를 읽을 수도 있습니다(0부터 세어):

const firstName = "민준";
console.log(firstName[0]); // 민

첫 번째 문자는 1이 아니라 위치 0에 있습니다. 그 0부터 시작하는 세기는 JavaScript 전역에 있으므로 지금 익숙해질 가치가 있습니다.

두 문자열은 +와 함께 연결되며, 이 작업을 **연결**이라고 합니다. 작동하지만, 모든 리터럴 공백과 구분자를 따옴표 내에 입력해야 하므로 빠르게 복잡해집니다:

const firstName = "민준";
const lastName = "김";
console.log("안녕하세요 " + firstName + " " + lastName); // 안녕하세요 민준 김

같은 줄을 템플릿 리터럴로 `안녕하세요 ${firstName} ${lastName}`인데, 이것이 보간이 두 부분 이상의 것에 기본값인 이유입니다.

문자열은 .length로 크기를 보고하며, 이는 문자의 개수입니다:

const firstName = "민준";
console.log(firstName.length); // 2

그리고 대괄호로 인덱스를 사용하여 단일 문자를 읽으며, 0부터 세어서, firstName[0]은 첫 번째 문자이고 firstName[1]은 두 글자 문자열의 마지막입니다:

const firstName = "민준";
console.log(firstName[0]); // 민

인덱싱은 0부터 시작합니다: 첫 번째 문자는 위치 0에 있습니다.

문자열은 +와 함께 연결되며, 이 작업을 **연결**이라고 합니다. 빠른 두 부분 연결에는 괜찮지만, +는 오버로드됨을 유의하세요: 양쪽에 문자열이 있으면 연결되고, 숫자를 섞으면 그 숫자를 문자열로 강제 변환하므로, 'total: ' + 3은 'total: 3'을 주고 3 + 3은 6을 줍니다. 템플릿 리터럴은 항상 텍스트를 생성하여 모호함을 피하며, 가장 간단한 경우를 넘어서는 이유 중 하나입니다.

.length는 메서드가 아닌 프로퍼티이므로 괄호 없이 읽습니다:

const label = "김";
console.log(label.length); // 1

대괄호를 사용한 인덱싱은 0부터 시작하며 한 문자 문자열을 반환합니다:

const label = "김";
console.log(label[0]); // 김

명심할 한 가지: .length는 문자열의 기본 단위를 세며, 항상 사람이 문자라고 부르는 것은 아닙니다. 일반 텍스트의 경우 둘이 일치합니다. 일부 이모지와 결합된 문자의 경우 그렇지 않습니다. 단일 보이는 기호가 둘 이상의 단위로 저장될 수 있기 때문에, '😀'.length는 2를 보고합니다. 드물게 물어뜯지만, 이모지가 있는 텍스트에 대해 "문자"의 수가 잘못된 것처럼 보일 때, 그 불일치가 이유입니다.

Juno연결 및 측정+로 문자열을 연결하되, 공백을 직접 포함하거나 안녕하세요와 이름이 함께 실행됩니다. 템플릿 리터럴이 일반적으로 같은 것에 더 깔끔합니다. .length를 사용하여 문자를 세고, name[0]처럼 대괄호를 사용하여 위치로 하나를 읽으며, 0부터 세세요.

Juno연결 및 측정+는 연결하지만, 두 부분이 넘으면 복잡해지므로 템플릿 리터럴이 실제 것에 대해 승리합니다. .length는 문자를 세고 괄호 없이 사용합니다. 프로퍼티이기 때문입니다. name[0]을 사용한 인덱싱은 0부터 시작하므로, 첫 번째 문자는 위치 0에 있고 마지막은 길이에서 1을 뺀 값입니다.

Juno연결 및 측정+는 오버로드됩니다: 문자열 더하기 무언가 연결되고 강제 변환하므로, 깊은 놀람의 원인이 되고, 템플릿 리터럴에 의존하세요. .length는 프로퍼티이고, 괄호 없습니다. 저장소 단위를 세므로, 이모지는 길이 2를 보고할 수 있습니다. 그 간격은 유니코드에서만 나타나지만, 혼동하기 전에 알 가치가 있습니다.

유용한 문자열 메서드

문자열은 내장 **메서드**와 함께 제공됩니다: 점과 메서드 이름을 작성하여 문자열에서 실행하는 작업입니다. 가장 자주 사용할 것들은 다음과 같습니다.

toUpperCase()와 toLowerCase()로 대소문자를 변경하세요:

const firstName = "민준";
console.log(firstName.toUpperCase()); // 민준

includes()를 사용하여 한 텍스트가 다른 텍스트 내에 나타나는지 확인하고, true 또는 false로 답합니다:

const message = "다시 오신 것을 환영합니다";
console.log(message.includes("환영")); // true

slice()로 문자열의 일부를 잘라내고, 시작 위치와 중지할 위치를 전달합니다. trim()으로 끝의 공백을 정리합니다. 그리고 replace()로 한 텍스트 조각을 다른 것으로 바꾸세요:

const raw = "  안녕하세요  ";
console.log(raw.trim()); // 안녕하세요

const message = "안녕하세요 민준";
console.log(message.replace("민준", "유키")); // 안녕하세요 유키

더 많은 문자열 메서드가 있으며, 외워야 할 필요는 없습니다. 이 다섯 개를 배우고, 작업이 그들을 요구할 때 나머지를 찾아보세요.

문자열은 **메서드**를 가지고 있으며, 점이 있는 문자열에서 호출하는 함수이며, 소수는 대부분의 일상적인 작업을 다룹니다.

toUpperCase()와 toLowerCase()는 대소문자를 변경하며, 이는 대문자화에 대해 걱정하지 않고 사용자가 입력한 텍스트를 비교할 때 편합니다. includes()는 하나의 문자열이 다른 문자열 내에 나타나는지 여부에 대한 부울을 반환합니다:

const email = "[email protected]";
console.log(email.toLowerCase().includes("@site.com")); // true

slice(start, end)는 시작 인덱스에서 끝 인덱스까지(포함하지 않음) 섹션을 뽑아냅니다. trim()은 양쪽 끝의 공백을 제거하며, 거의 모든 사용자 입력에 원합니다. replace()는 텍스트 조각의 첫 번째 일치를 다른 것으로 바꿉니다:

const raw = "  order-2024  ";
const clean = raw.trim(); // 'order-2024'
console.log(clean.slice(0, 5)); // order
console.log(clean.replace("order", "invoice")); // invoice-2024

이 다섯 개는 일꾼입니다. 많은 더 많은 것이 존재하므로 그들이 다루지 않는 무언가에 도달할 때 참조를 사용하지만, 이들에 의존할 것으로 예상하세요.

문자열은 큰 메서드 집합을 노출하며, 점이 있는 값에서 호출하는 함수입니다. 작은 코어가 대부분의 부하를 수행합니다: 경우를 위한 toUpperCase() / toLowerCase(), 부울 부분 문자열 확인을 위한 includes(), 섹션을 추출하기 위한 slice(start, end)(시작 포함, 끝 제외, 음수는 끝에서 세어짐), 주변 공백을 제거하기 위한 trim(), 그리고 치환을 위한 replace()입니다.

그들을 함께 묶는 프로퍼티: 문자열 메서드는 원본을 변경하지 않으며, 새로운 문자열을 반환합니다. 문자열은 불변이며, 문자열 값을 제자리에서 변경할 수 없으므로 모든 메서드는 새로운 문자열을 넘기고 소스를 그대로 둡니다:

const raw = "  민준 김  ";
const cleaned = raw.trim().toLowerCase();
console.log(cleaned); // 민준 김
console.log(raw); // '  민준 김  '  (변경되지 않음)

결과 자체가 문자열이므로, 메서드는 체인을 이루며, 위의 trim().toLowerCase()를 보여줍니다. 두 개의 엣지 경우는 가치가 있습니다: replace()는 모두를 요청하지 않으면 첫 번째 일치만 바꾸며, 끝을 넘어 인덱싱하면 오류가 아니라 undefined를 반환하므로, raw[999]는 충돌이 아니라 undefined입니다. 그 조용한 undefined는 명확한 실패보다 나중에 혼란스러운 결과로 나타나는 종류의 것입니다.

Juno유용한 문자열 메서드 메서드는 점이 있는 문자열에서 실행하는 작업입니다: toUpperCase(), 예 또는 아니오 확인을 위한 includes(), 부분을 잘라내기 위한 slice(), 공백을 제거하기 위한 trim(), 그리고 텍스트를 바꾸기 위한 replace(). 많은 더 많은 것이 있으므로 이 다섯 개를 배우고 필요할 때 나머지를 찾아보세요.

Juno유용한 문자열 메서드 다섯 가지에 의존하세요: 경우를 위한 toUpperCase()와 toLowerCase(), 부울 확인을 위한 includes(), 추출하기 위한 slice(start, end)(끝은 포함되지 않음), 사용자 입력을 위한 trim(), 그리고 첫 번째 일치를 위한 replace(). 많은 더 많은 것이 존재하므로 이것들이 부족할 때 참조를 사용하세요, 하지만 이것들은 대부분의 날을 다룹니다.

Juno유용한 문자열 메서드 코어 다섯 가지는 toUpperCase/toLowerCase, includes, slice, trim, 그리고 replace이며, 문자열이 불변이므로 모두 새로운 문자열을 반환하며, 결과는 체인을 이루고 원본은 절대 변경되지 않습니다. 두 가지 함정: replace는 기본적으로 첫 번째 일치만 치고, 끝을 넘어 인덱싱하면 명확한 충돌이 아니라 undefined를 주며, 나중에 혼란스러운 결과로 나타나는 경향이 있습니다.

문자열이 다음으로 이동하는 곳

문자열은 JavaScript의 핵심 구성 요소 중 하나이며, 이제 중요한 조각들을 가지고 있습니다: 따옴표나 템플릿 리터럴로 만들고, 연결하고 측정하며, 항상 새로운 것을 반환하는 메서드로 다시 형성하기. 여기에서 사용한 동일한 점과 메서드 패턴은 다른 타입에서 다시 나타나며, 특히 배열 메서드의 목록으로 작업하기 시작할 때입니다.

텍스트는 또한 드물게 혼자 이동합니다. 개수, 가격 또는 합계를 표시하는 순간, 문자열을 숫자와 섞고 있으며, 템플릿 리터럴은 둘을 깔끔하게 꿰매는 방법입니다.