간편한 변환을 위한 5가지 방법

자바스크립트는 웹 페이지에 짧은 코드 조각을 삽입하기 위해 만들어졌습니다. 당초에는 이렇게까지 널리 사용될 것이라고 예상하지 못했으며, 오늘날처럼 수천 줄에 달하는 코드로 애플리케이션을 만드는 데 활용될 것이라고는 상상조차 못 했습니다.

자바스크립트는 성장하여 현재 애플리케이션 개발에 광범위하게 사용되고 있지만, 완벽한 언어라고 할 수는 없습니다. 소박한 시작과 초기 사용 목적은 자바스크립트가 대규모 애플리케이션을 구축하는 데 여러 가지 단점을 가지고 있음을 의미합니다.

예를 들어, 자바스크립트는 객체에 존재하지 않는 요소를 참조하거나 null 값에 숫자를 곱할 때에도 오류를 발생시키지 않습니다.

자바스크립트에서 빈 문자열("")은 같음 연산자(==)로 비교하면 숫자 0과 같습니다. 더 심각한 문제는 자바스크립트가 개발 중인 코드에서 이러한 오류를 보여주지 않는다는 것입니다. 프로그램이 실행된 후에야 오류를 확인할 수 있습니다.

타입스크립트는 자바스크립트 기반으로 만들어졌으며, 자바스크립트로 애플리케이션을 개발할 때 발생하는 문제점을 완화하기 위해 개발되었습니다. 이를 위해 타입스크립트는 코드를 작성하는 동안 정적 타입 검사를 수행합니다.

정적 검사란 코드를 실행하지 않고도 코드 내 오류를 감지하는 것을 의미합니다. 따라서 정적 타입 검사는 코드에서 사용되는 값의 유형을 기반으로 개발 중에 오류를 검사합니다.

타입스크립트는 자바스크립트의 형식화된 상위 집합입니다. 이는 유효한 자바스크립트 코드가 유효한 타입스크립트 코드이기도 함을 의미합니다. 타입을 지정한다는 것은 타입스크립트가 다양한 데이터 유형의 사용 방식에 대한 규칙을 추가한다는 것을 의미합니다. 또한 타입스크립트는 강력한 형식을 지니고 있어 타입 시스템에 의해 적용되는 제한 사항을 우회할 수 없습니다.

타입스크립트는 웹 개발 분야에 큰 진보이자 중요한 발전입니다. 타입스크립트를 사용하면 유지보수가 용이하고 가독성이 좋은 코드를 작성할 수 있습니다. 또한 좋은 코딩 습관을 장려하고 개발자들이 코드를 작성할 때 오류를 포착하고 방지하는 데 도움을 줍니다.

타입스크립트는 자바스크립트에 비해 더욱 안정적이고 리팩토링하기 쉬워서 대규모 애플리케이션을 구축하는 데 이상적입니다. 타입스크립트가 강력하게 타입화되므로, 타입 변환의 중요성과 타입스크립트가 타입 변환을 처리하는 방법을 살펴보겠습니다.

타입스크립트에서의 타입 변환과 그 중요성

타입 변환은 문자열 값을 숫자로 바꾸는 것과 같이 값의 데이터 유형을 다른 유형으로 바꾸는 과정입니다. 타입 변환은 암시적으로 수행될 수 있으며, 컴파일러가 연산 중 호환되는 데이터 유형을 자동으로 변환합니다.

반면 타입 변환이 명시적일 수도 있는데, 이 경우에는 소스 코드에서 직접 타입 변환을 지정해야 합니다. 이를 흔히 타입 캐스팅이라고 부릅니다.

타입 변환은 개발자가 타입스크립트에서 예상되는 데이터 유형을 준수하면서 다양한 데이터 형식으로 작업할 수 있도록 해주기 때문에 중요합니다. 또한 소스 코드에서 예측 가능한 결과를 보장하는 데에도 도움이 됩니다.

개발자가 직접 타입을 캐스팅하면 코드가 여전히 타입스크립트의 타입 요구 사항을 충족하는지 확인할 수 있습니다. 코드를 더 쉽게 읽고 이해할 수 있도록 만들며 타입 관련 오류를 예방하는 데도 도움이 됩니다.

