TypeScript 문자열: 템플릿 리터럴, 여러 줄 문자열, includes

TypeScript 문자열은 string 타입을 가진 JavaScript 문자열입니다. 보간하려면 템플릿 리터럴, 즉 백틱과 ${expression} 자리표시자를 씁니다. 작은따옴표와 큰따옴표는 보간 없는 일반 문자열을 만듭니다.

const author: string = "Ada";
const year = 1843;

// String interpolation with a template literal
const intro = `${author} published her notes in ${year}.`;
console.log(intro);

// Any expression works inside ${ }
const price = 19.5;
const qty = 3;
console.log(`Total: $${(price * qty).toFixed(2)}`); // Total: $58.50
console.log(`${qty > 1 ? "items" : "item"} in cart: ${qty}`);

세 가지 따옴표는 모두 같은 타입 string을 만듭니다. $${...}의 첫 번째 $는 그냥 달러 기호이고, 자리표시자를 시작하는 것은 ${뿐입니다.

문자열 보간(Interpolation)

${ } 안에는 변수, 산술식, 함수 호출, 삼항 연산자, 중첩된 템플릿 리터럴을 넣을 수 있습니다. 값은 String(value)와 같은 방식으로 문자열로 변환됩니다(symbol은 예외입니다. 보간하면 컴파일 오류 TS2731이고 런타임에는 TypeError를 던지므로 String(sym)으로 쓰세요).

type User = { name: string; roles: string[]; lastLogin: Date | null };

const user: User = {
    name: "grace",
    roles: ["admin", "editor"],
    lastLogin: new Date("2024-03-15T10:30:00Z"),
};

const capitalize = (s: string) => s[0].toUpperCase() + s.slice(1);

console.log(`User: ${capitalize(user.name)}`);
console.log(`Roles: ${user.roles.join(", ")}`);
console.log(`Last login: ${user.lastLogin?.toISOString() ?? "never"}`);
console.log(`Raw array: ${user.roles}`); // arrays join with commas

객체를 보간하면 [object Object]가 출력되는데, 원하는 결과인 경우는 거의 없습니다. 필드를 골라 쓰거나 JSON.stringify(obj)를 사용하세요.

여러 줄 문자열

템플릿 리터럴은 여러 줄에 걸쳐 쓸 수 있습니다. 백틱 사이의 모든 것이 문자열의 일부이므로 줄바꿈도, 각 줄 앞의 들여쓰기도 그대로 남습니다.

const poem = `Roses are red,
Violets are blue,
Types are erased,
And so are you.`;
console.log(poem);

function card(title: string, body: string): string {
    return `
    [${title}]
    ${body}`; // the leading spaces and first newline are in the string
}
console.log(JSON.stringify(card("Note", "Hi")));

// Alternatives without the indentation problem:
const lines = ["first line", "second line"].join("\n");
console.log(lines);

코드의 들여쓰기가 문자열에 섞여 들어갈 때는 배열과 join("\n")으로 만들거나, 템플릿 리터럴의 줄을 줄 맨 앞에 붙여 쓰세요.

문자열에 특정 문자열이 포함됐는지 확인하기

includes는 "포함하는가"에 boolean으로 답합니다. startsWith와 endsWith는 앞뒤 끝을 확인합니다. indexOf는 위치를 반환하고, 찾는 문자열이 없으면 -1을 반환합니다. 모두 대소문자를 구분합니다.

const file = "Report-2024.PDF";

console.log(file.includes("2024"));    // true
console.log(file.includes("pdf"));     // false: case-sensitive
console.log(file.toLowerCase().endsWith(".pdf")); // true
console.log(file.startsWith("Report")); // true
console.log(file.indexOf("-"));        // 6
console.log(file.indexOf("x"));        // -1

// A regular expression for patterns, with the i flag for case-insensitive
console.log(/report-\d{4}/i.test(file)); // true

includes는 시작 위치도 받습니다. file.includes("R", 1)은 인덱스 1부터만 찾습니다.

자주 쓰는 메서드와 반환 타입

TypeScript는 모든 내장 메서드의 반환 타입을 알고 있습니다. 주의할 것은 빈 결과를 돌려줄 수 있는 메서드입니다. strict에서는 결과를 쓰기 전에 null이나 undefined를 처리해야 하기 때문입니다.

const log = "error=404 path=/users";

const match = log.match(/error=(\d+)/);
// match is RegExpMatchArray | null: check before indexing
if (match) {
    console.log(Number(match[1])); // 404
}

const last = "abc".at(-1); // string | undefined
console.log(last?.toUpperCase()); // C

const parts = log.split(" ").map((p) => p.split("="));
console.log(parts); // [ [ 'error', '404' ], [ 'path', '/users' ] ]

일반 인덱싱 s[5]는 인덱스가 끝을 넘어도(런타임 값은 undefined) 타입이 string입니다. 컴파일러 옵션 noUncheckedIndexedAccess를 켜면 string | undefined가 됩니다.

문자열은 불변(immutable)이다

문자열의 글자를 제자리에서 바꿀 수 없습니다. TypeScript는 인덱스에 대입하는 코드를 TS2542 오류(Index signature in type 'String' only permits reading.)로 보고하며, 컴파일 결과인 strict 모드 JavaScript에서도 같은 대입은 런타임에 TypeError를 던집니다. 문자열을 바꾸는 것처럼 보이는 메서드는 모두 새 문자열을 반환합니다.

let word = "hello";

// @ts-expect-error: Index signature in type 'String' only permits reading.
const change = () => { word[0] = "H"; };

word = "H" + word.slice(1); // build a new string instead
console.log(word);          // Hello

다른 값을 문자열로, 또는 문자열을 숫자로 바꾸는 방법은 문자열을 숫자로 변환을 참고하세요.

문자열 리터럴 타입

string은 어떤 텍스트든 받습니다. 문자열 리터럴 타입은 정확히 한 값만 받으며, 이들의 유니언은 허용되는 문자열의 enum 같은 집합을 만듭니다.

type Status = "draft" | "published" | "archived";

function label(status: Status): string {
    return `Post is ${status}`;
}

console.log(label("draft"));
// @ts-expect-error: Argument of type '"deleted"' is not assignable to parameter of type 'Status'.
console.log(label("deleted"));

리터럴 타입은 컴파일할 때만 검사됩니다. 런타임에는 label("deleted")도 실행되어 Post is deleted를 출력하며, 여기서 두 번째 줄이 바로 그렇게 동작합니다. 템플릿 리터럴 문법은 타입 수준에서도 쓸 수 있습니다. type EventName = `on${string}`은 on으로 시작하는 모든 문자열을 받습니다.