문자열

로그인한 사용자를 위한 인사말을 만든다고 해봅시다. 사용자 이름은 이미 변수에 들어 있습니다. "다시 오신 것을 환영합니다, 지민님"이라는 문구를 만들어야 하는데, "지민"이라는 이름을 직접 타이핑해 넣을 수는 없습니다. 내일은 "수현"일 것이고, 그다음 날은 여러분이 한 번도 들어본 적 없는 이름일 테니까요. 이렇게 그때그때 만들고, 길이를 재고, 형태를 바꿀 수 있는 텍스트가 바로 문자열이며, 이 장에서는 문자열을 다루는 방법을 배웁니다.

문자열 만들기

**문자열**은 텍스트입니다. 인용부호로 감싼 문자들의 나열이라면 모두 문자열입니다. 홑인용부호(')와 겹인용부호(")를 모두 쓸 수 있고 동작 방식도 똑같으니, 하나를 골라 일관되게 사용하면 됩니다.

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

문자열을 만드는 가장 유용한 방법은 템플릿 리터럴입니다. 인용부호 대신 백틱()으로 감싸서 씁니다. 템플릿 리터럴 안에서는 ${...}`를 이용해 값을 텍스트에 끼워 넣을 수 있고, JavaScript가 그 자리에 해당 값을 채워줍니다.

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

여기서 ${firstName}은 하나의 빈칸입니다. 문자열이 만들어질 때 이 빈칸은 firstName의 값으로 채워집니다. 여러 조각을 이어 텍스트를 만들 때는 템플릿 리터럴을 쓰는 습관을 들이세요.

Juno문자열 만들기 문자열은 인용부호 안에 든 텍스트이고, 홑인용부호든 겹인용부호든 똑같이 동작하니 하나를 골라 일관되게 쓰면 됩니다. 여러 조각을 이어 텍스트를 만들 때는 템플릿 리터럴을 쓰세요. 백틱과 ${...} 빈칸에 값을 채워 넣는 방식이 가장 자주 쓰는 도구가 될 겁니다.

합치고 길이 재기

두 문자열은 + 연산자로 합칠 수 있습니다. 이를 **연결(concatenation)**이라고 부릅니다.

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 전체에서 자주 나오니 지금부터 익숙해지는 게 좋습니다.

Juno합치고 길이 재기 문자열은 +로 이어붙이지만, 공백을 직접 넣어줘야 한다는 걸 잊지 마세요. 안 그러면 인사말과 이름이 붙어버립니다. 같은 일에는 보통 템플릿 리터럴이 더 깔끔합니다. 문자 수를 셀 때는 .length를, 위치로 한 글자를 읽을 때는 name[0]처럼 대괄호를 쓰세요. 위치는 0부터 셉니다.

유용한 문자열 메서드

문자열에는 내장 **메서드**가 있습니다. 점(.)과 메서드 이름을 써서 문자열에 실행하는 동작들입니다. 가장 자주 쓰게 될 메서드들을 소개합니다.

toUpperCase()와 toLowerCase()로 대소문자를 바꿉니다.

const firstName = "priya";
console.log(firstName.toUpperCase()); // PRIYA

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("민준", "유키")); // 안녕, 유키

문자열 메서드는 이보다 훨씬 많이 있고, 전부 외울 필요는 없습니다. 이 다섯 개를 익히고, 나머지는 필요할 때 찾아보면 됩니다.

Juno유용한 문자열 메서드 메서드는 점을 붙여 문자열에 실행하는 동작입니다. toUpperCase(), 예/아니오를 확인하는 includes(), 일부를 잘라내는 slice(), 불필요한 공백을 제거하는 trim(), 텍스트를 바꾸는 replace()가 있습니다. 이 외에도 많으니 이 다섯 개를 익히고 나머지는 필요할 때 찾아보세요.

문자열, 그다음은

문자열은 JavaScript의 핵심 구성 요소 중 하나이며, 이제 중요한 것들을 다 갖췄습니다. 인용부호나 템플릿 리터럴로 문자열을 만드는 법, 합치고 길이를 재는 법, 그리고 항상 새로운 값을 반환하는 메서드로 형태를 바꾸는 법까지요. 여기서 사용한 점-메서드 패턴은 다른 타입에서도 다시 등장하는데, 특히 배열 메서드에서 리스트를 다루기 시작할 때 그렇습니다.

텍스트는 혼자 다니는 경우가 드뭅니다. 개수나 가격, 합계를 보여주는 순간 숫자와 문자열을 섞어 쓰게 되는데, 템플릿 리터럴은 이 둘을 깔끔하게 엮어주는 방법입니다.

문자열 ​

문자열 만들기 ​

합치고 길이 재기 ​

유용한 문자열 메서드 ​

문자열, 그다음은 ​

문자열

문자열 만들기

합치고 길이 재기

유용한 문자열 메서드

문자열, 그다음은