타입 변환은 데이터 유효성 검사를 지원하는 데도 도움이 되며, 타입스크립트는 특정 타입과 관련된 자동 완성 기능과 같은 모든 내장 도구를 제공하여 개발 과정을 더 원활하게 만듭니다.

타입 변환의 일반적인 사용 사례 중 하나는 문자열과 숫자 간의 변환입니다. 타입스크립트에서 문자열을 숫자로 변환할 때는 코드 오류를 방지하기 위해 숫자 형태의 문자열만 숫자로 변환해야 합니다. 예를 들어, "1", "235", "5234.5"와 같은 문자열은 변환할 수 있지만, "hello"와 같은 문자열은 숫자로 변환해서는 안 됩니다.

이제 타입스크립트에서 문자열을 숫자로 변환하는 다양한 방법을 살펴보겠습니다.

'as'를 사용한 타입 어설션

타입스크립트 코드에서 다양한 데이터 유형을 다룰 때, 때로는 타입스크립트가 알 수 없는 값 유형에 대한 추가 정보를 얻게 될 수 있습니다. 이 경우 타입스크립트에 변수의 타입을 명시적으로 알려주어 컴파일러가 타입을 유추하지 않도록 해야 합니다. 이것이 바로 타입 어설션입니다.

타입 어설션은 'as' 키워드를 사용하여 수행합니다. 타입 어설션을 사용하여 문자열을 숫자로 변환하려면 먼저 문자열 타입을 'unknown'으로 설정해야 합니다. 이는 기본적으로 타입스크립트가 문자열 타입을 숫자로 변환하려는 모든 시도를 잠재적인 실수로 간주하기 때문입니다. 문자열과 숫자는 서로 충분히 겹치지 않기 때문입니다. 문자열을 숫자로 변환하려면 다음과 같이 진행하십시오.

/**
 * numString의 타입을 unknown으로 설정합니다. 이렇게 하지 않으면
 * 타입스크립트는 numString을 문자열 값으로 유추합니다.
 */
let numString: unknown = "23452";

// 'as'를 사용한 타입 변환 - numString이 숫자로 변환되어
// 변수 score에 할당됩니다.
let score = numString as number;
console.log(score);
console.log(score * 35);

결과:

23452
820820

출력 결과를 보면 변수 numString이 숫자로 변환되어 score에 할당되었음을 알 수 있습니다. 따라서 score의 값이 숫자이므로 score를 이용하여 곱셈과 같은 수치 연산을 수행할 수 있습니다.

<>를 사용한 타입 어설션

<>를 사용한 타입 어설션 또한 문자열을 숫자로 변환하는 데 사용할 수 있습니다. 이는 'as' 키워드를 사용하는 것과 완전히 동일하게 작동합니다. 구현 상의 유일한 차이점은 아래와 같은 구문입니다.

let numString: unknown = "23452";
// <>를 사용한 타입 어설션으로 문자열을 숫자로 변환
let score = <number>numString;

console.log(score);
console.log(score * 35);

결과:

23452
820820

출력 결과는 'as' 키워드를 사용하는 것과 동일합니다. 다시 한번 강조하지만, 숫자 값이 없는 문자열을 변환하기 위해 타입 어설션을 사용하지 않도록 주의해야 합니다.

Number 생성자 사용

Number 생성자를 사용하여 문자열을 숫자로 변환하려면, 아래 코드 조각에서 볼 수 있듯이 Number 생성자에 변환하려는 문자열을 전달하면 됩니다.

let numString = "23452"; // 타입이 문자열로 유추됨
let lives: string = "20"; // 타입이 문자열로 명시됨

// Number 생성자에 문자열을 전달하여 숫자로 변환
let score = Number(numString)
console.log(score / 17)

// Number 생성자에 문자열을 전달하여 숫자로 변환
let remainingLives = Number(lives);
console.log(remainingLives - 4)

결과:

1379.5294117647059
16

Number 생성자를 사용할 때는 문자열 타입을 unknown으로 설정할 필요가 없습니다. 주석이 달렸거나 문자열로 유추된 문자열 값 모두에 대해 작동합니다. 그러나 "514"와 같은 숫자 문자열을 전달해야 합니다. 숫자로 변환할 수 없는 문자열을 전달하면 NaN(Not-a-Number)이 반환됩니다.

단항 더하기(+) 연산자 사용

