문자열 다루기

글자를 담는 방법

글자는 따옴표로 감쌉니다. 큰따옴표와 작은따옴표 가운데 무엇을 사용해도 됩니다. 여는 것과 닫는 것만 같으면 됩니다.

세 번째 방법이 있습니다. 백틱(`)으로 감싸면 그 안에 값을 끼워 넣을 수 있습니다. 이것을 템플릿 리터럴(template literal) 이라고 합니다.

값을 끼워 넣기

백틱 안에서 ${변수} 라고 적으면 그 자리에 값이 들어갑니다.

const name = "홍길동";
const age = 27;

console.log(`${name}님은 ${age}살입니다.`);

이어 붙이는 방법으로도 같은 문장을 만들 수 있지만, 따옴표와 + 가 번갈아 나와 읽기 어렵습니다.

const name = "홍길동";
const age = 27;

console.log(name + "님은 " + age + "살입니다.");

길이와 잘라내기

length 는 글자 수이고, slice 는 일부를 잘라 냅니다. 자리는 0부터 셉니다.

const text = "JavaScript";

console.log(text.length);
console.log(text.slice(0, 4));
console.log(text.slice(4));
console.log(text[0]);

slice(0, 4) 는 0번째부터 4번째 앞까지입니다. 4번째는 들어가지 않습니다.

자주 사용하는 기능

const text = "  Hello JavaScript  ";

console.log(text.trim());
console.log(text.trim().toUpperCase());
console.log(text.includes("Java"));
console.log(text.trim().replace("Hello", "안녕"));

trim 은 앞뒤 빈칸을 걷어냅니다. 입력 칸에서 받은 값을 다룰 때 자주 사용합니다.

원래 값은 바뀌지 않습니다. 이 기능들은 바뀐 값을 새로 돌려줄 뿐입니다. 바꾼 결과를 사용하려면 그 결과를 다시 담아야 합니다.

여러 줄로 적기

백틱으로 감싸면 줄을 바꾼 그대로 담깁니다.

const letter = `첫째 줄
둘째 줄`;

console.log(letter);

처음에 자주 걸리는 것

SyntaxError: Invalid or unexpected token

${name}님은 ${age}살입니다.

직접 해보기

이 단원의 정리