문자열과 템플릿 리터럴

"5" + 3은 8이 아니라 "53"입니다. + 양쪽 중 하나가 문자열이면 자바스크립트는 숫자를 더하지 않고 글자를 잇습니다.

프로그램 속의 글자

이름, 메시지, 주소, 비밀번호, 웹 페이지 전체가 모두 글자이고, 자바스크립트는 글자를 문자열로 저장합니다. 문자열은 따옴표 사이에 있는 글자들의 줄입니다. 자바스크립트는 세 가지 따옴표를 받습니다. 큰따옴표 "이렇게", 작은따옴표 '이렇게', 백틱 `이렇게`입니다. 앞의 두 가지는 똑같이 동작합니다. 백틱은 템플릿 리터럴을 만드는데, 아래에서 설명할 기능이 더 있습니다.

글자 안에 따옴표 한 종류가 들어 있으면 다른 종류로 감쌉니다. "It's late"는 아포스트로피가 큰따옴표가 아니어서 문제없습니다. 따옴표 앞에 역슬래시를 붙여 「이것은 글자의 일부」라고 알려 줄 수도 있습니다. 'It\'s late'처럼 씁니다. 역슬래시 뒤에 n을 붙인 \n은 문자열 안의 줄바꿈을 뜻합니다.

길이와 위치

모든 문자열은 자기 글자 수를 압니다. "JavaScript".length는 10입니다. 글자마다 위치도 있는데 이를 인덱스라고 하고, 1이 아니라 0부터 셉니다. "JavaScript"에서 인덱스 0은 J, 인덱스 4는 S이고, 마지막 인덱스는 길이보다 하나 작은 9입니다. 글자 하나는 대괄호로 읽습니다. word[0]처럼 씁니다. 0부터 세는 것이 처음엔 어색하지만 배열에서도 똑같이 다시 나옵니다.

const word = "JavaScript";
console.log(word.length);                // 10
console.log(word[0]);                    // J
console.log(word[word.length - 1]);      // t

자주 쓰는 문자열 메서드

문자열에는 메서드라는 내장 도구가 있고, 문자열 뒤에 점을 찍어 부릅니다. toUpperCase()와 toLowerCase()는 대문자나 소문자로 바꾼 복사본을 돌려줍니다. includes("Script")는 그 글자가 안에 있으면 true, 없으면 false를 답합니다. slice(0, 4)는 인덱스 0부터 인덱스 4 바로 앞까지의 글자를 돌려주는데, "JavaScript"에서는 "Java"입니다. trim()은 양 끝의 빈칸을 없애서 사람이 입력한 글자를 정리할 때 좋습니다. 이 메서드들은 원래 문자열을 바꾸지 않습니다. 자바스크립트의 문자열은 그 자리에서 바꿀 수 없고, 메서드는 언제나 새 문자열을 돌려줍니다.

+로 문자열 잇기

+ 연산자는 문자열을 끝과 끝으로 이어 붙이는데, 이를 연결(concatenation)이라고 합니다. "Hello, " + "Mina"는 "Hello, Mina"가 됩니다. 빈칸은 저절로 들어가지 않으니 따옴표 안에 직접 넣어야 합니다. 리드에서 말한 함정이 여기 있습니다. + 양쪽 중 하나라도 문자열이면 자바스크립트는 다른 쪽도 문자열로 바꿔서 잇습니다. "5" + 3은 "53"입니다. 다른 산술 연산자는 글자를 잇지 않아서 "5" * 2는 "5"를 숫자로 바꿔 10을 줍니다. 숫자가 든 문자열을 진짜 숫자로 바꾸려면 Number("5")를 씁니다.

템플릿 리터럴

+로 문장을 만들면 금방 복잡해집니다. name + " is " + age + " years old."는 빈칸과 따옴표를 하나하나 신경 써야 합니다. 백틱으로 쓰는 템플릿 리터럴은 ${ } 안에 값을 넣어 글자 속에 바로 끼워 넣습니다. 중괄호 안은 식으로 계산되고 그 결과가 문자열에 들어갑니다. 템플릿 리터럴은 여러 줄에 걸쳐 쓸 수도 있습니다.

const name = "Mina";
const age = 14;
console.log(`${name} is ${age} years old.`);   // Mina is 14 years old.
console.log(`Next year: ${age + 1}`);           // Next year: 15

풀이 예시. 가게 표에 "3 apples cost 4.5"라고 써야 합니다. const n = 3, price = 1.5;가 있으면 템플릿 `${n} apples cost ${n * price}` 한 줄로 되고, 곱셈은 중괄호 안에서 계산됩니다.