단일 피연산자 앞에 있는 단항 더하기(+) 연산자는 앞에 있는 피연산자 자체로 평가됩니다. 예를 들어, +2는 숫자 2로 평가되고, +542는 숫자 542로 평가됩니다. 그러나 피연산자가 숫자가 아닌 경우, 단항 더하기(+) 연산자는 해당 피연산자를 숫자로 변환하려고 시도합니다.

예를 들어, +"98"은 98로 평가되고 +"0"은 숫자 0으로 평가됩니다. 따라서 단항 더하기(+) 연산자를 사용하여 문자열을 숫자로 변환할 수 있습니다. 숫자로 변환할 수 없는 문자열을 전달하면 아래와 같이 NaN이 반환됩니다.

let numString1 = "23452";
let numString2 = "973.82"
let word = "hello"

// 단항 더하기(+) 연산자를 사용하여 문자열을 숫자로 변환
let num1 = +numString1;
let num2 = +numString2;
let notNumber = +word;

console.log(`${num1} is a ${typeof num1}`);
console.log(`${num2} is a ${typeof num2}`);
console.log(notNumber);

결과:

23452 is a number
973.82 is a number
NaN

단항 더하기(+) 연산자를 사용하면 속도가 빠르고 피연산자에 대해 추가적인 연산을 수행하지 않으므로 문자열을 숫자로 변환하는 데 유용한 방법입니다.

parseInt() 및 parseFloat() 사용

자바스크립트와 마찬가지로 타입스크립트는 정수와 부동 소수점 숫자(십진수)를 구분하지 않습니다. 이들은 모두 'number' 타입으로 간주됩니다. 다만 parseInt()와 parseFloat()의 동작은 약간 다릅니다.

parseInt()는 문자열 인자를 받아 구문 분석하고, 지정된 기수에 따라 해당 정수를 반환합니다. 반면 parseFloat()는 문자열을 받아 구문 분석하여 부동 소수점 숫자를 반환합니다.

예를 들어 "897"을 parseInt()와 parseFloat()에 모두 전달하면 숫자 897이 반환됩니다. 그러나 897.75를 parseInt()와 parseFloat()에 전달하면 parseInt()는 897을 반환하고 parseFloat()는 897.75를 반환합니다.

따라서 소수점 이하 자릿수가 없는 숫자 문자열을 변환할 때는 parseInt()를 사용하고, 숫자 문자열에 소수점 이하 자릿수가 있는 경우에는 아래 코드와 같이 parseFloat()를 사용하는 것이 좋습니다.

let numString1 = "897.75";
let numString2 = "724";
let word = "hello";

console.log("소수점이 있는 숫자 문자열 파싱")
console.log(`parseInt 사용 -> ${parseInt(numString1)}`);
console.log(`parseFloat 사용 -> ${parseFloat(numString1)}`);

console.log("정수 숫자 문자열 파싱")
console.log(`parseInt 사용 -> ${parseInt(numString2)}`);
console.log(`parseFloat 사용 -> ${parseFloat(numString2)}`);

console.log("숫자로 변환할 수 없는 문자열 파싱")
console.log(parseInt(word));
console.log(parseFloat(word));

결과:

소수점이 있는 숫자 문자열 파싱
parseInt 사용 -> 897
parseFloat 사용 -> 897.75
정수 숫자 문자열 파싱
parseInt 사용 -> 724
parseFloat 사용 -> 724
숫자로 변환할 수 없는 문자열 파싱
NaN
NaN

결론

API 호출 결과와 같이 문자열 값으로 작업할 때, 숫자 계산을 수행할 수 있도록 문자열 값을 숫자로 변환해야 할 필요가 있습니다. 이러한 필요가 발생할 경우, 문자열을 숫자로 변환하는 데 본문에서 소개한 다양한 방법들을 고려해 보십시오.

하지만 문자열을 숫자로 변환하려고 할 때마다 NaN이 발생할 수 있다는 점을 명심해야 합니다.

이러한 오류를 방지하려면 숫자로 변환하려는 모든 문자열이 숫자 형태의 문자열인지 확인해야 합니다. 또한 코드 오류를 방지하기 위해 if 문을 사용하여 NaN 여부를 확인할 수도 있습니다.

개발자로서 최고의 타입스크립트 라이브러리와 런타임을 탐색하는 것도 좋은 방법입니다.