TypeScript 문자열 숫자 변환 (숫자를 문자열로 변환)

TypeScript에서 문자열을 숫자로 변환하려면 Number(text)를 호출합니다. 결과의 타입은 number이고, 텍스트가 올바른 숫자가 아니면 값은 NaN입니다. "42px"처럼 뒤에 문자가 붙은 텍스트에는 parseInt(text, 10)이나 parseFloat(text)를 쓰세요.

const input: string = "42";

const a = Number(input);       // 42
const b = parseInt(input, 10); // 42 (whole numbers)
const c = parseFloat("3.75");  // 3.75
const d = +input;              // 42 (unary plus, same as Number)

console.log(a + 1, b + 1, c + 1, d + 1); // 43 43 4.75 43

// And back: number to string
const text: string = String(a);
console.log(text, text.length); // 42 2

네 가지 변환은 모두 number 타입을 반환합니다. TypeScript는 텍스트가 올바른지 알지 못합니다. 잘못된 문자열도 number를 돌려주며, 그 값이 NaN일 뿐입니다.

왜 변환해야 하나

폼 필드, URL 매개변수, 환경 변수, 파일 내용은 문자열로 들어옵니다. TypeScript는 숫자가 필요한 자리에 문자열을 쓰지 못하게 합니다.

// This does not compile: a string is not a number.
const quantity: string = "3";
const total: number = quantity * 10;
console.log(total);

index.ts(3,23): error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

문자열에 -, *, / 산술 연산을 하면 오류입니다. +는 허용되지만 문자열을 이어 붙이므로 "3" + 10은 문자열 "310"이 됩니다. 그래서 변환을 먼저 해야 합니다: Number(quantity) * 10.

타입 단언도 도움이 되지 않습니다. quantity as number는 거부되고(TS2352), as unknown as number로 억지로 통과시켜도 컴파일러를 조용히 시킬 뿐 런타임의 값은 여전히 문자열입니다.

Number, parseInt, parseFloat, 단항 플러스 비교

네 함수는 깔끔한 입력에서는 결과가 같고, 그 밖의 경우에는 모두 다릅니다. 이 표는 Node에서 각 함수를 실제로 실행한 결과입니다.

표 뒤에 있는 규칙은 다음과 같습니다.

• Number와 단항 +는 동일합니다. 공백을 제거한 뒤 문자열 전체를 변환하고, 1e3과 0x 16진수를 이해하며, 남는 문자가 있으면 NaN을 반환합니다. 빈 문자열이나 공백만 있는 문자열은 0이 됩니다.
• parseInt와 parseFloat는 앞에서부터 읽다가 쓸 수 없는 첫 문자에서 멈추므로 "42px"와 "1,000"은 일부만 숫자가 됩니다. 빈 문자열은 NaN입니다.
• parseInt는 소수 부분을 버리고 지수를 이해하지 못합니다. "1e3"은 e에서 멈춥니다.
• 숫자 구분자(12_000)는 소스 코드에서는 유효하지만 문자열에서는 아닙니다.

입력을 검증할 때는 Number가 더 엄격한 선택입니다. parseInt와 parseFloat는 CSS 크기처럼 실제로 단위나 접미사가 붙은 텍스트에 알맞습니다.

잘못된 입력 처리: NaN

NaN의 타입은 number이므로 컴파일러는 아무 경고도 하지 않습니다. Number.isNaN이나 Number.isFinite로 결과를 직접 확인하세요.

function toNumber(text: string): number | undefined {
    if (text.trim() === "") return undefined; // Number("") would be 0
    const n = Number(text);
    return Number.isFinite(n) ? n : undefined;
}

for (const s of ["12.5", "", "abc", "7 ", "Infinity"]) {
    console.log(JSON.stringify(s), toNumber(s));
}

const age = toNumber("30");
if (age !== undefined) {
    console.log(age + 1); // age is number here
}

number | undefined를 반환하면 실패가 타입의 일부가 되므로, 모든 호출부가 산술 연산 전에 이를 처리해야 합니다. Number.isFinite는 Infinity도 걸러 내는데, Number("Infinity")는 아무렇지 않게 이 값을 반환합니다.

전역 isNaN(x)는 피하세요. 인수를 먼저 변환하므로 JavaScript에서 isNaN("abc")는 true입니다. TypeScript의 선언은 number만 받으므로 문자열을 넘기면 TS2345 오류가 나는데, 이미 변환된 값에 Number.isNaN을 쓰라는 신호입니다.

문자열을 정수로

parseInt에는 항상 두 번째 인수인 기수(radix)를 넘기세요. 10진수 텍스트라면 10입니다. 선택 사항이지만 의도를 드러내고, 다른 진법에서는 결과에 영향을 줍니다. 소수 문자열에서 정수를 얻으려면 변환한 뒤 명시적으로 반올림합니다.

console.log(parseInt("0042", 10)); // 42
console.log(parseInt("ff", 16));   // 255
console.log(parseInt("1010", 2));  // 10

const price = Number("19.99");
console.log(Math.trunc(price), Math.round(price), Math.floor(price)); // 19 20 19

console.log(Number.isInteger(Number("7")));   // true
console.log(Number.isInteger(Number("7.5"))); // false

console.log(BigInt("9007199254740993")); // 9007199254740993n

parseInt는 문자열을 기대합니다. parseInt(12.7)은 컴파일 오류(TS2345)인데, 이는 유용합니다. JavaScript에서 숫자에 parseInt를 쓰면 먼저 텍스트로 변환하므로 0.0000005 같은 값에서 틀린 답(5)을 내기 때문입니다. 숫자에는 Math.trunc를 쓰세요. Number.MAX_SAFE_INTEGER를 넘는 정수는 BigInt(text)가 값 전체를 파싱합니다(잘못된 텍스트에는 NaN을 반환하지 않고 SyntaxError를 던집니다).

숫자를 문자열로

String(n), n.toString(), `${n}` 중 무엇을 써도 숫자를 가장 짧은 문자열 형태로 변환합니다. 서식 메서드를 쓰면 더 세밀하게 제어할 수 있습니다.

const n = 1234.5678;

console.log(String(n));            // 1234.5678
console.log(n.toString());         // 1234.5678
console.log(`${n}`);               // 1234.5678
console.log(n.toFixed(2));         // 1234.57
console.log(n.toPrecision(3));     // 1.23e+3
console.log(n.toLocaleString("en-US")); // 1,234.568
console.log((255).toString(16));   // ff
console.log((5).toString().padStart(3, "0")); // 005

const label: string = n.toFixed(1); // every method here returns string
console.log(label);                 // 1234.6

toFixed는 입력한 10진수가 아니라 2진수 값을 반올림하므로 (1.005).toFixed(2)는 "1.00"입니다. 1.005는 1.005보다 조금 작은 값으로 저장되기 때문입니다. 금액은 정수 단위(센트 등)로 보관하거나 Intl.NumberFormat으로 서식을 지정하세요.

String(n)은 null과 undefined에도 동작하지만("null", "undefined"가 됩니다), n.toString()은 값이 없을 수 있으므로 strict에서 컴파일 오류가 됩니다.

빠른 참조